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

We can define a fixed max-height for an element’s content box using CSS max-height property which does not allows the element’s content box to be taller even if height is greater than max-height. Remember to set the overflow property if the content is larger than the maximum height. Syntax The syntax of CSS max-height property is as follows − p.demo { margin: 35px 70px 50px; } The value can be − length − Set the max height in px, cm, em, etc. % − Set the max height in % Set maximum height for the child container Let’s see an example for the CSS max-height property. ... Read More

We can define the height and width exclusively for the element’s content, though these properties do not include margins, paddings or borders. Syntax The syntax of CSS height property is as follows − Selector { height: /*value*/ } The syntax of CSS width property is as follows − Selector { width: /*value*/ } Example Let us see an example of width and height properties − CSS height and width * { ... Read More

The height of a line can be defined by the CSS line-height property. It accepts only positive values.SyntaxThe syntax of CSS line-height property is as follows −Selector {    line-height: /*value*/ }ExampleThe following examples illustrate the CSS line-height property. Live Demo div * {    margin: 1.5em;    box-shadow: -13px -10px 10px 1px crimson; } #demo {    line-height: 60%; } p {    box-shadow: 13px -10px 10px 1px grey;    line-height: 50px; } Demo Heading This is demo text one. This is demo text two. This is demo text three. OutputThis ... Read More