CSS Styling Magic
CSS (Cascading Style Sheets) controls how a webpage LOOKS. HTML decides what content is on the page. CSS decides what color, font, size, and layout that content has. Without CSS, every webpage would look like a Word document from 1995.
Basic syntax: SELECTOR { property: value; }. Example: h1 { color: blue; font-size: 32px; }. This says "all <h1> elements should be blue, 32 pixels tall." Common properties: color (text color), background-color, font-family, font-size, padding (inside spacing), margin (outside spacing), border, display, width, height.
You want all paragraphs on your site to use a green color. Which CSS rule does that?
Three ways to add CSS. INLINE: <p style="color:green">. INTERNAL: a <style> block in the HTML <head>. EXTERNAL: a separate .css file linked via <link>. External is best for real sites — separates concerns and lets one stylesheet apply to many pages. Modern CSS also supports flexbox and grid for powerful layouts.
Style It
Take the HTML page you made earlier. Add a <style> block in the <head>: <style>body { font-family: sans-serif; background: lavender; } h1 { color: darkblue; }</style>. Reload — your page now has personality.
CSS is forgiving and powerful. With a few rules you can dramatically transform a page. Real websites have thousands of CSS rules — but they all build on the same simple selector + property + value pattern.
Want to keep learning?
Sign up for free to access the full curriculum — all subjects, all ages.
Start Learning Free