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:

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

  filter_none

  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

  filter_none

  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

  filter_none

  Output: