• You can create classes for use on multiple tag types in the document.
• You can use selector and grouping methods to apply styles in complex situations.
• No extra download is required to import the information.

CSS selectors are used to "find" (or select) the HTML elements you want to style. We can divide CSS selectors into five categories:

• Simple selectors (select elements based on name, id, class)
• Combinator selectors (select elements based on a specific relationship between them)
• Pseudo-elements selectors (select and style a part of an element)
• Attribute selectors (select elements based on an attribute or attribute value)

A CSS selector can contain more than one simple selector. Between the simple selectors, we can include a combinator. There are four different combinators in CSS:

descendant selector (space):
The descendant selector matches all elements that are descendants of a specified element.

---

---

child selector (>):
The child selector selects all elements that are the children of a specified element.

---

---

adjacent sibling selector (+):
The adjacent sibling selector is used to select an element that is directly after another specific element.
Sibling elements must have the same parent element, and "adjacent" means "immediately following"

---

---

general sibling selector (~):
The general sibling selector selects all elements that are next siblings of a specified element.

---

A pseudo-class is used to define a special state of an element. For example, it can be used to:

• Style an element when a user mouses over it
• Style visited and unvisited links differently
• style an element when it gets focus

A CSS pseudo-element is used to style specified parts of an element.
For example, it can be used to Style the first letter, or line, of an element and insert content before, or after, the content of an element

The CSS opacity property is used to specify the transparency of an element. In simple word, you can say that it specifies the clarity of the image. In technical terms, Opacity is defined as the degree to which light is allowed to travel through an object. For example:

The universal selector matches the name of any of the element type instead of selecting elements of a specific type.

The background-repeat property repeats the background image horizontally and vertically. Some images are repeated only horizontally or vertically.

The background-attachment property is used to specify if the background image is fixed or scroll with the rest of the page in the browser window. If you set fixed the background image, then the image not move during scrolling in the browser. Let's take an example with the fixed background image.

The ruleset is used to identify that selectors can be attached with other selectors. It has two parts:

• Selector - Selector indicates the HTML element you want to style.
• Declaration Block - The declaration block can contain one or more declarations separated by a semicolon.

An overall block is given to class selector while id selectors take only a single element differing from other elements.

CSS Class Selector

CSS Id Selector

RWD stands for Responsive Web Design. This technique is used to display the designed page perfectly on every screen size and device, for example, mobile, tablet, desktop and laptop. You don't need to create a different page for each device.

If a web page has a large number of images that take a longer time to load because each image separately sends out an HTTP request. The concept of CSS sprites is used to reduce the loading time for a web page because it combines the various small images into one image. It reduces the number of HTTP requests and hence the loading time.

• Physical tags are referred to as presentational markup while logical tags are useless for appearances.
• Physical tags are newer versions, on the other hand, logical tags are old and concentrate on content.

The CSS box model is used to define the design and layout of elements of CSS.
The elements are:

• Margin - It removes the area around the border. It is transparent.
• Border - It represents the area around the padding
• Padding - It removes the area around the content. It is transparent.
• Content - It represents the content like text, images, etc.

The CSS float property is used to move the image to the right or left along with the texts to be wrapped around it. It doesn't change the property of the elements used before it.
To understand its purpose and origin, let's take a look at its print display. In the print display, an image is set into the page such that text wraps around it as needed.

In short, there is no easy way to restore to default values to whatever a browser uses.
The closest option is to use the 'initial' property value, which restores the default CSS values, rather than the browser's default styles.

The z-index helps to specify the stack order of positioned elements that may overlap one another. The z-index default value is zero and can take on either a positive or negative number.
An element with a higher z-index is always stacked above than a lower index.
Z-Index can take the following values:

• Auto:

  Sets the stack order equal to its parents.

• Number:

  Orders the stack order.

• Initial:

  Sets this property to its default value (0).

• Inherit:

  Inherits this property from its parent element.

visibility: hidden hides the element, but it occupies space and affects the layout of the document.
display: none also hides the element but not occupy space. It will not affect the layout of the document.

The declaration block is a catalog of directions comprising the property, followed by a colon, and finally, the value enclosed within braces.

The various font attributes available include font-variant, font-weight, font-style, font-family, line-height of font size, caption, icon, and font-family.

CSS text formatting properties are used to format text and style text. CSS text formatting includes the following properties:

1. Text-color
2. Text-alignment
3. Text-decoration
4. Text-transformation
5. Text-indentation
6. Letter spacing
7. Line height
8. Text-direction
9. Text-shadow
10. Word spacing

A link is a connection from one web page to another web page. CSS property can be used to style the links in various different ways.
States of Link: Before discussing CSS properties, it is important to know the states of a link. Links can exist in different states and they can be styled using pseudo-classes.
There are four states of links given below:

• a:link:This is a normal, unvisited link.
• a:visited: This is a link visited by a user at least once.
• a:hover:This is a link when the mouse hovers over it.
• a:active:This is a link that is just clicked.

The position property in CSS tells about the method of positioning for an element or an HTML entity. There are five different types of position properties available in CSS:

1. Fixed
2. Static
3. Relative
4. Absolute
5. Sticky

The positioning of an element can be done using the top, right, bottom, and left properties. These specify the distance of an HTML element from the edge of the viewport. To set the position by these four properties, we have to declare the positioning method. Let’s talk about each of these position methods in detail:
1. Fixed: Any HTML element with position: fixed property will be positioned relative to the viewport. An element with fixed positioning allows it to remain at the same position even as we scroll the page. We can set the position of the element using the top, right, bottom, and left.
2. Static: This method of positioning is set by default. If we don’t mention the method of positioning for any element, the element has the position: static method by default. By defining Static, the top, right, bottom and left will not have any control over the element. The element will be positioned with the normal flow of the page.
3. Relative: An element with position: relative is positioned relatively with the other elements which are sitting at top of it. If we set its top, right, bottom, or left, other elements will not fill up the gap left by this element.
4. Absolute: An element with position: absolute will be positioned with respect to its parent. The positioning of this element does not depend upon its siblings or the elements which are at the same level.
5. Sticky: Element with position: sticky and top: 0 played a role between fixed & relative based on the position where it is placed. If the element is placed in the middle of the document then when the user scrolls the document, the sticky element starts scrolling until it touches the top. When it touches the top, it will be fixed at that place in spite of further scrolling. We can stick the element at the bottom, with the bottom property.

The CSS overflow controls the big content. It tells whether to clip content or to add scroll bars. The overflow contains the following property:

• visible
• hidden
• scroll
• auto

1. Visible:The content is not clipped and is visible outside the element box.
2. Hidden:The overflow is clipped and the rest of the content is invisible.
3. Scroll:The overflow is clipped but a scrollbar is added to see the rest of the content. The scrollbar can be horizontal or vertical.
4. Auto: It automatically adds a scrollbar whenever it is required.
Overflow-x and Overflow-y: This property specifies how to change the overflow of elements. x deals with horizontal edges and y deals with vertical edges.

Float is a CSS property written in a CSS file or directly in the style of an element. The float property defines the flow of content. Below are the types of floating properties:

Yes, we can, a transformation modifies an element by its shape, size, and position. It transforms the elements along the X-axis and Y-axis.
There are six main types of 2D transformations which are listed below:

• translate()
• rotate()
• scale()
• skewX()
• skewY()
• matrix()

Yes, it allows changing elements using 3D transformations. In 3D transformation, the elements are rotated along the X-axis, Y-axis, and Z-axis.
There are three main types of transformation which are listed below:

• rotateX()
• rotateY()
• rotateZ()

Transitions in CSS allow us to control the way in which transition takes place between the two states of the element.

The transition allows us to determine how the change in color takes place. We can use the transitions to animate the changes and make the changes visually appealing to the user and hence, giving a better user experience and interactivity. In this article, we will show you how to animate the transition between the CSS properties.

There are four CSS properties that you should use, all or in part (at least two, transition-property and transition-duration, is a must), to animate the transition. All these properties must be placed along with other CSS properties of the initial state of the element:

• transition-property:This property allows you to select the CSS properties which you want to animate during the transition(change).

  

• transition-duration:This property allows you to determine how long it will take to complete the transition from one CSS property to the other.

  
  Here, time can be in seconds(s) or milliseconds(ms), you should use ‘s’ or ‘ms’ after the number (without quotes).

• transition-timing-function:This property allows you to determine the speed of change and the manner of change, during the transition. Like, the change should be fast at the beginning and slow at the end, etc.

  

• transition-delay:This property allows you to determine the amount of time to wait before the transition actually starts to take place.

  
  Here, again, time can be in seconds(s) or milliseconds(ms), and you should use ‘s’ or ‘ms’ after the number (without quotes).

• The Shorthand Property You can combine all the four transition properties mentioned above, into one single shorthand property, according to the syntax given below. This saves us from writing long codes and prevents us from getting messy. Note the ordering of property, it has significance.

  
  

CSS Animations is a technique to change the appearance and behavior of various elements in web pages. It is used to control the elements by changing their motions or display. It has two parts, one which contains the CSS properties which describe the animation of the elements and the other contains certain keyframes which indicate the animation properties of the element and the specific time intervals at which those have to occur.

The @keyframes rule: Keyframes are the foundations with the help of which CSS Animations works. They define the display of the animation at the respective stages of its whole duration. For example: In the following code, the paragraph changes its color with time. At 0% completion, it is red, at 50% completion it is of orange color and at full completion i.e. at 100%, it is brown.

Example:

output:

The box-sizing CSS property defines how the user should calculate the total width and height of an element i.e. padding and borders, are to be included or not.
syntax:

Property Values:

• content-box:This is the default value of the box-sizing property. In this mode, the width and height properties include only the content. Border and padding are not included in it i.e if we set an element’s width to 200 pixels, then the element’s content box will be 200 pixels wide, and the width of any border or padding will be added to the final rendered width.
• border-box:In this mode, the width and height properties include content, padding, and borders i.e if we set an element’s width to 200 pixels, that 200 pixels will include any border or padding we added, and the content box will shrink to absorb that extra width. This typically makes it much easier to size elements.

Media query is used to create a responsive web design. It means that the view of a web page differs from system to system based on screen or media types.
Media queries can be used to check many things:

• width and height of the viewport
• width and height of the device
• Orientation
• Resolution

A media query consist of a media type that can contain one or more expression which can be either true or false. The result of the query is true if the specified media matches the type of device the document is displayed on. If the media query is true then a style sheet is applied.

It is also called a flexible box model. It is basically a layout model that provides an easy and clean way to arrange items within a container. Flexbox is different from the block model which is vertically biased and the inline which is horizontally biased. Flexbox was created for small-scale layouts and there’s another standard called grids which are geared more towards larger-scale layouts, It works similar to the way to Twitter bootstrap grid system works. Flexbox is responsive and mobile-friendly. To start with flexbox firstly create a flex container. To create a flex container set the display property to flex.

Flex Properties:

• flex-direction
• flex-wrap
• flex-flow
• justify-content
• align-items
• align-content

It is a CSS property that offers a grid-based layout system, with rows and columns, making it easier to design web pages without floats and positioning.

1. Dimensionality and Flexibility:
• Flexbox offers greater control over alignment and space distribution between items. Being one-dimensional, Flexbox only deals with either columns or rows.
• The grid has two-dimension layout capabilities which allow flexible widths as a unit of length. This compensates for the limitations in Flex.
2. Alignment:
• Flex Direction allows developers to align elements vertically or horizontally, which is used when developers create and reverse rows or columns.
• CSS Grid deploys fractional measure units for grid fluidity and auto-keyword functionality to automatically adjust columns or rows.
3. Item Management:
• Flex Container is the parent element while Flex Item represents the children. The Flex Container can ensure balanced representation by adjusting item dimensions. This allows developers to design for fluctuating screen sizes.
• Grid supports both implicit and explicit content placement. Its inbuilt automation allows it to automatically extend line items and copy values into the new creation from the preceding item.

The External Style Sheet (using HTML Tag) is the best method that is used to link the element. Maintaining and re-using the CSS file across different pages is easy and efficient. The tag is placed in the HTML element. To specify a media type=”text/css” for a Cascading Style Sheet attribute which is used to ignore style sheet types that are not supported in a browser.

@import rule: The @import rule is used to import one style sheet into another style sheet. This rule also supports media queries so that the user can import the media-dependent style sheet. The @import rule must be declared at the top of the document after any @charset declaration.

Characteristics of @import:

• The @import at-rule is used to import a style sheet into an HTML page or another style sheet.
• The @import at-rule is also used to add media queries, therefore import is media-dependent.
• It is always to be declared at the top of the document.

All CSS style sheets are case-insensitive, except for portions that are not under the control of CSS. For example, the case sensitivity due to values of the HTML attributes “id” and “class”, font names, and URIs lies outside the scope of this specification.

CSS allows the animation of HTML elements without using JavaScript. An animation lets an element systematically and with proper timing, change from one style to another. You can change whatever CSS properties you want, and end a number of times, as you want it. To use CSS animation, you must first specify some @keyframes for the animation. @keyframes will describe which styles that element will have at specific times. We will be using a basic example such as the animation of a battery charging.

The @keyframes property has the option to divide the animation time into parts/percentage and perform an activity that is specified for that part of the whole duration of the animation. The @keyframes property is given to each animation according to the name of that animation. It allows you to run the animation infinitely as well.

CSS allows the animation of HTML elements without using JavaScript. An animation lets an element systematically and with proper timing, change from one style to another. You can change whatever CSS properties you want, and end a number of times, as you want it. To use CSS animation, you must first specify some @keyframes for the animation. @keyframes will describe which styles that element will have at specific times. We will be using a basic example such as the animation of a battery charging.

The @keyframes property has the option to divide the animation time into parts/percentage and perform an activity that is specified for that part of the whole duration of the animation. The @keyframes property is given to each animation according to the name of that animation. It allows you to run the animation infinitely as well.

Keyframes are the foundations with the help of which CSS Animations works. They define the display of the animation at the respective stages of its whole duration. For example: In the following code, the paragraph changes its color with time. At 0% completion, it is red, at 50% completion it is of orange color and at full completion i.e. at 100%, it is brown.

Example:

Counters in CSS are basically variables that can be used for numbering and values of CSS counters may be incremented by CSS rules. For example, CSS counters can be used to increment the numbering of the headings automatically. In HTML, the tag is used to give the ordered numbers to list items but CSS contains a counter to give order elements in some other fashion.

CSS counters properties: CSS counters contains the following properties:

• counter-reset: It is used to reset a counter.
• counter-increment: It basically increments a counter value.
• content: It is used to generate content.
• counter() or counters() function: The value of a counter can be displayed using either the counter() or counters() function in a content property. These two functions basically used to add the value of a counter to the element.

Pagination is the process of dividing the document into pages and providing them with numbers.

Types of Pagination:There are many types of pagination in CSS. Some of them are given below:

1. Simple Pagination
2. Active and Hoverable Pagination
3. Rounded Active and Hoverable Buttons
4. Hoverable Transition Effect
5. Bordered Pagination
6. Rounded Border Pagination
7. Centered Pagination
8. Space between Pagination
9. Pagination size

The box-reflect property is used to create an image reflection.

Attributes:

• below:to create a reflection below the original image
• above:to create a reflection above the original image
• left:to create a reflection on the left side of the original image
• right:to create a reflection on the right side of the original image

The multiple columns are used to create column layouts on the web pages. There are many column properties in CSS which are listed below:

• column-count
• column-gap
• column-rule-style
• column-rule-width
• column-rule-color
• column-rule
• column-span
• column-width

Example:

---

---

The approach of this article is to add a shadow using the text-shadow property in CSS. This property accepts a list of a comma-separated list of shadows to be applied to the text. The default value of the text-shadow property is “none”.

The !important property in CSS is used to provide more weight (importance) than normal property. In CSS, the !important means that “this is important”, ignore all the subsequent rules, and apply !important rule and the !important keyword must be placed at the end of the line, immediately before the semicolon.

• In other words, it adds importance to all the sub-properties that the shorthand property represents.
• In normal use, a rule defined in an external style sheet which is overruled by a style defined in the head of the document, which in turn, is overruled by an inline style within the element itself (assuming equal specificity of the selectors).
• Defining a rule with the !important attribute that discards the normal concerns as regards the later rule overriding the earlier ones.
• So, it is used for overriding the styles that are previously declared in other style sources, in order to achieve a certain design.

The main difference between CSS3 and CSS2 is that CSS divides different sections into modules and supports many browsers. It also contains new General Sibling Combinators responsible for matching similar elements.

The different media types allowed by CSS are:

• speech
• audio
• visual
• tactile media
• continuous or paged media
• grip media or bitmap
• interactive media

VH and VW are CSS units used to measure viewport height and viewport width respectively in percentage form in the responsive design techniques. E.g. If the height of the browser is 1000px, then VH is 1/100 of the height of the viewport that is 1000px*(1/100) = 10px, which is the height of the browser. The same applies to VW (viewport width).