CSS allows us to style links as desired. We can format text, by adding colors, background, increase size, etc. Furthermore, animations can be added to create a pleasant visual effect.For proper functionality, the order of pseudo selectors is given by:- :link, :visited, :hover, :active.ExampleThe following examples illustrate styling of links with CSS − Live Demo p {    margin: 25px; } #mod {    padding: 10px;    color: darkturquoise;    border: thin solid;    background-color: lemonchiffon; } #mod:hover {    color: white;    box-shadow: 0 0 0 1px black;    background-color: slateblue; } Demo ... Read More

The CSS word-spacing property is used to specify the space between words of an element.SyntaxThe syntax of CSS word-spacing property is as follows −Selector {    word-spacing: /*value*/ }ExampleThe following examples illustrate CSS word-spacing property − Live Demo div {    display: flex;    float: left;    padding: 10px;    background-color: salmon; } div > div {    word-spacing: 30px;    width: 340px;    height: 140px;    border-radius: 5%;    box-shadow: inset 0 0 15px blueviolet; } Magento is an open source E-commerce software, created by Varien Inc., which is useful for ... Read More

The CSS adjacent sibling selector is used to select the adjacent sibling of an element. It is used to select only those elements which immediately follow the first selector. The + sign is used as a separator. For example, the direct next element is selected here with the adjacent sibling selector concept − Syntax The syntax for CSS adjacent sibling selector is as follows − element + element { /*declarations*/ } Adjacent Sibling Selector Example Example The following example illustrate CSS adjacent sibling selector − ... Read More

We can use a combination of percentage and em to specify the font-size of elements for better compatibility of font. This allows us to have uniform text across different browsers. Both percentage and em are relative measurements. Syntax The syntax of CSS font-size property is as follows. The below works for both the percentage and em units in place of value. Also, other length units can also be set − Selector { font-size: /*value*/ } Example The following example illustrate how CSS font-size property can be set. First, we have set the font using ... Read More

The CSS element type selector is used to select all elements of a type. The syntax for CSS element type selector is as follows − Syntax The following is the syntax − element { /*declarations*/ } Element Type Selector for all elements In this example, we have set the same style i.e., list-style none for all the elements. The following examples illustrate CSS element type selector − li { list-style: none; margin: 5px; border-bottom-style: dotted; } Example Let us see the example ... Read More

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

Overlapping elements with z-index using CSS, we will be understanding about two different ways to handle overlapping which are by using positive and negative z-index value. CSS z-index property allows user to stack elements onto one another. In this article, we are haveing three div boxes each with different colors, our task is to perform overlapping elements with z-index using CSS. Methods for Overlapping Elements with z-index We will be using folowing two methods which are mentioned below for overlapping elements with z-index using CSS: Overlapping with Positive z-index Value ... Read More