The outline-style property can be defined to draw a line around the borders of the element, but the outline is not a part of element’s dimensions unlike border property. Syntax The syntax of CSS outline-style property is as follows − Selector { outline-style: /*value*/ } The value can be any of the following − dotted− Set a dotted border dashed− Set a dashed border solid− Set a solid border double− Set a double border groove− Set a 3D grooved border ridge− Set a 3D ridged border inset− Set a 3D inset border ... Read More

Inline-level elements have their CSS display property set to either ‘inline, ‘inline-table’, or ‘inline-block’ and these elements do not force a line break above and below themselves. Inline-level boxes are generated by each inline-level element which is a part of the positioning scheme as well as contains child boxes. Inline boxes are boxes which have their content follow inline formatting context. Inline boxes are split into a number of inline boxes whilst those inline boxes that are never split are called atomic inline-level boxes. Anonymous inline boxes are those boxes over which developer has no control. If a block box ... Read More

CSS Pseudo-elements can be applied on elements but also on CSS classes as well. First, let us see the pseudo-elements. The pseudo-elements allow styling specific parts of any elements, for example, insert content after an element, set CSS styles for the first line, etc. The following is the syntax − Syntax selector::pseudo-element { } The following are the pseudo elements − ::after − Insert something after the content of specific element ::before − Insert something before the content of a specific element ::first-letter − Selects the first letter of a specific element ::first-line − Selects the first ... Read More

The CSS ::before and CSS ::after Pseudo-element are used to insert some content before and after the element respectively. The ::after pseudo element If you want to insert a content after an element, then use the ::after pseudo-element. The content to be placed after is set using the content attribute − p::after { content: " is Virat Kohli"; background-color: red; font-weight: bold; } Example Let us see the example − p { ... Read More

Block-level elements have their CSS display property set to either ‘block’, ‘list-item’, or ‘table’ and these elements force a line break above and below themselves. Block-level boxes are generated by each block-level element which is a part of the positioning scheme as well as contains child boxes. Block container boxes contain either block-level boxes and follow block formatting context or contain inline-level boxes and follow inline formatting context. Block boxes is a term used if block-level boxes are also block containers. Anonymous block boxes are those boxes over which developer has no control. If an inline box contains a block ... Read More

One or more boxes are generated for every element in a document tree after processing it under visual formatting model. A generated box has certain CSS properties associated with it and is accordingly rendered in HTML. To display elements, the following are the two common values − block − Starts on a new line. Takes the full available width Inline − Does not start on a new line. Tales only the required width The following boxes are generated in CSS − Block-level Elements and Block Boxes Anonymous block boxes Inline-level Elements and Inline Boxes Anonymous inline boxes ... Read More

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