01 | HTML DESCRIBES, CSS PRESENTS

Your club website already has headings, paragraphs, links and meaningful page sections. Now you can give those elements a consistent appearance without rewriting the content.

CSS stands for Cascading Style Sheets. It describes presentation, including colours, fonts, spacing and layout. HTML provides the structure and meaning.

<!-- HTML -->
<h1>Robotics Club</h1>
<p>Build robots and test your ideas.</p>

/* CSS */
h1 {
  color: #24988f;
}

The CSS makes h1 text green. It does not create a heading or change its semantic level. A styled div still does not become an h1.

02 | READ A CSS RULE

p {
  color: #24363a;
  line-height: 1.6;
}

• Selector: p chooses which elements the rule targets.
• Declaration block: curly braces enclose the styling declarations.
• Property: color names the feature to change.
• Value: #24363a supplies the setting.
• Declaration: color: #24363a; is one property-value instruction.

Use a colon between property and value, and a semicolon after each declaration. line-height: 1.6 uses a unitless multiplier for the element’s font size.

CSS comments use /* ... */. They are different from HTML comments. Keep your indentation consistent so missing punctuation is easier to spot.

03 | LINK AN EXTERNAL STYLESHEET

<!-- index.html: inside head -->
<link rel="stylesheet" href="styles.css">

/* styles.css: no style tags in this file */
body {
  font-family: Arial, sans-serif;
  color: #24363a;
}
h1 {
  color: #24988f;
}

Create styles.css beside index.html. The link tells the browser to load that file as a stylesheet. Use href for its path and rel="stylesheet" to describe the relationship.

If your stylesheet is inside a css folder beside index.html, use href="css/styles.css". Paths are relative to the HTML document containing the link.

Link the same stylesheet from all your pages. One change can then update a shared appearance across the website. You still need the link on each page.

A .css file contains CSS directly, without HTML style tags. Save it with the correct extension and check filename case.

04 | THREE WAYS TO APPLY CSS

An external stylesheet is the main approach for this course. The other two approaches are useful to recognize:

<!-- Internal stylesheet: inside the HTML head -->
<style>
  h2 { color: #24988f; }
</style>

<!-- Inline declaration: on an individual element -->
<p style="color: #24988f;">A highlighted paragraph.</p>

External CSS lives in a linked file and supports reuse across pages. Internal CSS lives in a style element and applies to that document. Inline CSS lives in an element’s style attribute and affects that element.

Inline declarations do not include a selector or outer curly braces. They can be useful for a quick experiment, but repeating them across many elements makes maintenance harder.

Several rules may apply to the same element. Do not assume that the last file you opened wins. The next lesson explains the cascade and specificity.

05 | TYPE SELECTORS TARGET ELEMENTS

h2 {
  color: #24988f;
}
p {
  line-height: 1.6;
}

A type selector, also called an element selector, matches elements of that type. h2 targets every h2 in the document to which the stylesheet applies.

This is useful for site-wide defaults. It can also be too broad when you want just a few elements to look different. For a reusable special style, use a class.

06 | CLASSES MAKE STYLES REUSABLE

<p class="highlight">Next meeting: Friday afternoon.</p>
<p>Bring your project notes.</p>
<p class="highlight">New members are welcome.</p>

.highlight {
  background-color: #eaf7f5;
  padding: 12px;
  border-left: 4px solid #24988f;
}

A class selector starts with a dot in CSS. .highlight matches elements whose class list includes highlight. The HTML class value does not include the dot.

Several elements can share a class. One element can also have several classes, separated by spaces:

<article class="project-card featured">
  <h2>Delivery robot</h2>
  <p>Our latest prototype.</p>
</article>

The article belongs to both project-card and featured. You can write a rule for each class. Class names describe the grouping; they do not create semantic meaning by themselves.

07 | IDS IDENTIFY ONE ELEMENT

<section id="join">
  <h2>Join the club</h2>
  <p>Speak to the club leader.</p>
</section>

#join {
  border: 2px solid #24988f;
  padding: 16px;
}

An ID selector begins with # in CSS. #join matches the element with id="join". Keep each id unique within a page.

An id can also be a fragment-link destination, such as href="#join", or be referenced by labels, scripts and accessibility attributes. Those roles are separate from its CSS styling role.

Classes are usually a better choice for reusable component styling. Do not give five cards the same id just to make them share a border; give them a shared class.

08 | GROUP AND NARROW YOUR SELECTORS

/* A comma groups separate selectors */
h1, h2 {
  color: #24988f;
}

/* A space selects descendants */
.project-card p {
  line-height: 1.6;
}

/* No space: both conditions apply to the same element */
p.highlight {
  font-weight: bold;
}

h1, h2 targets either heading type. .project-card p targets paragraphs anywhere inside an element with the project-card class. p.highlight targets paragraphs that themselves have the highlight class.

Spaces and commas change meaning. .project-card, p targets all project-card elements and all paragraphs; it does not mean “paragraphs inside a card”.

09 | TRY IT: WHICH ELEMENTS MATCH?

The activity below uses CSS selector matching to highlight example elements. Pick a selector, predict the result, then inspect it. A green outline indicates a match; the text summary gives the same information.

10 | CHECK A STYLESHEET THAT DOES NOT LOAD

1. Save both the HTML and CSS files, then refresh the browser.
2. Check that the link is in head and has rel="stylesheet".
3. Check the href path and the filename’s spelling and case.
4. Check braces, colons and semicolons in the CSS.
5. Compare the selector with the actual element, class or id.
6. Use browser developer tools to inspect applied rules when available.

Browsers can ignore invalid declarations while applying other valid rules, so one working colour does not prove the whole stylesheet is correct.

CSS file references such as a background image URL are normally resolved relative to the stylesheet file, not the HTML file. Keep that distinction in mind when you later add background images.