Harnessing the Power of ID Selectors in CSS: A Comprehensive Tutorial

ID Selector (#)

An ID Selector in CSS is used to target and apply styles to a single, unique HTML element on a web page. ID selectors are preceded by a hash symbol (#) followed by the ID name. They provide a way to apply styles to a specific element, and each ID should be unique within the HTML document

Syntax: The syntax for an ID selector is as follows:

#id-name {
  /* CSS styles go here */
}

Source Code :

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>ID Selector</title>
    <style>
      #heading {
        font-weight: 400;
        color: brown;
        text-transform: uppercase;
      }
      #bold {
        color: brown;
      }
    </style>
  </head>
  <body>
    <h1 id="heading">ID Selector #</h1>
    <p>
      HTML elements or tags represent different parts of a web page's structure and content, such as <b id="bold"> headings, paragraphs</b>, lists, images, links, and more. XML tags serve a similar purpose but can be customized to define the structure of data within an XML document according to a
      specific schema.
    </p>
  </body>
</html>

Live Preview

The provided CSS code contains two ID selectors, #heading and #bold, each targeting specific HTML elements with unique IDs.

#heading: This is an ID selector targeting an HTML element with the ID attribute set to "heading."

font-weight: 400;: This rule sets the font weight of the element to 400, which typically represents a "normal" font weight. It is not bold.
color: brown;: It sets the text color to brown for the element with the ID "heading."
text-transform: uppercase;: This rule transforms the text to uppercase, making all the text within the element appear in uppercase letters.

#bold: This is another ID selector targeting an HTML element with the ID attribute set to "bold."