The CSS :first-child pseudo-class selects an element that is the first child element of some other element. Syntax The following is the syntax of the :first-child pseudo class − :first-child{ /*declarations*/ } Example Let’s see an example of CSS first-child Pseudo class. We have set no left border for the first element of the and − td:first-child, th:first-child { border-left: none; } Here is the example − table { ... Read More

We can define positioning of an element in CSS as absolute which renders the element relative to the first positioned (except static) parent. Elements with positioning method as absolute are positioned by CSS Positioning properties (left, right, top and bottom). The position property has the following values − static relative fixed absolute sticky Here is how we position an element with absolute positioning, relative to the first positioned parent − We need to set absolute positioning. For that, use the position property − position: absolute;  Positioned Elements as Absolute Example In this example, we have ... Read More

We can align an element or the content inside it by using CSS which provides various options for alignment of an element and its content horizontally, vertically or in center.Horizontal AlignmentInline-elementsInline elements or inline-block elements such as text, anchor, span, etc. can be aligned horizontally with the help of CSS text-align property.Block-level elementsBlock-level elements such as div, p, etc. can be aligned horizontally with the help of CSS margin property, but width of element should not be 100% relative to the parent as then it wouldn’t need alignment.Block-level elements using float or position schemeElements can be aligned horizontally with the ... Read More

We can use CSS clear property to specify the side of the floated element which is to be cleared of flowing content. If you want to control the element next to a floating element, then use the clear property. Syntax The following is the syntax of the float property − clear: value; The value can be − none − The element is not set below left or right floated elements. Default. left − The element is set below left floated elements right − The element is set below right floated elements both − The element is set ... Read More

We can define a fixed min-height for an element’s content box using CSS min-height property which does not allows the element’s content box to be smaller even if height is lesser than min-height. Syntax The syntax of CSS min-height property is as follows − Selector { min-height: /*value*/ } The value can be − length − Set the min height in px, cm, em, etc. % − Set the min height in % Example In this example, we have set the minimum height for the element − p.demo { min-height: 120px; background-color: green; } Let us see the example − ... Read More

We can define a fixed min-width for an element’s content box using CSS min-width property which does not allow the element’s content box to be narrower even if width is lesser than min-width. Syntax The syntax of CSS min-width property is as follows − Selector { min-width: /*value*/ } The value can be − length − Set the min width in px, cm, em, etc. % − Set the min width in % Minimum width for the text Let’s see an example for the CSS min-width property. We have set the minimum width to one of the elements − span.demo { min-width: 200px; ... Read More

The outline-width property can be defined to draw a line of specific thickness around the borders of the element, but the outline is not a part of an element’s dimensions, unlike border property. Syntax The syntax of CSS outline-width property is as follows − Selector { outline-width: /*value*/ } The value can be thin, thick, medium or a length unit. NOTE − The outline-style property needs to be defined before declaring outline-width. Set a thin outline Let’s see an example for the outline-width property. We have set a thick outline here using the thin value ... Read More

The CSS background-image property is used to set an image as a background for the selected element. The url() is used in the background-image to set the image source. Syntax The syntax of CSS background-image property is as follows − Selector { background-image: /*value*/ } The following can be the values − url('URL') − The image url i.e., the source conic-gradient() − Place a conic gradient as the background image. linear-gradient() − Place a linear gradient as the background image. radial-gradient() − Place a radial gradient as the background image. repeating-conic-gradient() − Repeat a ... Read More

CSS Pseudo-classes can be combined with CSS classes rather than elements themselves to provide a more selective approach to an HTML element. Let us see some quick snippets to understand. Our css class is .dropbtn and pseudo-class is :focus .dropbtn:focus { background-color: #4f3e8e; } Our css class is .card-container and pseudo-class is :hover − .card-container:hover .overlay { bottom: 0; height: 100%; } Pseudo-classes The following are some key Pseudo-classes − :active = To select the active link :checked = To select every checked element :first-child ... Read More

CSS files can be embedded internally by declaring them in tag. This decreases the load time of the webpage. Although embedded CSS declarations allow dynamic styles, it should be downloaded at every page request as internal CSS can’t be cached. Internal CSS are declared in tag inside tag. Syntax The syntax for embedding CSS files is as follows − /*declarations*/ The following examples illustrate how CSS files are embedded − Internal Style Sheet for Styling a div We have used the to set the internal style sheet and styled our ... Read More