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.,

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

or

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

This applies the same style to all

Selecting HTML Elements

The p in p { color: red; } selects all

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.,

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

Combinator Selectors

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

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


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.