Introducing CSS Selectors

This lesson delves into enhancing HTML visuals using Cascading Style Sheets (CSS). We'll begin with CSS selectors – the tools for targeting specific HTML elements.

Cascading Style Sheets (CSS)

CSS dictates the look of HTML components: color, spacing, size, and more. While you can style individual elements using inline style attributes (e.g., <p style="color:red;"></p>), this is inefficient for large websites.

A more effective approach involves using a <style></style> element within the section of your HTML or a separate CSS file (like style.css) linked to your HTML using <link>:

  <style>
    p {
      color: red;
      text-decoration: underline;
    }
  </style>

or

<!-- index.html -->
<link href="style.css" rel="stylesheet">

/* style.css */
p {
  color: red;
  text-decoration: underline;
}

This applies the same style to all <p></p> elements. Browser developer tools (e.g., right-click, "Inspect" in Chrome) let you examine and modify applied styles for troubleshooting.

Selecting HTML Elements

The p in p { color: red; } selects all <p></p> elements. For more complex structures, id and class attributes provide finer control.

Class and ID Selectors

Each element can have a unique id. ID selectors (#idName) target elements by their id. However, ids must be unique, limiting their flexibility.

Classes offer greater versatility. Multiple elements can share the same class. Class selectors (.className) target elements with that class. Elements can have multiple classes (e.g., <p class="red-text bold"></p>).

.red-text { color: red; } styles all elements with the red-text class. p.red-text specifically styles only <p></p> elements with red-text.

Combinator Selectors

The Document Object Model (DOM) represents the page's structure as a tree. Combinator selectors leverage this hierarchy.

• div p: Selects all <p></p> elements within <div> elements (descendants). <li> <code>div > p: Selects only the direct children <p></p> elements of <div> elements. <li> <code>p span: Selects the <span></span> immediately following a <p></p>.
• p ~ span: Selects all <span></span> siblings following a <p></p>.


Overly complex combinator combinations are discouraged. You can combine them with class selectors (e.g., .intro p).

Pseudo-selectors

Pseudo-class selectors style elements based on their state (e.g., a:hover, a:active, a:visited). Pseudo-element selectors target parts of an element (e.g., ::first-letter).

Other Selectors

• *: The universal selector, selecting all elements.
• Group selectors (e.g., h1, h2, p): Select multiple element types.
• Attribute selectors (e.g., p[lang], p[lang="en"]): Select elements based on attributes.

Further Reading:

• Responsive Design
• Responsive Images
• CSS Animations

This post originally appeared on TheDevSpace.