Structure stays in HTML
Use HTML for headings, paragraphs, links, forms and landmarks. Do not choose HTML tags because of their default look.
Platform under construction
CSS Introduction
Start CSS with the right mental model: HTML gives content meaning, CSS turns that structure into a readable, usable and professional interface.
.lesson-card {
padding: 2rem;
background: #101827;
color: #f7f9ff;
}
CSS Basics
CSS is the design language of the browser.
CSS stands for Cascading Style Sheets. It controls how HTML is presented: color, typography, spacing, layout, responsive behavior, animation and visual states.
The important word is presentation. HTML should describe what the content is. CSS should describe how that content looks and behaves visually. When those jobs stay separate, websites become easier to maintain and much easier to redesign.
Professional CSS is not a bag of tricks. It is a system of rules that the browser reads, compares and applies to elements. Good CSS makes a page feel calm, clear and intentional.
Presentation lives in CSS
Use CSS for layout, spacing, color, typography, animation and component states.
The browser computes styles
Your CSS is input. The browser resolves cascade, inheritance and layout into final pixels.
Design becomes repeatable
Classes, variables and shared rules turn one nice screen into a maintainable design system.
Visual model
Make the invisible browser work visible.
CSS becomes easier when you can see the parts: what is selected, what is declared, what the browser loads and what the final interface receives.
.lesson-card { color: #f7f9ff; padding: 2rem; }
Chooses which HTML elements receive the declarations.
Names the visual feature you want to change.
Defines the exact setting for that property.
One property-value pair inside the rule block.
Examples
Good CSS is readable, intentional and easy to change.
Clean separation of structure and presentation
<article class="lesson-card">
<p class="eyebrow">CSS Basics</p>
<h1>Structure first. Styling second.</h1>
<p>HTML carries meaning. CSS creates the interface.</p>
</article>
.lesson-card {
max-width: 680px;
padding: 2rem;
border-radius: 1.5rem;
background: #101827;
color: #f7f9ff;
}
Visual decisions scattered through HTML
<h1 style="font-size: 48px; color: white;">Title</h1> <p style="color: gray; margin-top: 20px;">Text</p> <div style="background: black; padding: 30px;"> Content with no reusable styling system </div>
Rules that matter
Use these rules before memorizing more properties.
Beginners often try to learn CSS by collecting declarations. That is backwards. Learn the decisions first, then the properties become much easier to remember.
Start with meaning
Write useful HTML first. If the content makes sense without CSS, the foundation is strong.
Style through reusable hooks
Classes are usually the best styling hook because they can be reused without changing semantic HTML.
Think in systems
Colors, spacing and typography should repeat intentionally instead of being invented on every element.
Inspect the browser result
CSS can be overwritten by other rules. DevTools shows what actually happened.
Avoid magic pixels
If a value only works on your screen by accident, it will probably break on another screen.
Test with real content
Long labels, short headings, mobile widths and empty states expose weak CSS fast.
Production thinking
CSS quality shows up in trust, accessibility and speed of change.
Why does this matter?
Users judge the quality of a website before they understand the backend. CSS controls that first impression: hierarchy, spacing, trust, readability and the feeling that someone cared about the details.
Accessibility
CSS must never hide meaning. Keep text readable, focus states visible, controls recognizable and contrast high enough for real users.
Production note
In production, CSS should be organized, searchable and reusable. A page can look good once and still be bad CSS if every rule is a one-off.
SEO note
Search engines read content and structure, but CSS affects engagement. A clear page is easier to read, easier to use and more likely to keep visitors from bouncing.
Live code lab
Change the CSS and watch the interface respond.
The preview runs in an isolated iframe. Links and forms stay inside the practice area, so you can experiment without leaving the lesson.
Mini assignment
Try this now.
- Change the background and card colors, but keep the text readable.
- Increase or reduce the padding and notice how the card feels immediately different.
- Change only CSS. The HTML should keep the same meaning.
Practice assignment
Do this before moving to the next lesson.
- Create a small HTML card with a heading, paragraph and link.
- Style it with a class selector, not inline CSS.
- Write down which CSS values changed hierarchy, spacing and trust.
Try it yourself
Turn plain HTML into a designed lesson card
Self-check
Before you continue, prove that you understand CSS Introduction.
Do not only read the lesson. Answer these questions out loud or write the answers in your own notes. CSS becomes real when you can explain what the browser is doing.
- Can you explain the difference between HTML meaning and CSS presentation?
- Can you point to the selector, property, value and declaration in a CSS rule?
- Can you explain why inline styling becomes hard to maintain?
- Can you identify one CSS choice that affects accessibility?
- Can you inspect a styled element and see which rule is applied?
Senior audit upgrade
Follow the full browser path from rule to pixels.
The introduction already explains HTML as meaning and CSS as presentation. The senior upgrade is to see the whole browser process: selector, declaration, cascade, computed style and rendered UI.
Selector
The browser first finds which elements a rule can affect.
Computed style
Cascade, inheritance and defaults combine into the final value for each property.
Rendered UI
Layout, paint and compositing turn those values into pixels the user experiences.
selector -> declaration -> cascade -> computed style -> layout -> paint