CSS Fundamentals

🎯Learning Objectives

Level 10 gave the document a useful structure and keyboard path. CSS now controls how that structure looks. You will write rules, match elements with selectors, choose readable colors and text, and explain why one declaration wins when rules compete.

By the end, create a small external stylesheet for a workshop page and use browser tools to diagnose a style that appears to be ignored. Keep the HTML meaning and keyboard behavior intact while changing presentation.

🎨What CSS Does — Presentation for Structured Content

CSS means Cascading Style Sheets. A stylesheet contains rules that describe how selected elements should be presented. The same semantic HTML can use different fonts, colors and spacing without changing which element is a heading or button.

A workshop heading stays an h1 when its color changes. A link remains a link when it has a rounded background. Styling a div to look like a button still does not provide native button behavior. Keep the structural choices from Level 10 and treat CSS as the presentation layer.

Browsers also supply default styles. Headings, paragraphs and links have an appearance even before you add a stylesheet. Your rules participate in a system that includes browser defaults, author styles and, sometimes, user styles. This is why styling is more than applying the last file you opened.

🧱CSS Rule Anatomy — Selector, Property and Value

A selector identifies which elements a rule can match. Inside braces, each declaration has a property, a colon and a value. A semicolon separates declarations. The property asks what should change; the value describes the requested setting.

h1 {
  color: #173451;
  font-size: 2rem;
  line-height: 1.2;
}

Read this rule: for each matching h1, request the stated color, font size and line height. These declarations compete with other applicable declarations for the same properties. They do not erase every other style on the element.

Use a final semicolon even though the last declaration can often omit it. That habit avoids mistakes when you append another property. Comments use /* ... */. CSS does not use JavaScript’s line-comment syntax as an ordinary stylesheet comment.

/* A readable paragraph */
p {
  font-size: 1.125rem;
  line-height: 1.7;
}

📂Inline, Internal and External Styles

<link rel="stylesheet" href="workshop.css">

<style>
  .notice { color: #075a83; }
</style>

<p style="color: #173451;">Workshop information</p>

The external path is resolved relative to the HTML document unless a base URL changes that behavior. Check the actual filename and folder when the file does not load. A link points to a file; it does not create that file for you.

Do not memorize “external beats internal” or the reverse. Rules in linked sheets and style elements participate in the cascade. For comparable normal author declarations, a style attribute has precedence over stylesheet declarations; importance and other cascade stages still matter.

🎯Basic Selectors — Match the Right Elements

A type selector matches an element type: p matches paragraphs. A class selector begins with a dot: .notice matches an element whose class list contains notice. An ID selector begins with a hash: #registration matches the element with that ID.

A selector list uses commas to apply a rule to several matching groups. The universal selector * matches elements broadly. Broad rules can be useful for a common foundation, but keep component rules focused so they do not change unrelated parts of a page.

p { line-height: 1.7; }
.notice { background: #eef7fc; }
#registration { border: 1px solid #bdd5e6; }
h1, h2 { color: #173451; }

Predict the matches: a paragraph with class notice can match both p and .notice. Their declarations can combine when they affect different properties. A competing declaration for the same property must be resolved by the cascade.

🏷️Classes and IDs — Reuse Versus Identity

An element can have several classes separated by spaces. Each class can describe a reusable role, such as notice, warning or compact. An ID identifies one element in the document and should be unique. Prefer reusable classes for ordinary component styling; reserve IDs for genuine document identity and related uses.

In HTML you write class="notice featured". In CSS you write .notice or .featured, without adding the dot to the HTML class value. Do not use class=".notice" and expect .notice to match it as the class notice.

<p id="workshop-note" class="notice featured">Bring your HTML notes.</p>

.notice { padding: 1rem; }
.featured { font-weight: 700; }

The paragraph receives both reusable styles. The id can also be a fragment-link destination. An ID selector has higher specificity than a class selector, but adding IDs everywhere to win conflicts makes future changes harder.

🌳Relationships and Attribute Selectors

A space in a selector expresses a descendant relationship. .card p can match paragraphs anywhere inside .card. A greater-than sign expresses an immediate child: .card > p excludes paragraphs nested inside another child element.

An attribute selector can match an attribute’s presence or value. For example, input[type="email"] matches email inputs. The attribute selector is useful when that attribute is a meaningful part of the component’s behavior.

.card p { color: #254864; }
.card > p { margin-top: 0; }
input[type="email"] { border-color: #126d96; }

A comma is not a descendant relationship: .card, p selects cards and paragraphs separately. A missing space can change meaning too: .card.featured requires the same element to have both classes, whereas .card .featured requires a featured descendant of a card.

🖱️States — hover and focus-visible

A pseudo-class can match an element in a particular state. :hover commonly matches a pointer hovering over an element. :focus-visible matches when the browser considers a visible focus indicator appropriate, including ordinary keyboard use.

Provide a clear keyboard focus style as well as pointer feedback. A touch device may not have a persistent hover interaction. Do not place essential instructions behind hover alone or remove focus outlines without supplying a visible alternative.

a:hover { text-decoration-thickness: 3px; }
button:focus-visible, a:focus-visible {
  outline: 3px solid #126d96;
  outline-offset: 3px;
}

Pseudo-elements describe a part of an element or generated content. For example, ::first-letter targets an initial letter. Keep essential text in the HTML rather than relying only on generated content, especially when it conveys an action or instruction.

🎨Colors — Readable Foreground and Background

The color property sets text color. Background-color sets a background color. Colors can use named values, hexadecimal notation, rgb() or hsl(). These are different ways to specify a color, not different kinds of semantic content.

.notice {
  color: #173451;
  background-color: #eef7fc;
}
.warning {
  color: rgb(102, 58, 5);
  background-color: hsl(45, 100%, 94%);
}

Always evaluate the foreground against the background it will actually appear on. A light cyan label on a pale panel may look attractive yet be hard to read. A transparent background can reveal a parent’s background, so inspecting only the local rule may be insufficient.

Do not convey correctness or an error solely through color. Add words, symbols with a meaningful label or another perceivable difference. Use a contrast checker when reviewing the final design; these examples are not a complete accessibility audit.

🖼️Backgrounds — Images, Gradients and Transparency

A background can be a solid color, an image or a gradient. Supply an appropriate color behind an image and ensure text remains readable if the image changes or fails to load. Background images are presentation; essential information belongs in the document with an appropriate alternative.

Gradients can create a visually distinct heading panel without requiring another image file. Keep the transition gentle enough that the text is readable across the entire panel, rather than only at one edge.

.hero {
  color: #ffffff;
  background: linear-gradient(120deg, #10263f, #19445f);
}

Opacity applies to the whole element, including its descendants. Setting opacity: 0.5 on a card makes its text translucent as well as its background. If only the background should be translucent, choose a color with an alpha channel rather than fading the entire component.

🔤Fonts and Text — Readability First

Use a font stack so another suitable font is available if the first choice is missing. Set a readable size and line height, then check long paragraphs and small screens. A unitless line-height is useful because descendants can use the multiplier with their own font size.

body {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 1.125rem;
  line-height: 1.7;
}
h1 { font-weight: 700; line-height: 1.2; }
code { font-family: Consolas, monospace; }

Font weight changes emphasis, but visual boldness does not turn ordinary text into a heading. Text-align controls text alignment; it is not a general tool for laying out every kind of component. Preserve useful wrapping and avoid fixing paragraph height so tightly that increased text size clips content.

A shorthand such as font can reset associated properties you did not explicitly preserve. For beginner exercises, separate declarations are easier to inspect. When you use a shorthand, learn which properties it resets.

📏Units — px, rem, em and Percentages

If the root font size is 16 CSS pixels, 1.125rem corresponds to 18 CSS pixels. That arithmetic is an example with a stated assumption; a user or stylesheet can change the root size. A child at font-size: 1.25em under a 20px parent requests 25px.

Avoid arbitrary text sizes that make reading difficult. Let users zoom, test the page when text grows, and use flexible containers. Level 12 will develop sizing and layout more fully.

⚖️The Cascade — Why One Declaration Wins

For each property on an element, the browser considers applicable declarations and resolves conflicts. Matching is only the first question. Origin and importance, cascade layers where used, specificity and later tie-breakers can affect the winner. Source order is not the first universal rule.

For the beginner examples in this lesson, assume normal author rules in the same layer, with no animations, transitions or scoped-rule complications. Under those assumptions, specificity breaks a conflict, and later source order breaks a remaining tie. The visualizer states these boundaries instead of claiming to simulate every part of CSS.

An external file and an internal style block are both places to put author rules. Their location does not create a fixed priority category that always beats the other. First verify that the file loaded and the selector matches, then inspect the applicable declarations.

.note { color: #075a83; }
.note { color: #663399; }

Expected result under the stated assumptions: the later .note rule supplies purple text because both selectors have equal specificity and both declarations are normal author declarations in the same layer.

🔢Specificity and !important — Different Decisions

Compare specificity as components, not a single decimal score. ID selectors form one component; class, attribute and pseudo-class selectors form another; type selectors and pseudo-elements form another. A basic #note selector is more specific than .note, which is more specific than p.

This comparison applies after the relevant earlier cascade decisions. An important declaration can beat a normal declaration in the same author context even when the normal selector is more specific. !important is a declaration flag, not an extra selector or a normal increase to the specificity count.

Use focused rules and inspect conflicts before reaching for !important. Overusing it can make component changes difficult. Inline normal styles can also be overridden by an applicable important author declaration. Important user styles may be used to preserve user needs.

#lesson-note { color: #663399; }
.note { color: #075a83; }

/* Separate example: importance changes the comparison. */
.note { color: #755000 !important; }
#lesson-note { color: #663399; }

In the first pair, the matching ID rule wins over the later class rule. In the separate second pair, the important class declaration wins over the normal ID declaration. The lab lets you compare these cases without combining their assumptions.

🌳Inheritance — A Child Can Receive a Parent Value

Some properties, including color and common font properties, are inherited when the child does not have its own winning value for that property. Many box-related properties, such as margin and border, are not inherited by default.

Inheritance is not another highly specific rule on the child. An explicit declaration on a child can replace an inherited value even when the parent selector looks more specific. Ask whether the child has a declaration of its own before comparing the parent’s selector as if it matched the child.

.workshop { color: #176343; }
.workshop p { margin: 0; }

/* The paragraph can inherit the workshop color. */

inherit explicitly requests the parent’s computed value for a property. initial requests the property’s initial value; it does not mean “whatever the parent used.” unset follows inheritance for inherited properties and uses the initial value for others. Advanced reverting and layer controls can be studied after the basics.

🧪Premium Interactive — CSS Conflict Lab

The preview is a separate local document with controlled rules. Select a case, change the text size and inspect the actual rendered paragraph. Each case explains its expected winner under the stated simple author-style assumptions. The lesson styles outside the preview cannot overwrite its rules.

Compare source-order, ID specificity, inherited color and an important declaration. Read the rules in the same order they are supplied to the preview. The label reports an expected result for the known example; it is not a live browser-computed-style inspector.

🔎Debugging — Inspect Instead of Guessing

An invalid or unsupported declaration is generally ignored rather than converted into the value you intended. A missing colon or a malformed block can affect parsing beyond one obvious line. Keep braces balanced and inspect the browser’s parsed rules.

If a change seems absent after deployment, first verify that the deployed file contains it. A local edit that has not been deployed cannot change the public page. A cached resource can also show earlier content; inspect the actual loaded resource before changing unrelated selectors.

Try a small, reversible rule in browser tools to confirm the hypothesis. Then make the permanent change in the correct source file. Do not keep appending broad overrides that affect the header, footer and other lessons by accident.

💬Interview Questions — Flip to Explain

❓MCQ Practice — Explain the Winner

💻Extra Practice — Predict and Verify

📌Quick Revision

📖Glossary — Flip to Learn

🏆Final Challenge — Style the Semantic Workshop

Take the standalone workshop page from Level 10 and create workshop.css next to it. Link the stylesheet in the head. Use classes for the hero, notice and practice panels; style the headings, body text and native disclosure while keeping all existing semantic tags and keyboard controls.

Use a readable font stack, a flexible text size and a unitless line-height. Choose contrasting text and background colors. Provide a clear focus-visible style and avoid a fixed panel height that clips enlarged text. Keep decorative backgrounds separate from essential content.

Add two deliberately competing normal class color rules to a practice notice and predict their winner. Then compare a matching ID rule in a separate example. Record the assumptions that make your predictions valid and inspect the winning declaration in browser tools.

Success criterion: the external file loads, the selectors match only the intended content, the page remains operable by keyboard, and you can explain the conflicting color result. Level 12 will build on this foundation with the box model and layout.