CSS Basics: Giving Web Pages a Make‑over
Introduction
Have you ever wondered how a plain web page becomes colorful, organized, and easy to read? The secret sauce is CSS, which stands for Cascading Style Sheets. Think of CSS as the clothing and accessories that dress up the plain HTML “body” of a website. In this guide you’ll learn the building blocks of CSS, see real‑world examples, and even try a tiny experiment yourself!
1. What Is a “style” and Why Does It “cascade”?
- Style – the way something looks (color, size, shape).
- Cascade – a fancy word meaning “to flow down”. In CSS, rules that are written later can Override earlier ones, just like water flowing over rocks.
Cause & Effect:
If you set a paragraph’s text color to blue, the words become blue. Later, if you write another rule that says the same paragraph should be red, the red rule cascades over the blue one, so the text finally appears red.
Example:
p {
/* first rule */
color: blue;
}
p {
/* second rule, later in the file */
color: red; /* this wins! */
}2. The Three Main Parts of a CSS Rule
A CSS rule looks like a tiny recipe:
selector { property: value; }| Part | What It Does | Kid‑Friendly Explanation |
|---|---|---|
| Selector | Chooses the HTML element to style (e.g., h1, .button, #logo). | “Who are we dressing up?” |
| Property | The characteristic you want to change (e.g., color, font-size). | “What part of the outfit?” |
| Value | The exact setting (e.g., red, 24px). | “How we set it?” |
Did You Know? The word Pixel (px) comes from the tiny “picture element” that makes up your screen. One pixel is the smallest dot you can see on a monitor.
3. Adding Color, Size, and Space
A. Colors
Use names (red, green) or Hex Codes like #FF5733. A hex code is a six‑digit secret code for colors.
h1 {
color: #ff5733; /* bright orange‑red */
}B. Font Size
font-size decides how tall the letters are. The unit px (pixel) is common, but you can also use em (relative to the surrounding text).
p {
font-size: 18px; /* big enough to read */
}C. Spacing (margin & Padding)
- Margin – space outside an element, like the gap between two boxes.
- Padding – space inside an element, like the cushion between text and its border.
.card {
margin: 20px; /* space around the card */
padding: 15px; /* space inside the card */
}4. Mini Experiment: Style a Button
What You Need:
- A text editor (like Notepad or VS Code)
- A web browser
Steps:
- Create a file called
mypage.htmlwith this code:
<button class="cool-btn">Click Me!</button>- Add a
<style>tag in the<head>and write:
.cool-btn {
background-color: #10b981;
color: white;
padding: 12px 24px;
border: none;
border-radius: 8px;
font-size: 18px;
}- Open the file in your browser and see your styled button!
Challenge: Try changing the colors and padding to make the button your own.
Quick Quiz
| Question | Answer |
|---|---|
| What does CSS stand for? | Cascading Style Sheets |
| What are the three parts of a CSS rule? | Selector, Property, Value |
| What is the difference between margin and padding? | Margin is outside space; padding is inside space |
| What does “cascade” mean in CSS? | Later rules can override earlier ones |
Now you have the power to dress up any web page. Keep experimenting, and soon you’ll be a CSS stylist!