📚 Foundation Level: CSS Basics

What is CSS?

CSS (Cascading Style Sheets) controls how HTML elements look on a webpage. It separates content (HTML) from presentation (styling).

Basic CSS syntax:
selector { property: value; }

Basic Selectors

CSS selectors target HTML elements to apply styles:

Element selector:
h1 { color: green; }
Targets all <h1> elements

Class selector:
.topic { padding: 20px; }
Targets elements with class="topic"

ID selector:
#header { font-size: 24px; }
Targets element with id="header"

Colors

CSS supports multiple ways to specify colors:

Named colors: color: red; background-color: blue;
Hex codes: color: #4CAF50; background-color: #f5f5f5;
RGB: color: rgb(255, 0, 0);
RGBA: color: rgba(255, 0, 0, 0.5); (with transparency)

Text Styling

Control how text appears on the page:

font-family: Arial, sans-serif; - Choose fonts
font-size: 16px; - Text size
font-weight: bold; - Bold text
color: #333; - Text color
text-align: center; - Alignment
line-height: 1.8; - Space between lines

The Box Model

Every HTML element is a rectangular box with these parts:

Content: The actual content (text, images)
Padding: Space inside the box, around content
Border: A line around the padding
Margin: Space outside the box, between elements

padding: 20px; - Space inside
border: 1px solid #ddd; - Border line
margin: 10px; - Space outside

Backgrounds and Borders

Background color:
background-color: #f5f5f5;

Border:
border: 1px solid #ddd;
width style color

Border on one side:
border-left: 3px solid #4CAF50;

Width and Height

Control the size of elements:

width: 100px; - Fixed width
max-width: 1000px; - Maximum width
height: 50px; - Fixed height
margin: 0 auto; - Center horizontally

Display Property

Controls how elements behave in the layout:

display: block; - Takes full width (like <div>, <p>)
display: inline; - Flows with text (like <span>, <a>)
display: none; - Hides the element completely

📝 This Page's CSS Features:

Simple solid colors (no gradients)
Basic fonts (Arial)
Simple borders (1px solid)
Basic spacing with margin and padding
No flexbox or grid layouts
No hover effects or transitions
No shadows or rounded corners

Compare this to the Beginner page to see the progression!