Category: Basic

Adjacent Sibling Selectors

Adjacent Sibling Selectors in CSS

CSS adjacent sibling selector or next sibling selector selects an element that is immediately after another element. It is used to select only those elements which immediately follow the first selector. Both elements should share the same parent.

Syntax

The syntax for CSS adjacent sibling selectors is as follows:

selector1 + selector2{/* property: value; */color: #04af2f
}

Example of Adjacent Sibling Selectors

In this example, the style is applied only to the p element which is just after the div element. The other p elements remain unaffected.

<!DOCTYPE html><html lang="en"><head><style>
  div{
     border: 2px solid #031926;
  }
  div + p {
     color: #04af2f;
  }   </style></head><body><p>
     This paragraph is above the div 
     and will not be green.
  &lt;/p&gt;&lt;div&gt;&lt;p&gt;
        This paragraph is inside a div 
        and will not be green..
     &lt;/p&gt;&lt;/div&gt;&lt;p&gt;
     This paragraph 1 after the div 
     and will be green..
  &lt;/p&gt;&lt;p&gt;This paragraph 2 after the 
     div and will not be green..
  &lt;/p&gt;&lt;/body&gt;&lt;/html&gt;</pre>


Example 2



In this example, we have used an adjacent sibling selector to design the p element just after the h3 tag having the same parent element i.e. div container.



<!DOCTYPE html><html><head><style>
    .container {
        padding: 20px;
        border: 2px solid #031926;
        font-family: Verdana, sans-serif;
    }
    h3 + p {
        font-family: Verdana, sans-serif;
        font-size: 20px;
        font-style: italic;
        background-color: #04af2f;
        color: white;
    }
&lt;/style&gt;&lt;/head&gt;&lt;body&gt;&lt;div class="container"&gt;&lt;h3&gt;This is an h3 tag&lt;/h3&gt;&lt;p&gt; 
        This is a p tag that immediately follows the h3 tag.
    &lt;/p&gt;&lt;p&gt;
        This is another p tag, but it does not immediately 
        after the h3 tag.
    &lt;/p&gt;&lt;/div&gt;&lt;p&gt;This is a p tag which is outside the parent div element.&lt;/p&gt;&lt;/body&gt;&lt;/html&gt;</pre>

August 20, 2025

General Sibling Selectors

General Sibling Selectors in CSS

CSS general sibling selector ( “~” ) selects all the elements that are siblings of a specified element sharing the same parent. It will select all matching siblings, not just the one immediately following. A tilde ( “~” ) symbol is used to denote the general sibling.

Syntax

The syntax for CSS general sibling selectors is as follows:

selector1 ~ selector2{/* property: value; */color: #04af2f
}

Example of General Sibling Selectors

In this example, we have used general sibling selector to change the text color of all p elements that are immediate siblings of the div element.

<!DOCTYPE html><html lang="en"><head><style>
  div{
     border: 2px solid #031926;
  }
  div ~ p {
     color: #04af2f;
  }   </style></head><body><p>
     This paragraph is above the div 
     and will not be blue
  &lt;/p&gt;&lt;div&gt;&lt;p&gt;
        This paragraph is inside a div 
        and will not be blue.
     &lt;/p&gt;&lt;/div&gt;&lt;p&gt;
     This paragraph 1 after the div 
     and will be blue.
  &lt;/p&gt;&lt;p&gt;This paragraph 2 after the 
     div and will be blue.
  &lt;/p&gt;&lt;/body&gt;&lt;/html&gt;</pre>


Example 2



In this example, we have used a general sibling selector to change the background color and font of all the p elements after the h3 tag.



<!DOCTYPE html><html><head><style>
    .container {
        padding: 20px;
        border: 2px solid #031926;
        font-family: Verdana, sans-serif;
    }
    h3 ~ p {
        font-family: Verdana, sans-serif;
        font-size: 20px;
        font-style: italic;
        background-color: #04af2f;
        color: white;
    }
&lt;/style&gt;&lt;/head&gt;&lt;body&gt;&lt;div class="container"&gt;&lt;h3&gt;This is an h3 tag&lt;/h3&gt;&lt;p&gt; 
        This is a p tag that immediately follows the h3 tag.
    &lt;/p&gt;&lt;p&gt;
        This is another p tag, but it is not immediately 
        after the h3 tag.
    &lt;/p&gt;&lt;/div&gt;&lt;p&gt;This is a p tag which is outside the parent div element.&lt;/p&gt;&lt;/body&gt;&lt;/html&gt;</pre>

August 20, 2025

Descendant Selectors

Descendant Selectors in CSS

CSS descendant selector styles all the tags that are children of a particular specified tag. A single space between the parent element and child element is used to mention a descendant.

Syntax

The syntax for CSS descendant selectors is as follows:

selector_1 selector_2{/* property: value; */color: #04af2f
}

Descendant Selectors Example

In this example, we have set a border for all the p elements inside a div element. The p elements outside the div element will not have any styles applied to them.

<!DOCTYPE html><html lang="en"><head><title>Document</title><style>
    div p {
        border: 2px solid #04af2f;
    }
&lt;/style&gt;&lt;/head&gt;&lt;body&gt;&lt;div&gt;&lt;p&gt;This is a p element inside a div.&lt;/p&gt;&lt;p&gt;This is second p element inside a div&lt;/p&gt;&lt;/div&gt;&lt;p&gt;This is a p element outside the div element.&lt;/p&gt;&lt;/body&gt;&lt;/html&gt;</pre>


Example 2



In this example, we have used CSS transition property with rotate() function of CSS transform property to rotate the written text of the div element with the class name container.



<!DOCTYPE html><html lang="en"><head><title>Document</title><style>
    .container, .container2 {
        display: inline-block;
        height: 100px;
        width: 100px;
        background-color: #04af2f;
        color: white;
        font-size: 20px;
        font-family: Verdana, sans-serif;
        padding: 10px;
        border: 1px solid black;
        text-align: center;
        line-height: 100px;
    }
    .container div:hover {
        transition: transform 0.5s ease;
        transform: rotate(45deg);
    }
&lt;/style&gt;&lt;/head&gt;&lt;body&gt;&lt;div class="container"&gt;&lt;div&gt;Box 1&lt;/div&gt;&lt;/div&gt;&lt;div class="container2"&gt;Box 2&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;</pre>

August 20, 2025

Element Selectors

Element Selectors in CSS

CSS element selectors are used to target and style specific HTML elements. These selectors are defined by simply using the element’s name in the stylesheet.

Syntax

The syntax for CSS element selectors is as follows:

element_name{/*property: value;*/color: red;}

Using Element Selectors Setting Background Color

To set the background color and text color of all <p> elements, use the element selector.

Example

The following example sets the background color and text color for all <p> elements.

<!DOCTYPE html><html lang="en"><head><title>Element Selectors</title><style>
    p {
        background-color: #04af2f;
        color: white;
    }
&lt;/style&gt;&lt;/head&gt;&lt;body&gt;&lt;p&gt;Welcome to CSS Element Selectors&lt;/p&gt;&lt;p&gt;This is paragraph 1&lt;/p&gt;&lt;p&gt;This is paragraph 2&lt;/p&gt;&lt;/body&gt;&lt;/html&gt;</pre>


Using Element Selectors Setting Border



The element selector can be used to add a border to all <div> elements.



Example



The following example adds a border to all <div> elements.



<!DOCTYPE html><html lang="en"><head><title>Element Selectors</title><style>
    div {
        border: 3px solid #2a9d8f;
        padding: 10px;
    }
&lt;/style&gt;&lt;/head&gt;&lt;body&gt;&lt;div&gt;Welcome to CSS Element Selectors&lt;/div&gt;&lt;div&gt;This is div 1&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;</pre>


Using Element Selectors Setting Font



To apply a font style to all <li> elements, use the element selector.



Example



This example sets the font size and font family for all <li> elements.



<!DOCTYPE html><html lang="en"><head><title>Element Selectors</title><style>
    li {
        font-size: 18px;
        font-family: Verdana, sans-serif;
    }
&lt;/style&gt;&lt;/head&gt;&lt;body&gt;&lt;h2&gt;Welcome to Tutorials Point&lt;/h2&gt;&lt;ul&gt;&lt;li&gt;HTML&lt;/li&gt;&lt;li&gt;CSS&lt;/li&gt;&lt;li&gt;Javascript&lt;/li&gt;&lt;/ul&gt;&lt;/body&gt;&lt;/html&gt;</pre>

August 20, 2025

Child Selectors

Child Selectors in CSS

CSS child selector selects all the direct children of a particular element. This is denoted by ‘>’ (Greater than) symbol. It will not select elements that are further nested inside the child elements.

Syntax

The syntax for CSS child selectors is as follows:

selector > child-selector{/* property: value; */color: #04af2f
}

Child Selectors Example

In this example, we are changing the text color of the direct child element of div element. The para element inside the span tag remains unchanged as it is not a direct child of the div element.

<!DOCTYPE html><html lang="en"><head><title>Document</title><style>
    .myDiv &gt; p {
        color: #04af2f;
    }
&lt;/style&gt;&lt;/head&gt;&lt;body&gt;&lt;div class="myDiv"&gt;&lt;p&gt;It is a paragraph element. Direct child of div element.&lt;/p&gt;&lt;span&gt;&lt;p&gt;This is a p element inside div but not direct child of div.&lt;/p&gt;&lt;/span&gt;&lt;/div&gt;&lt;p&gt;This is a p element outside div.&lt;/p&gt;&lt;/body&gt;&lt;/html&gt;</pre>


Example 2



In this example, we are changing the font size and font of the direct child element of the div element.



<!DOCTYPE html><html lang="en"><head><title>Document</title><style>
    .myDiv &gt; p {
        border: 2px solid #031926;
        font-size: 20px;
        font-family: Verdana, sans-serif;
    }
&lt;/style&gt;&lt;/head&gt;&lt;body&gt;&lt;div class="myDiv"&gt;&lt;p&gt;It is a paragraph element. Direct child of div element.&lt;/p&gt;&lt;span&gt;&lt;p&gt;This is a p element inside div but not direct child of div.&lt;/p&gt;&lt;/span&gt;&lt;/div&gt;&lt;p&gt;This is a p element outside div.&lt;/p&gt;&lt;/body&gt;&lt;/html&gt;</pre>

August 20, 2025

Class Selectors

Class Selectors in CSS

CSS class selectors are used to select elements with a specific class attribute. The class selector is defined using a period (.) followed by the class name.

Syntax

The syntax for CSS class selectors is as follows:

.classname{/* property: value; */background-color: #04af2f;}

Basic Class Selector

To apply a background-color and text color to elements with a specific class, we have used a basic class selector.

Example

The following example applies the background color and text color to all elements with the class container.

<!DOCTYPE html><html lang="en"><head><title>Class Selectors</title><style>
    .container {
        background-color: #04af2f;
        color: white;
    }
&lt;/style&gt;&lt;/head&gt;&lt;body&gt;&lt;p class="container"&gt;This is a paragraph with class.&lt;/p&gt;&lt;p&gt;This is a paragraph without class&lt;/p&gt;&lt;/body&gt;&lt;/html&gt;</pre>


Multiple Class Selectors



We can use multiple classes with any element. All the classes are separated by dot. It works only when all the class name matches.



Example



The following example adds a border and background color to div 1 and div 2 remains with default styles.



<!DOCTYPE html><html lang="en"><head><title>Document</title><style>
    .bdr.bgColor {            
        border: 2px solid black;
        background-color: #04af2f;
    }
&lt;/style&gt;&lt;/head&gt;&lt;body&gt;&lt;div class="bdr bgColor"&gt;
    This is div with background color and a border.
&lt;/div&gt;&lt;br&gt;&lt;div class="bdr"&gt;
    This is div with default styles.
&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;</pre>


Combining Class Selector with Other Selectors



Class selectors can be combined with other selectors to select specific elements.



Example



This example sets the font size and font family for only p elements having a class name container.



<!DOCTYPE html><html lang="en"><head><title>Document</title><style>
    p.container {
        font-size: 16px;
        font-family: Verdana, sans-serif;
        color: #04af2f;
    }
&lt;/style&gt;&lt;/head&gt;&lt;body&gt;&lt;p class="container"&gt;This is a styled paragraph element.&lt;/p&gt;&lt;div class="container"&gt;This is a div without any style.&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;</pre>


Combining Multiple Classes



We can use multiple classes on any element to add different styles using different classes.



Example



Here is an example where we have used two different classes on div element to add a border and background color.



<!DOCTYPE html><html lang="en"><head><title>Document</title><style>
    .bdr {
        border: 1px solid black;
        font-size: 16px;
        font-family: Verdana, sans-serif;
    }
    .bgColor {
        background-color: #04af2f;
        color: white
    }
&lt;/style&gt;&lt;/head&gt;&lt;body&gt;&lt;div class="bdr bgColor"&gt;
    This is a div with a border and background color.
&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;</pre>


Using Class Selectors with Media Queries



We can create a responsive design by using class selectors with media queries.



Example



Here is an example where the background color of the web changes depending on the screen size.



<html><head><style>
    .bgColor {
        background-color: rgb(96, 5, 26);
        color: white;
    }
    @media (max-width: 800px) {
        .bgColor {
            background-color: #04af2f;
            color: white;
        }
    }

    @media (max-width: 700px) {
        .bgColor {
            background-color: #031926;
            color: white;
        }
    }
&lt;/style&gt;&lt;/head&gt;&lt;body&gt;&lt;p class="bgColor"&gt;
    Try different screen sizes to see 
    change in background color.
&lt;/p&gt;&lt;/body&gt;&lt;/html&gt;</pre>

August 20, 2025

Group Selectors

Group Selectors in CSS

CSS group selector applies the same style to multiple elements at a time. The names of elements can be separated by commas. Group selector keeps CSS concise and avoids redundancy.

Syntax

The syntax for the CSS group selector is as follows:

#selector_1, .selector_2, selector_3{/* property: value; */color: #04af2f
}

CSS Group Selectors Example

In this example, we have used the same style on all three elements using group selectors.

<!DOCTYPE html><html lang="en"><head><title>Document</title><style>
    span, #para, .myClass {
        background-color: #04af2f;
        color: white;
    }
&lt;/style&gt;&lt;/head&gt;&lt;body&gt;&lt;p id="para"&gt;This is a paragraph element.&lt;/p&gt;&lt;div class="myClass"&gt;This is a div element.&lt;/div&gt;&lt;br&gt;&lt;span&gt;This is a span element.&lt;/span&gt;&lt;/body&gt;&lt;/html&gt;</pre>


Group Selectors Example with Pseudo-classes



In this example, we have used pseudo classes with group selectors. CSS :active pseudo-class changes the text color of the link and button on clicking while CSS :hover pseudo-class changes the background-color of the div and p element.



<!DOCTYPE html><html lang="en"><head><title>Document</title><style>
    .link:active, #btn:active {
        color: #04af2f;
    }
    .myDiv:hover, #para:hover {
        background-color: #031926;
        color: white;
    }
&lt;/style&gt;&lt;/head&gt;&lt;body&gt;&lt;div class="myDiv"&gt;
    Hover over me
&lt;/div&gt;&lt;p id="para"&gt;This is a paragraph.&lt;/p&gt;&lt;a class="link" href="#"&gt;Click on this link.&lt;/a&gt;&lt;br&gt;&lt;br&gt;&lt;button id="btn"&gt;Click me&lt;/button&gt;&lt;/body&gt;&lt;/html&gt;</pre>

August 20, 2025

ID Selectors

ID Selectors in CSS

CSS ID selector selects a single element with a particular value for the id attribute. An id in CSS is denoted by the “#” (hash) symbol. The same class can be applied to multiple elements, but an id is unique for an element.

Syntax

The syntax for the CSS id selector is as follows:

#id{/* property: value; */color: #04af2f
}

ID Selector for Styling a div Element

CSS ID selector can be used to select various elements such as div, p , section, etc.

Example

In this example, we have used an ID selector to style the div element. We have used background-color, color, padding, border, and text-align properties to style and center the text in the div element.

<!DOCTYPE html><html lang="en"><head><title>Document</title><style>
    #myId {
        background-color: #04af2f;
        color: white;
        font-size: 20px;
        font-family: Verdana, sans-serif;
        padding: 10px;
        border: 1px solid black;
        text-align: center;
    }
&lt;/style&gt;&lt;/head&gt;&lt;body&gt;&lt;div id="myId"&gt;
    This is a div element having various styles.
&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;</pre>


ID Selector with Pseudo-Classes



CSS ID selector can be used with pseudo classes to add interactivity to the element such as changing text color on hovering any link.



Example



In this example, we have used hover pseudo-class to change the link text color upon hovering over it.



<!DOCTYPE html><html lang="en"><head><title>Document</title><style>
    #myId {
    color: #04af2f;
    }
    #myId:hover {
        color: #031926;
    }
&lt;/style&gt;&lt;/head&gt;&lt;body&gt;&lt;a href="#" id="myId"&gt;
    Hover over this link to change its color.
&lt;/a&gt;&lt;/body&gt;&lt;/html&gt;</pre>


Using ID Selector with Forms



CSS ID selector can be used with forms to design the form elements.



Example



In this example, we have used an id selector on form elements like buttons and input fields. We have designed the input field and changed the appearance of the submit button.



<!DOCTYPE html><html lang="en"><head><title>Document</title><style>
    #user {
        border: 2px solid black;
        border-radius: 5px;
        font-size: 16px;
        font-family: Verdana, sans-serif;
    }
    #btn {
        background-color: #031926;
        color: white;
        padding: 10px 15px;
        border: none;
        border-radius: 5px;
        cursor: pointer;
    }
&lt;/style&gt;&lt;/head&gt;&lt;body&gt;&lt;form&gt;&lt;label for="username"&gt;Username:&lt;/label&gt;&lt;input type="text" id="user" name="username" 
           placeholder="Enter your username"&gt;&lt;br&gt;&lt;br&gt;&lt;button type="submit" id="btn"&gt;Submit&lt;/button&gt;&lt;/form&gt;&lt;/body&gt;&lt;/html&gt;</pre>


ID Selector for Animations



CSS ID selector can be used with CSS animations for creating smooth animation effects.



Example



In this example, we have used an id selector to animate a bouncing ball. CSS keyframes specify the frame sequence and translateY() function of the transform property to control the bouncing of the ball.



<!DOCTYPE html><html lang="en"><head><title>Document</title><style>
    
    #animated {
        width: 100px;
        height: 100px;
        background-color: #04af2f;
        font-family: Verdana, sans-serif;
        text-align: center;
        line-height: 100px;
        color: white;
        border-radius: 50%;
        animation: bounce 1s infinite;
    }
    @keyframes bounce {
        0%, 100% {
            transform: translateY(20px);
        }
        50% {
            transform: translateY(0);
        }
    }
&lt;/style&gt;&lt;/head&gt;&lt;body&gt;&lt;div id="animated"&gt;Bounce&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;</pre>


Id Selector with Transition



CSS ID selector can be used with CSS transition for creating a smooth transition from one state to another.



Example



In this example, we have used scale() function and background-color property to change the size and color of div box when hovered over it.



<!DOCTYPE html><html lang="en"><head><title>Document</title><style>
    #box {
        width: 400px;
        height: 100px;
        background-color: #04af2f;
        text-align: center;
        font-family: Verdana, sans-serif;
        line-height: 100px;
        color: white;
        border-radius: 10px;
        transition: all 0.5s ease;
        margin: auto;
    }
    #box:hover {
        background-color: #031926;
        transform: scale(0.95);
        cursor: pointer;
    }
&lt;/style&gt;&lt;/head&gt;&lt;body&gt;&lt;div id="box"&gt;Hover Over this div Element&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;</pre>

August 20, 2025

Universal Selectors

Universal Selectors in CSS

CSS universal selector is a special selector that selects all the elements in an HTML document. It is denoted by an asterisk mark (*). Universal selector is used to set a similar style for the entire document.

Syntax

The syntax for the CSS universal selector is as follows:

*{margin: 0;padding: 0;}

Using Universal Selector Setting Background Color

To set the background color and text color of the web page, universal selector is used:

Example

Let us see an example to set the background color and text color of the HTML document.

<!DOCTYPE html><html lang="en"><head><title>Universal Selectors</title><style>
    * {
        background-color: #04af2f;
        color: white;
    }
&lt;/style&gt;&lt;/head&gt;&lt;body&gt;&lt;p&gt;Welcome to Tutorials Point&lt;/p&gt;&lt;/body&gt;&lt;/html&gt;</pre>


Using Universal Selector Setting Border



We have used the Universal Selector to set the border of the HTML document.



Example



Here is an example of setting the border of an HTML web page.



<!DOCTYPE html><html lang="en"><head><title>Universal Selectors</title><style>
    * {
        border: 2px solid #04af2f;
    }
&lt;/style&gt;&lt;/head&gt;&lt;body&gt;&lt;p&gt;Welcome to Tutorials Point&lt;/p&gt;&lt;/body&gt;&lt;/html&gt;</pre>


Using Universal Selector Setting Font



Use the universal selector to set a similar font for all the elements in the web page.



Example



Here is an example to set the font and font size of the document.



<!DOCTYPE html><html lang="en"><head><title>Universal Selectors</title><style>
    * {
        font-size: 16px;
        font-family: Verdana, sans-serif;
    }
&lt;/style&gt;&lt;/head&gt;&lt;body&gt;&lt;p&gt;Welcome to Tutorials Point&lt;/p&gt;&lt;/body&gt;&lt;/html&gt;</pre>

August 20, 2025

Cascading in CSS?

CSS Cascading

Cascading in CSS refers to a process where a browser determines which rule to apply on any element when various conflicting rules exist. The cascade follows a structured order to specify which style rule will take precedence over other style rules.

Key Factors of CSS Cascading

The key factors for deciding which CSS rule will take priority are mentioned below:

1. Specificity

Specificity refers to, how specific rules have been defined. For example: rules defined using the ID selector take priority over rules defined using the class selector if both selectors are used on the same element.

<!DOCTYPE html><html lang="en"><head><title>Document</title><style>
    #txt {
        color: #04af2f;
    }
    .txt {
        color: blue;
    }
&lt;/style&gt;&lt;/head&gt;&lt;body&gt;&lt;p&gt;Welcome to &lt;span id="txt" class="txt"&gt;Tutorials Point&lt;/span&gt;&lt;/p&gt;&lt;/body&gt;&lt;/html&gt;</pre>


2. Importance



The styles marked with !important have higher priority over other rules. For example, if both inline and internal css, are used on an element. Then the rule that is marked as !important will take priority.



Example



<!DOCTYPE html><html lang="en"><head><title>Document</title><style>
    .txt {
        color: #04af2f <strong>!important</strong>;
    }
    
&lt;/style&gt;&lt;/head&gt;&lt;body&gt;&lt;p&gt;Welcome to &lt;span class="txt" style="color: yellow;"&gt;Tutorials Point&lt;/span&gt;&lt;/p&gt;&lt;/body&gt;&lt;/html&gt;</pre>


3. Source Order



Source order refers to, the order in which a CSS rule is defined on any element. The rule defined later takes the priority over rule defined earlier.



Example



<!DOCTYPE html><html lang="en"><head><title>Document</title><style>
    .txt {
        color: red;
    }
    
    .txt {
        color: #04af2f;
    }
&lt;/style&gt;&lt;/head&gt;&lt;body&gt;&lt;p&gt;Welcome to &lt;span class="txt"&gt;Tutorials Point&lt;/span&gt;&lt;/p&gt;&lt;/body&gt;&lt;/html&gt;</pre>


CSS Cascading Hierarchy



If the CSS rules are applied from multiple sources on an element, then priority is decided on the basis of below mentioned criteria.




!important: Styles marked with !important get the highest priority.



Inline CSS Styles defined using inline CSS gets higher priority after !important.



Internal CSS Styles are defined under the style tag in the head section.



External CSS Styles are separately defined in another .css file and using <link> tag, it is defined in the main HTML document.



User/Browser styles: These are the default browser or user-defined preferences.





Priority Order: !important > Inline CSS > Internal CSS > External CSS > User/Browser Styles.




CSS Specificity



CSS specificity plays an important role in deciding which CSS rule to apply to an element when multiple CSS rules are defined for the same element. The more specific the CSS rule is, the higher priority that CSS rule will get. A point system is used to calculate the CSS specificity. The point system for selectors is mentioned below:




Inline CSS: 1000 points



ID Selector: 100 points



Classes, Attributes, and Pseudo-Classes: 10 points



Elements and Pseudo-Elements: 1 point




/*Lowest Priority*/p{color: red;}/*1 point*//*Higher Priority than Element Selector*/.myId{color: blue;}/*10 points*//*Second Highest Priority*/#myClass{color: green;}/*100 points*//*Highest Priority*/
<p style="color: #04af2f;">
Welcome to Tutorials Point</p>




CSS Rule Overriding



CSS Rule overriding occurs when multiple styles are applied to the same element. CSS uses specificity, importance, and source order to decide which rule should be applied.



Example



In this example, we have used two element selectors on the p element. Based on source order the latter used style has been applied in the last paragraph.



<!DOCTYPE html><html lang="en"><head><title>Document</title><style>
    p {
        color: aqua;
    }
    #txt {
        color: red;
    }
    
    .txt {
        color: #04af2f;
    }
    p {
        color: blueviolet;
    }
&lt;/style&gt;&lt;/head&gt;&lt;body&gt;&lt;p id="txt"&gt;Welcome to Tutorials Point&lt;/p&gt;&lt;p class="txt"&gt; 
    This is CSS example for Overriding 
    rule in CSS.
&lt;/p&gt;&lt;p&gt;This is third paragraph.&lt;/p&gt;&lt;/body&gt;&lt;/html&gt;</pre>

August 20, 2025