Front End Technology Articles - Page 641 of 860

To set a style to current link in a navigation bar, add style to .active. You can try to run the following code to style current link:ExampleLive Demo                    ul {             list-style-type: none;             margin: 5;             padding: 5;          }          li a {             display: block;             width: 70px;             background-color: #F0E7E7;          }          .active {             background-color: #4CAF50;             color: white;          }                              Home          Company          Product          Services          Contact          

To create a transparent box with CSS, you can try to run the following codeExampleLive Demo                    div {             background-color: #808000;             padding: 20px;          }          div.myopacity {             opacity: 0.4;             filter: alpha(opacity=80);          }                     Heading       Check trensparency in the below box:                opacity 0.4                      opacity 1          

To set the opacity for the background color, use the opacity property with RGBA color values.ExampleYou can try to run the following code to implement the opacity property:Live Demo                    div {             background: rgb(40, 135, 70);             padding: 20px;          }          div.first {             background: rgba(40, 135, 70, 0.2);          }          div.second {             background: rgba(40, 135, 70, 0.6);          }                     RGBA color values       20% opacity       60% opacity       Default Opacity    

To style all visited links, use the CSS :visited selector.ExampleYou can try to run the following code to implement the :visited selectorLive Demo                    a:link, a:visited {             background-color: white;             color: black;             border: 1px solid blue;             padding: 30px 30px;             text-align: center;             text-decoration: none;             display: inline-block;          }          a:hover, a:active {             background-color: red;             color: white;          }                     Demo Link    

Use the opacity property to add transparency to the background of an element. You can try to run the following code to work.ExampleLive Demo                    div {             background-color: #808000;             padding: 20px;          }          div.one {             opacity: 0.2;             filter: alpha(opacity=20);          }          div.two {             opacity: 0.5;             filter: alpha(opacity=50);          }                     Heading       Check transparency in the below section:                opacity 0.2                      opacity 0.5                      opacity 1          

Use the CSS : visited selector to style all visited links.ExampleYou can try to run the following code to implement the :visited selector:Live demo                    a:link, a:visited {             background-color: white;             color: black;             border: 1px solid blue;             padding: 30px 30px;             text-align: center;             text-decoration: none;             display: inline-block;          }          a:hover, a:active {             background-color: red;             color: white;          }                     Demo Link    

Use the CSS : valid selector to style all elements with a valid value .ExampleYou can try to run the following code to implement the :valid SelectorLive Demo                    input:valid {             background: red;             color: white;          }                     Heading             The style (red color background) appears if you type a relevant/ valid email address.    

To highlight active HTML anchor with CSS, use the :target selector.ExampleYou can try to run the following code to implement the :target Selector:Live Demo                    :target {             border: 2px solid #D4D4D4;             background-color: orange;             color: white;          }                     Click any of the subject below.       Maths       Java       C++       C       This is demo text.       This is demo text.       This is demo text.       This is demo text.       This is demo text.       Maths Tutorial       Java Tutorial       C++ Tutorial       C Tutorial    

To style every element that is not the specified element, use the CSS :not(selector) selector.ExampleYou can try to run the following code to implement the :not selector:Live Demo                    p {             color: red;          }          :not(p) {             color: blue;          }                     Heading 1       Heading 2       Heading 3       This is a paragraph.       This is another paragraph.    

Use the CSS :target selector to highlight active HTML anchor with CSS.ExampleYou can try to run the following code to implement the :target SelectorLive Demo                    :target {             border: 2px solid #D4D4D4;             background-color: orange;             color: white;          }                     Click any of the subject below.       Maths       Java       C++       C       This is demo text.       This is demo text.       This is demo text.       This is demo text.       This is demo text.       Maths Tutorial       Java Tutorial       C++ Tutorial       C Tutorial