Getting Started
CSS Introduction
Understand what CSS is and create a first practical example.
CSS is a practical technology used to build real software. This introduction explains its role in plain language and gives you a small example to change.
Your first step
Read the example one line at a time. Predict the result, run it, and then change one value.
Important definitions
- CSS
- The technology explored in this course.
- Source code
- Instructions written by a developer.
- Output
- The result produced from source code.
Syntax
Use this general pattern as a reference:
CSS
selector { property: value; }Examples
Color a heading
EXAMPLE 1
h1 { color: rebeccapurple; }ResultThe heading becomes purple.
Add spacing
EXAMPLE 2
p { margin-block: 1rem; }ResultParagraphs gain vertical space.
COMPLETE EXAMPLE
.card { display: grid; gap: 1rem; }Expected output
Hello from CSS!
Note
Focus on the idea before memorizing punctuation.
Tip
Type the example yourself and change one part at a time.
Common mistakes
- Copying code without reading it.
- Changing several things before testing.
- Ignoring error messages.