Element Selectors in CSS: A Fundamental Guide to Targeting HTML Elements

Element Selector (tag name)

An Element Selector in CSS is used to target and apply styles to specific HTML elements based on their element type. It is one of the most basic and commonly used types of CSS selectors. Element selectors are defined by the name of the HTML element itself.

Syntax: The syntax for an element selector is simply the name of the HTML element you want to target

element-name {
  /* CSS styles go here */
}

Element selectors are a foundational part of CSS and are used extensively to define the default styling for various HTML elements on a webpage. However, for more targeted and specific styling, it's common to use other types of selectors, such as class and ID selectors, to apply styles to individual elements or groups of elements.

Source Code :

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Element Selector</title>
    <style>
      h1 {
        color: green;
      }
      p {
        color: blue;
        line-height: 25px;
        font-family: roboto;
      }
    </style>
  </head>
  <body>
    <h1>Element Selector</h1>
    <p>
      HTML elements or tags represent different parts of a web page's structure and content, such as headings, paragraphs, 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>
    <ul>
      <li>HTML</li>
      <li>CSS</li>
      <li>JavaScript</li>
    </ul>
  </body>
</html>

Live Preview

h1 { color: green; }: This is a CSS rule targeting all <h1> elements within the document.color: green; It sets the text color of all <h1> elements to green. This means that all level 1 headings (<h1>) in the HTML document will have green text.

p { color: blue; line-height: 25px; font-family: roboto; }: This is another CSS rule targeting all

elements within the document.

Overall, this CSS code is styling the document's <h1> elements with green text color and applying a specific set of styles (blue text color, line height, and font family) to all <p> elements. The code, as written, will affect all <h1> and <p> elements in the HTML document, applying the defined styles uniformly to these elements throughout the page.