Using CSS Z-Index property developer can stack elements onto one another. Z-Index can have a positive or a negative value. NOTE − If elements that overlap do not have z-index specified then that element will show up that is mentioned last in document. The following are some examples to implement the z-index property. z-index In this example, we have set a positive z-index value to stack − Example .dropbtn { background-color: rgb(76, 78, 175); ... Read More

Using CSS pseudo-class selectors, namely, :active, :hover, :link and :visited we can style different states of a link/anchor. For proper functionality, the order of these selectors should be −:link:visited:hover:activeThe syntax of CSS psudo-class property is as follows −a:(pseudo-selector) {    /*declarations*/ }ExampleLet’s see an example to use CSS Anchor Pseudo Classes − Live Demo div {    display: flex;    float: left; } a {    margin: 20px;    padding: 10px;    border: 2px solid black;    text-shadow: -1px 0px black, 0px -1px black, 0px 1px black, 1px 0px black;    font-size: 1.1em; } a:link {    text-decoration: ... Read More

Using CSS selectors, we can specifically style desired elements based on our preference. There are various methods for selecting elements in the HTML DOM. The CSS Selectors include − Class selector Id selector Grouping Selectors Syntax The syntax for CSS selectors is as follows − Selector { /*declarations*/ } CSS class selector The class attribute is used to set the class selector. This will select a specific element. You need to write the . i.e., the period character and follow it by the class attribute to select the element with a specific ... Read More

The CSS :lang() pseudo-class selector is used to select the elements with lang attribute specified. This helps us target a specific language associated with the content and style them accordingly. We can set multiple languages using this selector. A two-letter language code is to be set i.e., the following for Italian − Bella ciao The following for English − Nice hello The following for Spanish − Bueno adios Syntax The following is the syntax to implement the :lang pseudo class − :lang(){ /*declarations*/ } Set the lang attribute The ... Read More

CSS selectors are used to selecting HTML elements by matching each element of a given pattern. We define the styles by declaring property and their value inside the selector. Syntax The syntax for declaring styles is as follows − Selector { property: value; } For example − div { height: 200px; } Above, the selector is div. The property is the height and the value 200px. Selectors CSS has simple selectors, attribute selectors, pseudo-classes, pseudo-elements and a combination of selectors through standard combinators. Here are the selectors − ... Read More

CSS Units come in a variety of categories such as font-sizes, character-sizes, viewport dimensions, etc. Broadly there are two categories of absolute and relative units which consist of above mentioned sub categories.Following are the CSS absolute units −Sr.NoUnit & Name1cmCentimeters (1 cm = 100 mm)2inInches (1 in = 2.54 cm)3mmMillimeters4pcPicas (1 pc = 12 pt)5ptPoints (1 pt = 1/72 in)6pxPixels (1 px = 0.75 pt)Let us see an example of CSS absolute units −Example Live Demo CSS Absolute Units form {    width:70%;    margin: 0 auto;    text-align: center; } * {    padding: 2px;    margin:5px; ... Read More

We can define a fixed max-width for an element’s content box using the CSS max-width property which does not allows the element’s content box to be wider even if width is greater than max-width. Syntax The syntax of CSS max-width property is as follows − Selector { max-width: /*value*/ } The value can be − length − Set the max width in px, cm, em, etc. % − Set the max width in % Example Let’s see an example for CSS max-width property. Here, on the click of a button the maximum width is set. First, set the container. Within that, set a div for the ... Read More

Import additional CSS files inside another CSS declaration. The @import rule is used for this purpose as it links a stylesheet in a document. This is generally used when one stylesheet is dependent upon another. It is specified at the top of the document after @charset declaration inside . With that, the element can also be used. Syntax The syntax of @import rule is as follows − @import /*url or list-of-media-queries*/ The media queries can be compound statements which may specify the behaviour of the document in different media. Import external stylesheets with @import rule The following ... Read More

Using CSS pseudo selectors, namely, :active, :hover, :link and :visited, we can style different states of a link. For proper functionality, the order of these selectors is given by:- :link, :visited, :hover, :active. Syntax The syntax of CSS text-indent property is as follows − a:(pseudo-selector) { /*declarations*/ } The following are some key Pseudo-classes for links − :active = To select the active link :hover = To select links on mouse over :hover = To select links on mouse over :valid = To select elements with a valid value :visited = To select ... Read More

We can align the text in html documents using CSS text-align property for horizontal alignment and CSS padding-top with CSS padding-bottom, or CSS line-height for vertical alignment. The writing-mode can also be used for this property. Syntax The following is the syntax for above mentioned CSS properties − Selector { text-align: center | left | right | justify | inherit | initial; } Selector { padding: /*value*/; } Selector { line-height: /*value*/; } Align text horizontal Let’s see an example to align text horizontally − Example ... Read More