The !important rule provides a way to make your CSS cascade. It also includes the rules that are to be applied always. A rule having a !important property will always be applied, no matter where that rule appears in the CSS document.For example, in the following style sheet, the paragraph text will be black, even though the first style property applied is red −     If you want to make sure that a property always applied, you would add the !important property to the tag. Therefore, to make the paragraph text always red, you should write it as follows ... Read More

To implement Fade Out Left Animation Effect on an image with CSS, you can try to run the following code −ExampleLive Demo                    .animated {             background-image: url(/css/images/logo.png);             background-repeat: no-repeat;             background-position: left top;             padding-top:95px;             margin-bottom:60px;             -webkit-animation-duration: 10s;             animation-duration: 10s;             -webkit-animation-fill-mode: both;             animation-fill-mode: both;          }          @-webkit-keyframes fadeOutLeft {             0% {                opacity: 1;                -webkit-transform: translateX(0);             }             100% {                opacity: 0;                -webkit-transform: translateX(-20px);             }          }          @keyframes fadeOutLeft {             0% {                opacity: 1;                transform: translateX(0);             }             100% {                opacity: 0;                transform: translateX(-20px);             }          }          .fadeOutLeft {             -webkit-animation-name: fadeOutLeft;             animation-name: fadeOutLeft;          }                           Reload page                function myFunction() {             location.reload();          }          

Use the :before element to insert some content before any element. ExampleYou can try to run the following code to insert some content before an element with CSS −Live Demo                    p:before {             content: url(/images/bullet.gif)          }                     This line will be preceded by a bullet.       This line will be preceded by a bullet.       This line will be preceded by a bullet.    

Use the :first-letter element to add special effects to the first letter of elements in the document. You can try to run the following code to add special styles to the first letter of text −ExampleLive Demo                    p:first-letter {             font-size: 5em;          }          p.normal:first-letter {             font-size: 10px;          }                     First character of this paragraph will be ... Read More

Use this element to add special styles to the first line of the text in a selector. The following example demonstrates how to use the :first-line element to add special effects to the first line of elements in the document.ExampleLive Demo                    p:first-line {             text-decoration: underline;          }          p.noline:first-line {             text-decoration: none;          }                     This line would ... Read More

Use the :focus class to change the color of focused links. Possible values could be any color name in any valid format.ExampleYou can try to run the following code to implement the color of the focused link −                    a:focus {             color: #0000FF          }                     This is demo link    

Use the :active class to change the color of active links. Possible values could be any color name in any valid format. ExampleYou can try to run the following code to implement the color of an active link −                    a:active {             color: #FF00CC          }                     My Link    

The outline-width property is used to set the width of the outline. Its value should be a length or one of the values thin, medium, or thick, just like the border-width attribute.Example                            This text is having thin outline.                            This text is having thick outline.                            This text is having 5x outline.          

Use the :lang pseudo class to specify a language to use in a specified element. This class is useful in documents that must appeal to multiple languages that have different conventions for certain language constructs.ExampleYou can try to run the following code to understand the usage of :lang pseudo class                    /* Two levels of quotes for two languages*/          :lang(en) { quotes: '"' '"' "'" "'"; }          :lang(fr) { quotes: "" ""; }                     ...A quote in a paragraph...    

Use the :first-child pseudo class to add special style to an element that is the first child of some other element.ExampleYou can try to run the following code to understand the usage of :first-child pseudo class −                    div > p:first-child          {             text-indent: 25px;          }                              First paragraph in div. This paragraph will be indented          Second paragraph in div. This paragraph will not be indented                But it will not match the paragraph in this HTML:                Heading          The first paragraph inside the div. This paragraph will not be effected.