CSS Style Sheets

📖 CSS Style Sheets

Introduction to CSS

Cascading Style Sheets (CSS) let web developers control the look and layout of web pages. CSS separates content from presentation, giving you more flexibility, consistency, and control across your site.

Video produced by GCFLearnFree.org

Ways to Add CSS

There are three ways to apply CSS to a web page:

Inline Style: Applies styles directly to an element using the style attribute. Example: <p style="color: red">. This method is discouraged in modern web design but useful when you can't access a stylesheet (e.g., LMS content blocks).
Embedded (Internal) Style Sheet: Styles written between <style> tags in the <head> section. These styles apply only to the current page.
External Style Sheet: A separate .css file that can be reused across multiple pages. Linked in the <head> using <link rel="stylesheet" href="style.css">.

Internal vs. External Stylesheets

Each method has advantages depending on the project.

Internal Stylesheets

Stored in the same file as your HTML
Fast rendering (only one request)
Not reusable across pages
Increases HTML file size

External Stylesheets

Reusable across multiple pages
Improves design consistency
Easier to update and maintain
Initial page may load slower (but faster on later pages)

We use external stylesheets in this course because they promote cleaner, more professional code. They help you separate content from design, which mirrors how real development teams work. You'll be able to reuse and update styles across pages — a foundational skill for building scalable websites.

CSS Rule Syntax

A CSS rule contains a selector and a set of declarations:

p {
    color: #660000;
    font-family: Arial, Helvetica, sans-serif;
  }

The selector (p) targets elements, and each declaration is a property-value pair.

Applying Styles to Multiple Elements

h1, h2, h3 {
    color: #660000;
    font: 700 Georgia, 'Times New Roman', Times, serif;
  }

You can target multiple elements by separating selectors with commas.

Using Classes and IDs

Class Selector (.classname): Used to style groups of elements that share a visual role or purpose. Classes are ideal for applying consistent design to repeating elements like images, cards, or layout blocks. Example: <img class="thumbnail">
ID Selector (#idname): Used to identify a single element for scripting, linking, or labeling — not usually for styling. IDs are helpful in form fields, internal page anchors, or JavaScript interactions. Example: <label for="email"> targeting <input id="email">.

CSS Selectors

These selectors help you target specific elements in your HTML, allowing you to apply styles precisely and consistently.

<div id="gallery">
    <img src="img1.png" id="img1">
    <p>
      <img src="img2.png" id="img2">
      <img src="img3.png" id="img3">
      <img src="img4.png" id="img4">
    </p>
  </div>

Common CSS Selectors
Selector	Description	Matches
`#gallery img`	Descendant selector – targets all `<img>` inside `#gallery`	`#img1`, `#img2`, `#img3`, `#img4`
`#gallery > img`	Child selector – targets direct child `<img>` inside `#gallery`	`#img1`
`#img2 + img`	Adjacent sibling selector – targets next `<img>` after `#img2`	`#img3`
`#img2 ~ img`	General sibling selector – targets all siblings after `#img2`	`#img3`, `#img4`

Pseudo-Classes and Pseudo-Elements

Pseudo-Classes

Pseudo-classes let you style elements based on their state. They're especially useful for links:

a:link { color: maroon; }
a:visited { color: dimgray; }
a:hover { color: red; }
a:active { color: darkred; }

These must be written in this order: :link, :visited, :hover, :active (remember: “LoVe HAte”).

If your links appear in areas with dark backgrounds—like a <nav> or <footer>—you'll need to choose lighter colors for contrast. Here's an example for styling links in the footer:

footer a:link,
footer a:visited {
  color: white;
}

footer a:hover,
footer a:active {
  color: yellow;
}

This keeps your links readable and accessible in dark areas of your site.

You can also combine pseudo-classes with class selectors to apply styles only in specific contexts. For example, you might create a class for your site’s main navigation:

.nav-link:link,
.nav-link:visited {
  color: navy;
}

.nav-link:hover,
.nav-link:active {
  color: orange;
}

In your HTML, apply the class to each nav link:

<nav>
  <a href="index.html" class="nav-link">Home</a>
  <a href="about.html" class="nav-link">About</a>
  <a href="contact.html" class="nav-link">Contact</a>
</nav>

This approach gives you more control and keeps your CSS organized as your site grows.

Pseudo-Elements

::first-line – targets the first line of a block of text
::first-letter – targets the first letter
::before – inserts content before the element
::after – inserts content after the element

The Cascade and Specificity

Inheritance

Styles applied to parent elements often apply to children unless overridden.

Specificity

More specific selectors (like IDs) override more general ones (like elements or classes).

Order of Appearance

Later rules override earlier ones if selectors have equal specificity.

Using `!important`

blockquote {
    font-style: italic !important;
  }

Use sparingly to force a rule to override others.

Testing and Validation

Use online tools to check for errors and improve accessibility:

Key Terms

Selector: The part of a rule that targets elements (e.g., p, #main).
Property: The CSS feature to change (e.g., color, font-size).
Value: The setting for a property (e.g., red, 16px).
Class: Reusable style label applied with class="...".
ID: Unique style label applied with id="...".
Inheritance: How styles on parent elements pass down to children.
Specificity: Rule strength based on selector type; IDs override classes and elements.

Additional Resources

Last updated: August 13, 2025 at 7:39 PM