Welcome to CSS!
CSS (Cascading Style Sheets) is what makes websites look beautiful. While HTML provides the structure, CSS is the designer—it controls colors, layouts, fonts, animations, and every visual aspect of your website. Master CSS, and you can turn any plain webpage into a stunning visual experience!
Remember our house analogy? If HTML is the frame and walls, CSS is everything that makes the house feel like home—the paint colors, the furniture arrangement, the lighting, the decorations. Without CSS, every website would look like a plain text document from the 1990s. With CSS, you can create modern, professional designs that captivate users.
The beautiful thing about CSS is that it's completely separate from HTML. This means you can redesign an entire website's look without touching a single line of HTML code. Want to change your site from blue to green? Update one CSS file. Need to make your site work on mobile? Add some CSS rules. It's that powerful!
Why Learn CSS?
- Make websites beautiful - Transform boring HTML into professional, eye-catching designs
- Responsive design - Create layouts that automatically adapt to phones, tablets, and desktops
- Animations without code - Add smooth transitions, hover effects, and animations without JavaScript
- Career essential - Every web designer and frontend developer must know CSS
- Modern layout tools - Flexbox and Grid make complex layouts simple
- Complete control - Style every pixel exactly how you want it
- Constantly evolving - New CSS features are added regularly, making design easier
Chapter 1: CSS Basics
Three Ways to Add CSS
There are three methods to add CSS to your HTML. Each has its purpose, but you'll mostly use external CSS for real projects:
1. Inline CSS (Not Recommended)
CSS written directly on an HTML element using the style attribute. Avoid this—it mixes content with styling and makes maintenance difficult.
<p style="color: blue; font-size: 18px;">This is inline CSS</p>
When to use: Only for quick tests or email HTML (where external CSS doesn't work). Otherwise, never use this in production websites.
2. Internal CSS (Good for Single Pages)
CSS written in a <style> tag inside the HTML <head>. Useful for single-page sites or page-specific styles.
<head>
<style>
p {
color: blue;
font-size: 18px;
}
</style>
</head>
When to use: One-page landing pages, or when you need styles specific to a single page that won't be reused.
3. External CSS (Best Practice) ⭐
CSS written in a separate .css file and linked to your HTML. This is the professional approach and what you'll use 99% of the time.
<head>
<link rel="stylesheet" href="styles.css">
</head>
/* styles.css - Separate file */
p {
color: blue;
font-size: 18px;
}
Why external CSS is best:
- Reusable: One CSS file can style multiple HTML pages
- Maintainable: Change colors/fonts once, updates everywhere
- Faster: Browsers cache CSS files, making your site load faster
- Organized: Keeps HTML and CSS separate—easier to manage
- Team-friendly: Designers can work on CSS while developers work on HTML
CSS Syntax
selector {
property: value;
property: value;
}
/* Example */
h1 {
color: #333;
font-size: 32px;
font-weight: bold;
}
Chapter 2: Selectors
Basic Selectors
/* Element Selector - selects all p tags */
p {
color: blue;
}
/* Class Selector - selects elements with class="highlight" */
.highlight {
background-color: yellow;
}
/* ID Selector - selects element with id="header" */
#header {
font-size: 24px;
}
/* Universal Selector - selects everything */
* {
margin: 0;
padding: 0;
}
Combinator Selectors
/* Descendant Selector - all p inside div */
div p {
color: red;
}
/* Child Selector - direct children only */
div > p {
color: blue;
}
/* Adjacent Sibling - immediately after */
h1 + p {
font-weight: bold;
}
/* General Sibling - all siblings after */
h1 ~ p {
margin-left: 20px;
}
Pseudo-classes
/* Link states */
a:link { color: blue; }
a:visited { color: purple; }
a:hover { color: red; }
a:active { color: orange; }
/* First and last */
li:first-child { font-weight: bold; }
li:last-child { border-bottom: none; }
/* Nth child */
tr:nth-child(even) { background: #f0f0f0; }
tr:nth-child(odd) { background: white; }
/* Form states */
input:focus { border-color: blue; }
input:disabled { opacity: 0.5; }
input:checked { background: green; }
Pseudo-elements
/* Before and After */
p::before {
content: "→ ";
color: blue;
}
p::after {
content: " ✓";
color: green;
}
/* First letter and line */
p::first-letter {
font-size: 2em;
font-weight: bold;
}
p::first-line {
color: #333;
font-variant: small-caps;
}
Chapter 3: Colors and Backgrounds
Color Values
/* Named colors */
color: red;
color: blue;
/* Hex colors */
color: #ff0000;
color: #00f; /* shorthand */
/* RGB */
color: rgb(255, 0, 0);
/* RGBA (with transparency) */
color: rgba(255, 0, 0, 0.5);
/* HSL (Hue, Saturation, Lightness) */
color: hsl(0, 100%, 50%);
/* HSLA (with transparency) */
color: hsla(0, 100%, 50%, 0.5);
Backgrounds
/* Background color */
background-color: #f0f0f0;
/* Background image */
background-image: url('image.jpg');
/* Background properties */
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
background-attachment: fixed;
/* Shorthand */
background: #f0f0f0 url('image.jpg') no-repeat center/cover;
/* Gradient backgrounds */
background: linear-gradient(to right, #ff0000, #00ff00);
background: radial-gradient(circle, #ff0000, #00ff00);
Chapter 4: Box Model
Every HTML element is a box. Understanding the box model is crucial for layout!
.box {
/* Content */
width: 300px;
height: 200px;
/* Padding - space inside border */
padding: 20px;
padding-top: 10px;
padding-right: 15px;
padding-bottom: 10px;
padding-left: 15px;
/* Border */
border: 2px solid #333;
border-radius: 10px;
/* Margin - space outside border */
margin: 20px;
margin: 10px 20px; /* top/bottom left/right */
margin: 10px 15px 20px 15px; /* top right bottom left */
}
/* Box-sizing - changes how width/height calculated */
* {
box-sizing: border-box; /* Includes padding & border in width */
}
Box Model Formula
Total Width = width + padding-left + padding-right + border-left + border-right + margin-left + margin-right
With box-sizing: border-box, padding and border are included in the width!
Chapter 5: Text Styling
/* Font family */
font-family: 'Arial', sans-serif;
font-family: 'Georgia', serif;
font-family: 'Courier New', monospace;
/* Font size */
font-size: 16px;
font-size: 1.2em;
font-size: 1.5rem;
/* Font weight */
font-weight: normal; /* 400 */
font-weight: bold; /* 700 */
font-weight: 600;
/* Font style */
font-style: normal;
font-style: italic;
/* Text alignment */
text-align: left;
text-align: center;
text-align: right;
text-align: justify;
/* Text decoration */
text-decoration: none;
text-decoration: underline;
text-decoration: line-through;
/* Text transform */
text-transform: uppercase;
text-transform: lowercase;
text-transform: capitalize;
/* Line height */
line-height: 1.5;
line-height: 24px;
/* Letter spacing */
letter-spacing: 2px;
/* Word spacing */
word-spacing: 5px;
/* Text shadow */
text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
Chapter 6: Flexbox Layout
Flexbox (Flexible Box Layout) is a game-changer for CSS layouts. Before Flexbox, creating flexible, responsive layouts required complicated tricks and hacks. Now, it's simple and intuitive!
Think of Flexbox like organizing items on a shelf: You can arrange items horizontally or vertically, space them evenly, align them to the top or bottom, and make them flexible so they adjust when you add or remove items. That's exactly what Flexbox does for your web layouts!
Flexbox works with two components: a container (the parent element) and items (the children). You set properties on the container to control how items are arranged, and properties on items to control their individual behavior.
/* Container (parent) */
.container {
display: flex;
/* Direction */
flex-direction: row; /* row | row-reverse | column | column-reverse */
/* Wrap */
flex-wrap: wrap; /* nowrap | wrap | wrap-reverse */
/* Justify content (main axis) */
justify-content: center; /* flex-start | flex-end | center | space-between | space-around | space-evenly */
/* Align items (cross axis) */
align-items: center; /* flex-start | flex-end | center | stretch | baseline */
/* Gap between items */
gap: 20px;
}
/* Items (children) */
.item {
/* Grow */
flex-grow: 1;
/* Shrink */
flex-shrink: 1;
/* Basis (initial size) */
flex-basis: 200px;
/* Shorthand */
flex: 1; /* grow shrink basis */
/* Individual alignment */
align-self: flex-end;
}
Flexbox Demo
Item 1
Item 2
Item 3
Chapter 7: CSS Grid Layout
Grid is perfect for two-dimensional layouts!
/* Container */
.grid-container {
display: grid;
/* Define columns */
grid-template-columns: 200px 200px 200px;
grid-template-columns: 1fr 1fr 1fr; /* equal fractions */
grid-template-columns: repeat(3, 1fr); /* shorthand */
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* responsive */
/* Define rows */
grid-template-rows: 100px 200px;
grid-template-rows: auto;
/* Gap */
gap: 20px;
row-gap: 20px;
column-gap: 10px;
/* Align content */
justify-items: center;
align-items: center;
}
/* Items */
.grid-item {
/* Span columns */
grid-column: 1 / 3; /* start / end */
grid-column: span 2; /* span 2 columns */
/* Span rows */
grid-row: 1 / 3;
grid-row: span 2;
}
Grid Demo
1
2
3
4
5
6
Chapter 8: Positioning
/* Static (default) */
position: static;
/* Relative - relative to normal position */
position: relative;
top: 10px;
left: 20px;
/* Absolute - relative to nearest positioned ancestor */
position: absolute;
top: 0;
right: 0;
/* Fixed - relative to viewport */
position: fixed;
bottom: 20px;
right: 20px;
/* Sticky - toggles between relative and fixed */
position: sticky;
top: 0;
/* Z-index - stacking order */
z-index: 100;
Chapter 9: Responsive Design
Media Queries
/* Mobile first approach */
.container {
width: 100%;
}
/* Tablet */
@media (min-width: 768px) {
.container {
width: 750px;
}
}
/* Desktop */
@media (min-width: 1024px) {
.container {
width: 1000px;
}
}
/* Large desktop */
@media (min-width: 1200px) {
.container {
width: 1170px;
}
}
/* Dark mode */
@media (prefers-color-scheme: dark) {
body {
background: #1a1a1a;
color: white;
}
}
/* Print styles */
@media print {
.no-print {
display: none;
}
}
Responsive Units
/* Viewport units */
width: 100vw; /* 100% of viewport width */
height: 100vh; /* 100% of viewport height */
font-size: 5vmin; /* 5% of smaller dimension */
font-size: 5vmax; /* 5% of larger dimension */
/* Percentage */
width: 50%; /* relative to parent */
/* Em and Rem */
font-size: 1.5em; /* relative to parent font size */
font-size: 1.5rem; /* relative to root font size */
Chapter 10: Transitions and Animations
Transitions
.button {
background: blue;
/* Transition properties */
transition-property: background, transform;
transition-duration: 0.3s;
transition-timing-function: ease-in-out;
transition-delay: 0.1s;
/* Shorthand */
transition: all 0.3s ease-in-out;
}
.button:hover {
background: darkblue;
transform: scale(1.1);
}
Keyframe Animations
/* Define animation */
@keyframes slideIn {
0% {
transform: translateX(-100%);
opacity: 0;
}
100% {
transform: translateX(0);
opacity: 1;
}
}
/* Apply animation */
.element {
animation-name: slideIn;
animation-duration: 1s;
animation-timing-function: ease-out;
animation-delay: 0.5s;
animation-iteration-count: infinite;
animation-direction: alternate;
/* Shorthand */
animation: slideIn 1s ease-out 0.5s infinite alternate;
}
Transform Properties
/* 2D Transforms */
transform: translate(50px, 100px);
transform: translateX(50px);
transform: translateY(100px);
transform: rotate(45deg);
transform: scale(1.5);
transform: scaleX(2);
transform: skew(10deg, 20deg);
/* 3D Transforms */
transform: rotateX(45deg);
transform: rotateY(45deg);
transform: perspective(500px) rotateY(45deg);
/* Multiple transforms */
transform: translateX(50px) rotate(45deg) scale(1.2);
Chapter 11: Advanced Techniques
CSS Variables (Custom Properties)
/* Define variables */
:root {
--primary-color: #3498db;
--secondary-color: #2ecc71;
--font-size: 16px;
--spacing: 20px;
}
/* Use variables */
.button {
background: var(--primary-color);
font-size: var(--font-size);
padding: var(--spacing);
}
/* With fallback */
color: var(--text-color, #333);
CSS Filters
img {
filter: blur(5px);
filter: brightness(1.5);
filter: contrast(1.5);
filter: grayscale(100%);
filter: hue-rotate(90deg);
filter: invert(100%);
filter: opacity(50%);
filter: saturate(200%);
filter: sepia(100%);
/* Multiple filters */
filter: brightness(1.2) contrast(1.1) saturate(1.3);
}
Shadows
/* Box shadow */
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2), 0 6px 6px rgba(0, 0, 0, 0.15);
/* Text shadow */
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
text-shadow: 0 0 10px #fff, 0 0 20px #fff; /* glow effect */
Chapter 12: Best Practices
CSS Best Practices
- Use external stylesheets - Better organization and caching
- Use meaningful class names - .btn-primary, not .blue-button
- Follow BEM naming - Block__Element--Modifier
- Mobile-first approach - Start with mobile, enhance for desktop
- Use CSS variables - Easier theme management
- Minimize specificity - Avoid overly specific selectors
- Group related properties - Keep code organized
- Use shorthand properties - More concise code
- Validate your CSS - Use W3C CSS validator
- Optimize for performance - Minimize repaints and reflows
Common Mistakes to Avoid
Watch Out For These!
- Using !important - Makes code hard to maintain
- Over-qualifying selectors - div.class instead of .class
- Not using reset/normalize CSS - Browser inconsistencies
- Fixed widths everywhere - Breaks responsive design
- Too many nested selectors - Hard to override
- Forgetting vendor prefixes - Browser compatibility issues
- Not testing on mobile - Always test responsive designs
Quick Reference Table
| Category | Key Properties |
|---|---|
| Layout | display, position, float, clear, overflow |
| Flexbox | flex-direction, justify-content, align-items, flex-wrap |
| Grid | grid-template-columns, grid-template-rows, gap |
| Box Model | width, height, margin, padding, border |
| Typography | font-family, font-size, font-weight, line-height |
| Colors | color, background-color, opacity |
| Effects | box-shadow, text-shadow, filter, transform |
| Animation | transition, animation, @keyframes |
Continue Your Learning Journey
Now that you've mastered CSS, you're ready to add interactivity with JavaScript!
Learn JavaScript Next →