Subjects and lessons to explore.

Law

Web Development · Foundations

CSS

9 min read 5 practice questions
7 key termsSourcesReport an error
Want it in plain words first? Jump to Eli explains — the same idea, no jargon.
On this page 9 sections
  1. In 30 seconds
  2. Why this matters
  3. The college version
  4. Eli explains
  5. Worked example
  6. Key takeaway
  7. Quick check
  8. Study tools
  9. Sources & references

In 30 seconds

, short for Cascading Style Sheets, is the language used to write style sheets for web documents. HTML supplies a page's content and structure; CSS describes its , such as color, spacing, and type. A gives the browser an instruction for some document content. Within that rule, declarations pair a —the feature to change—with a —the setting to use.

Why this matters

CSS lets one set of presentation choices serve many pages instead of mixing visual decisions into every piece of HTML. That separation makes a site easier to revise, test, and keep consistent. In coursework, CSS also provides a useful boundary: HTML answers what the content is, while CSS answers how that content should appear. Later lessons build on this foundation to examine syntax, targeting content, layout, and responsive presentation.

The college version

CSS is a language for presentation

Cascading Style Sheets (CSS) is a language for writing style sheets. A is associated with a document and provides instructions about presentation. On a web page, HTML normally expresses the document's content and structure: a heading, a paragraph, a list, or a form control. CSS describes presentation: visual characteristics such as a color, a type size, or space around an element. The browser reads the HTML and the applicable CSS, then renders the document for the user.

This division is a design practice, not a claim that HTML and CSS operate in isolation. A style instruction needs content to affect, and an HTML element may carry a class or other hook that a later CSS rule uses. Still, the responsibilities differ. Rewriting a paragraph's words is an HTML-content task. Changing the paragraph's visual treatment is a CSS-presentation task. Keeping the distinction clear makes later debugging less confusing: first ask whether the document contains and structures the intended content, then ask whether its presentation instructions are appropriate.

CSS is not a single unchanging handbook. The W3C's CSS Snapshot describes the current state of a collection of CSS specifications. That is one reason careful web authors consult current documentation when browser behavior or a feature's status matters. At this introductory level, the durable idea is simpler: CSS tells user agents how a document should be presented; it does not replace the document's meaningful structure.

Rules turn presentation decisions into instructions

A CSS rule connects a presentation instruction to document content. The exact way content is selected is a later topic; for now, treat the rule as an instruction addressed to a part of the page. The instruction contains one or more declarations. Each has two conceptual pieces: a property and a value. The property names the feature under consideration, such as color. The value gives the chosen setting for that feature, such as navy. Together, property plus value say what change is requested.

Consider the conceptual instruction “make this heading navy.” color is the property because it names the visual feature. navy is the value because it supplies the selected setting. The whole property–value pair is a declaration. If the instruction applies to a heading, the complete instruction is a rule. These names matter because they locate an error precisely. If a developer chose the wrong shade, the value is the likely problem. If the wrong visual feature changed, the property is suspect. If the instruction affected the wrong content, the part that identifies content—not the declaration's value—needs investigation.

Do not confuse a declaration with a rule. A declaration is one setting. A rule can contain several declarations, allowing related presentation choices to travel together. The punctuation and exact grammar that write rules are CSS syntax, covered separately. The present goal is to understand the jobs the pieces perform rather than memorize symbols.

Separation helps maintenance without guaranteeing quality

Putting presentation in CSS can allow the same visual decision to be reused across a document or across multiple documents that use a shared stylesheet. For example, a team can define a consistent heading treatment once and apply it where needed rather than placing a visual instruction beside every heading. When the design changes, a focused change to the stylesheet may update all of those uses. That is a practical reason CSS is central to site maintenance.

Separation is useful, but it is not magic. CSS cannot repair missing meaning in an HTML document. A visually large paragraph is not automatically a heading, and a color choice alone does not guarantee that all users can understand a page. Semantic HTML and accessibility both deserve their own analysis. Likewise, a stylesheet can be well organized yet still make poor visual choices. CSS supplies the mechanism for presentation; judgment is still needed to choose legible, consistent, and appropriate presentation.

A productive workflow reflects the boundary. Write and check the content and its HTML structure. Add CSS to express a presentation decision. Inspect the result in a browser, then revise either the structure or the presentation according to the kind of problem found. As the course progresses, selectors, the cascade, layout systems, and responsive techniques provide more precise tools. They all build on the basic model established here: rules contain declarations, declarations pair properties with values, and CSS works alongside rather than in place of HTML.

Eli, the EliExplains learning guide

Eli explains

The same idea, in plain words

Explain it like I’m 10

Think of a web page as an illustrated museum label. HTML is the information on the label: its title, its sentences, and which words form a list. CSS is the display plan that tells the museum how the label should look: perhaps titles are large, body text has space around it, and warnings use a different color. The display plan does not change the words into a different kind of information; it changes how visitors see them.

A CSS rule is like one instruction card in that plan. A declaration is one line on the card. If the line says the title's color should be navy, color names what is being adjusted and navy is the choice. Several lines can sit on one instruction card.

Picture it like this

HTML is the written museum label; CSS is the display plan for presenting that label.

Where the picture stops working

A museum display plan is usually made for a physical object, while CSS is interpreted by browser software and can react to different screens and settings. Also, CSS has technical rules about which instructions apply; the analogy does not explain those rules.

Worked example

A campus club page contains an HTML heading and a paragraph announcing a meeting. The content editor changes the meeting date in the paragraph; that is a content task. The designer decides all club headings should appear navy. In the CSS, the relevant rule contains a declaration whose property is color and whose value is navy. The browser applies that presentation instruction when it renders the heading. If the date is wrong, altering CSS would be the wrong repair because CSS changes presentation, not the paragraph's information. If the heading's shade is wrong, the designer should inspect the declaration's value. This distinction guides the team to the right file and the right kind of fix.

Key takeaway

CSS is the style-sheet language for document presentation. Its basic instruction model is rule → declaration → property plus value, and it works alongside HTML rather than replacing HTML's structure.

Quick check

3 questions here, of 5 in this lesson’s practice set. Answers stay hidden until you check.

Question 1 of 3foundational

What is CSS primarily used to describe on a web page?

Choose an answer, then check it.
Question 2 of 3intermediate

Which statement correctly distinguishes an HTML paragraph from CSS?

Choose an answer, then check it.
Question 3 of 3foundational

In a declaration that sets the visual feature color to navy, what is navy?

Choose an answer, then check it.
Practice all 5

Keep learning

Ready to build on this? Continue to the next lesson.

Practice this lesson
Study tools & related lessonsYou’ll learn to · Common mistakes · Easily confused · Key vocabulary · Related

You’ll learn to

  • Define CSS and explain its role as a style-sheet language.
  • Distinguish HTML's structural role from CSS's presentation role.
  • Explain the relationship among a CSS rule, declaration, property, and value.
  • Apply that relationship to identify the purpose of a small styling instruction.

Common mistakes

  • Treating CSS as the language that supplies a page's written content.

    Use HTML to structure and contain web content; use CSS to describe presentation.

  • Calling a property–value pair a complete rule.

    Call the pair a declaration; a rule is the larger instruction that contains declarations.

  • Assuming CSS can give a visually styled element semantic meaning.

    Use appropriate HTML structure for meaning, then use CSS for presentation.

  • Assuming a shared stylesheet automatically makes every design accessible or effective.

    Evaluate the actual structure and presentation; CSS is a mechanism, not a quality guarantee.

Easily confused

HTML vs. CSS

HTML represents document content and structure; CSS describes the document's presentation.

declaration vs. CSS rule

A declaration is one property-and-value setting; a rule is the complete instruction that can contain one or more declarations.

property vs. value

A property names the feature to set; a value supplies the selected setting for that feature.

Key vocabulary

CSS
A language used to write style sheets that describe the presentation of a document.
style sheet
A collection of CSS instructions associated with a document to describe its presentation.
presentation
The visual rendering or appearance of document content, such as its color, spacing, or type treatment.
CSS rule
A complete CSS instruction that associates one or more declarations with document content.
declaration
One CSS setting made from a property and a value.
property
The named presentation feature that a CSS declaration sets.
value
The chosen setting assigned to a CSS property in a declaration.

Sources & references

  1. MDN Web Docs — What is CSS? — Mozilla / MDN Web Docs
  2. MDN Web Docs — Introduction to CSS syntax: declarations, rulesets, and statements — Mozilla / MDN Web Docs
  3. W3C — CSS Snapshot 2025 — W3C

EliExplains lessons are original prose written from the open, credible references above. See Copyright & Licensing.

Researched 2026-08-20

Educational content only. It is not medical, legal or professional advice. Found an error? Tell us.