CSS | Syntax and Selectors

CSS Syntax: A CSS style rules consists of a selector, property and its value. The selector points to the HTML element where CSS style to be applied. The CSS property is separated by semicolons.

Syntax:

selector {
    // CSS Property
}

Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
      
<head>
      
    <!-- Style of h1 selector -->
    <style>
        h1 {
            color: green;
            text-align: center;
        
    </style>
</head>
  
<body>
    <h1>GeeksforGeeks</h1>
</body>
  
</html>                    

chevron_right


Output:

CSS Selectors: CSS Selectors are used to select HTML elements based on their element name, id, attributes, etc. It can select one or more elements simultaneously.

  • element selector: The element selector in CSS is used to select HTML elements which is required to be styled. In a selector declaration, there is the name of the HTML element and the CSS properties which are to be applied to that element is written inside the brackets {}.

    Syntax:

    element_name {
        // CSS Property
    }
    

    Example:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html>
    <html>
          
    <head>
          
        <!-- Syntax of h1 selector -->
        <style>
            h1 {
                color: green;
                text-align: center;
            
        </style>
    </head>
      
    <body>
        <h1>GeeksforGeeks</h1>
    </body>
      
    </html>                    

    chevron_right

    
    

    Output:

  • id selector: The #id selector is used to set the style of given id. The id attribute is the unique identifier in HTML document. The id selector is used with # character.

    Syntax:

    #id_name { 
        // CSS Property
    }
    

    Example:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html>
    <html>
          
    <head>
          
        <!-- Style of id selector -->
        <style>
            #heading {
                color: green;
                text-align: center;
                font-size:40px;
                font-weight:bold;
            
        </style>
    </head>
      
    <body>
        <div id = "heading">
            GeeksforGeeks
        </h1>
    </body>
      
    </html>                    

    chevron_right

    
    

    Output:

  • class selector: The .class selector is used to select all elements which belong to a particular class attribute. To select the elements with a particular class, use (.) character with specifying the class name. The class name is mostly used to set the CSS property to the given class.

    Syntax:

    .class_name {
        // CSS Property
    }
    

    Example:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html>
    <html>
          
    <head>
          
        <!-- Style of class selector -->
        <style>
            .heading {
                color: green;
                text-align: center;
                font-size:40px;
                font-weight:bold;
            
        </style>
    </head>
      
    <body>
        <div class = "heading">
            GeeksforGeeks
        </h1>
    </body>
      
    </html>                    

    chevron_right

    
    

    Output:



My Personal Notes arrow_drop_up


Article Tags :

Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.