Adding CSS to an HTML document enhances the appearance of the web page. Various styles for the images, borders, margins, colors, can be easily added. To include CSS in HTML documents, we can either include them internally, inline or link an external file. Let us understand them with examples. Syntax The syntax for including CSS files in HTML is as follows − /*inline*/ /*internal*/ /*declarations*/ /*external*/ The following examples shows the linking of CSS file ... Read More

A CSS Pseudo-element is basically a selector for specific parts of an element such as first-letter, first-line, etc. the :after and :before pseudo elements can be used to insert after and before an element respectively. Syntax Following is the syntax for using CSS Pseudo elements on an element − Selector::pseudo-element { css-property: /*value*/; } The ::before pseudo element Let’s see an example of CSS Pseudo Elements. Here, we have used the ::before. If you want to insert a content before an element, then use the ::before pseudo-element − ol > li::before { ... Read More

The CSS :nth-child() pseudo-class selects an element that is the nth child element of some other element. It matches elements that are the nth child of its parent. Syntax The following is the syntax for the :nth-child pseudo class − :nth-child(){ /*declarations*/ } Select the nth child in a form Let’s see an example for the CSS :nth-child() Pseudo class. First, set a form using the − CSS :nth-child() Pseudo Class ... Read More

Media dependent stylesheets are basic stylesheets only but apply to html document only when mediatype matches device type on which document is visible.We can create media dependent stylesheets by following methods −Using @media At-rulesUsing @import At-rulesUsing HTML element with media attributeExampleLet’s see an example for creating media dependent stylesheets −HTML Document Live Demo CSS document (screen.css)div { height: 50px; width: 100px; border-radius: 20%; border: 2px solid blueviolet; box-shadow: 22px 12px 3px 3px lightblue; position: absolute; left: 30%; top: 20px; }CSS document (print.css)div {    height: 50px;    width: 100px;    border-radius: 20%; ... Read More

Using CSS Z-Index property, a user can stack elements onto one another. Z-Index can have a positive or a negative value. The stack order of an element is set using the z-index property. NOTE − If elements that overlap do not have z-index specified then that element will show up that is mentioned last in document. Syntax The following is the syntax of the z-index property − Selector { z-index: /*value*/ } The value can be the following − auto − The stack order is et equal to the parents number − Set the ... Read More

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