What is CSS?
CSS stands for Cascading Style Sheets. It's the language that styles your web pages — colors, fonts, spacing, and layout. HTML is the skeleton, CSS is the skin and clothes! You write CSS rules that say: 'target this element, apply these styles'. One CSS file can control the look of an entire websit…
Appy Says…
CSS transforms plain HTML into real websites with colour, fonts, spacing, and animations. One stylesheet change can instantly update every page of your app. That's the power of separating content from presentation.
What is CSS?
CSS (Cascading Style Sheets) is the language that styles HTML. A CSS rule targets elements with a selector and applies visual changes via declarations (property: value pairs).
- •Syntax:
selector { property: value; } - •
color,background-color,font-size,margin,padding - •Three ways to apply CSS: external file (best),
<style>tag, inlinestyleattribute - •The 'cascade' means later/more-specific rules override earlier ones
Think of it like a game skin
HTML is the character model; CSS is the skin. Swap the skin and the whole look changes without touching the model. One stylesheet = one skin applied to your entire site.
How It Works
- •1. Link:
<link rel="stylesheet" href="style.css">in<head> - •2. Selector targets elements:
h1 { color: teal; } - •3. Multiple declarations:
p { color: #333; line-height: 1.6; font-size: 1rem; } - •4. Browser reads top-to-bottom; last matching rule wins (when specificity is equal)
- •5. Use DevTools → Elements → Styles to see which rules apply to any element
Real-World Examples
- •Spotify's dark interface: CSS
background: #121212; color: #fff; - •TikTok's red/pink brand colour defined as a CSS variable used everywhere
- •Google's search results page — clean white, precise spacing, all CSS
Key Facts
- •CSS was created in 1996 — it's older than most developers using it today
- •There are over 550 CSS properties; you'll use about 50 regularly
- •The cascade and specificity rules are the source of most CSS confusion — understand them early
Watch Out!
Inline styles (style="..." on an element) have very high specificity and are hard to override. Use external stylesheets and classes — inline styles should only be used when values are dynamic (set by JavaScript).
Remember
External stylesheet > <style> tag > inline. Use classes for reusable styles, IDs only for unique elements.
What You Learned
- •CSS rules: selector + { property: value; } — applied via external stylesheet
- •The cascade: later/more-specific rules override earlier ones
- •Unlocks: colours, fonts, spacing, and all visual design on the web
Key Facts
- →CSS was created in 1996 — it's older than most developers using it today
- →There are over 550 CSS properties; you'll use about 50 regularly
- →The cascade and specificity rules are the source of most CSS confusion — understand them early
Real-World Examples
Remember
External stylesheet > <style> tag > inline. Use classes for reusable styles, IDs only for unique elements.
Quick Quiz
What does CSS stand for?