We can add specific styles to existing elements in HTML using CSS Pseudo classes which select an element with a specific state such as (hover, visited, disabled, etc.) NOTE − To separate CSS Pseudo Classes from Pseudo Elements, in CSS3, pseudo classes use single-colon notation. Syntax The following is the syntax for using CSS Pseudo classes on an element − Selector:pseudo-class { css-property: /*value*/; } The following are all the available CSS Pseudo Classes − Sr.No Pseudo-Class & Description 1 activeIt selects the active mentioned element 2 checkedIt ... Read More

One of the many problems that developers face while using CSS float property is that if all child elements are floated then the parent container will collapse. To avoid parent container collapsing we can use one of the following solutions. Problem Parent containers are collapsed as all content is floated inside them. Only the padding of container is seen due to CSS background-color property. Example FThellowing is the problem code which need rectification − Avoid Parent Container Collapse body{ ... Read More

We can align elements in HTML using the CSS float property that is used for positioning or formatting a box or content. You can position element towards left or right with CSS float. The float property can have any of the following values − left − element float to the left right − element floats to the right none − element won’t float Float right and left Let’s see an example of CSS float property to align elements. Here, we have floated a container left using the float property with the value left and right using the value ... Read More

We can align elements using the CSS positioning schema methods (fixed, relative, absolute and static) and properties (left, right, top and bottom). To align elements in CSS, use the position property. The position can be set using the following values − static relative fixed absolute sticky For example, the following is achieved by aligning divs on a web page using the position property − Align Elements With Absolute and Relative Positions Example Let’s see an example to align elements using the positioning schema. We have shown the absolute and relative positions here − ... Read More

CSS Pseudo Classes are representation of special states of different elements, these classes not only depict basic elements in document but also their external factors such status, position, history, etc. Using these pseudo classes developer can even style elements which cannot be directly selected via CSS selectors. Pseudo-classes The following are some key Pseudo-classes − :active = To select the active link :checked = To select every checked element :first-child = To select the first child of an element’s parent :first-of-type = To select the first element of its parent :focus = To select the element that has ... Read More

We can center horizontally a block-level element by using the CSS margin property, but CSS width property of that element should be set. The auto value is set for the margin property. Let’s see some examples to center an element using the CSS margin property − Create a Symbol and Align to the Center In this example, we have created a symbol with CSS. The alignment is done to the center using the margin property with value auto − div { width: 50%; margin: 10px auto; border:4px solid black; } ... Read More

Visual Formatting in CSS is based on the Box Model. The CSS Visual Formatting is a model corresponding to an algorithm which processes and transforms each element of the document to generate one or more boxes that conform to the CSS Box Model. The layout of generated boxes depends on several properties such as − Dimensions Type − atomic inline-level, block, inline, or inline-block Positioning − absolute, float, or normal Relation with child and neighbour elements of document External Information − viewport’s and image’s width - height, etc. CSS Box Generation of processed elements − Block ... Read More

The CSS :last-child pseudo-class selects an element that is the last child element of some other element. As the name suggests, it will select the last child of its parent. Let us see some examples to implement the :last-child pseudo class. Syntax The following is the syntax for the :last-child class − :last-child{ /*declarations*/ } Style a table with the :last-child pseudo class Let’s see an example of the CSS last-child Pseudo class. In this example, we have set a table − Demo ... Read More

CSS Media Types are the device types on which the document is rendered and specific styles can be defined for every media type. The following are the Media Types in CSS3 and Media Queries − Sr.No Value & Description 1 allStylesheet applies to all media type devices 2 printStylesheet applies to printers 3 screenStylesheet applies to computer screens, tablets, smart-phones etc. 4 speechStylesheet applies to screen readers that "reads" the page out loud NOTE − Several media types (such as aural, braille, embossed, handheld, projection, ttv and tv) ... Read More

The first-line Pseudo Element selects the first line of the content of an element or a container. It is denoted by double colon i.e. − ::first-line Let’s see some examples of CSS ::first-line pseudo element − Style the first line In this example, we will style the first line using the pseudo element − p::first-line { background-color: lightgreen; color: white; } Example Let us see the example − ... Read More