Outline doesn’t take up space and is displayed around the border if set. It is used for highlighting elements and we can’t specify whether individual sides should have an outline or not. Like borders, outline is not displayed by default. In some browsers, say Firefox, focused elements are displayed with a thin outline. Borders can be customized to a greater extent. We style individual sides of a border and round their edges. Borders take up space and affect the box-sizing. Outlines The outline is drawn outside the borders. It is a line drawn around elements. The following are the properties. ... Read More

We can style links as per our requirements. It is recommended that links have styles which distinguish them from normal text. The default link styles for different link states is as follows − Link State Color active #EE0000 focus #5E9ED6 or a similar shade of blue outline in case of Windows and Mac, #F07746 outline for Linux while text color remains the same hover #0000EE link #0000EE visited #551A8B Note − The above colors may change with newer versions of browsers. For proper functionality, the ... Read More

The CSS text-transform property allows us to set text capitalization for an element. It can accept the following values: capitalize, lowercase, uppercase, full-width, full-size-kana and none.SyntaxThe syntax of CSS text-transform property is as follows −Selector {    text-transform: /*value*/ }ExampleThe following examples illustrate CSS text-transform property − Live Demo h2 {    text-transform: uppercase; } .demo {    text-transform: lowercase; } q {    text-transform: capitalize;    font-style: italic; } WordPress WordPress is open source software you can use to create a beautiful website, blog, or app. 34% of the web uses WordPress, from hobby ... Read More

The CSS text-decoration property is used to apply decoration to selected element’s text. We can add a line-through, overline, underline, etc. as values. It is a shorthand for text-decoration-line, text-decoration-color and text-decoration-style.SyntaxThe syntax of text-decoration property is as follows −Selector {    text-decoration: /*value*/ }ExampleThe following examples illustrate CSS text-decoration property − Live Demo p:nth-child(2)::before {    content: " We will reach the destination ";    background-color: lightgreen;    text-decoration: overline blue;    font-size: 1.2em; } I'm not the only traveller before night. OutputThis gives the following output −Example Live Demo ... Read More

Using CSS text-align property we can horizontally set the text of an element. We can set it to left, right, justify or center.SyntaxThe syntax of CSS text-align property is as follows −Selector {    text-align: /*value*/ }ExampleThe following exmples illustrate CSS text-align property − Live Demo div {    margin: auto;    padding: 8px;    max-width: 200px;    border: thin solid; } p {    text-align: right; } div:nth-child(3) {    text-align: center; } div:last-child {    text-align: justify; } Student Examination Details Student John Student Tom Did not appeared for the exams. ... Read More

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