

W3Schools
CSS
Complete
Notes
Comprehensive CSS Tutorial
from Basic to Advanced
Source: w3schools.com

 Table of
Contents

1. CSS Introduction

2. CSS Syntax

3. CSS Selectors

4. CSS Box Model

5. CSS Flexbox

6. CSS Colors & Backgrounds

7. Responsive Design

8. Advanced Topics

9. CSS Reference

10. Practical Examples

 1. CSS
Introduction

What is CSS?

CSS stands for Cascading Style

Sheets

CSS describes how HTML elements

are to be displayed on screen, paper, or

in other media

CSS saves a lot of work. It can

control the layout of multiple web

pages all at once

External stylesheets are stored in

CSS files

 Why Use CSS?

CSS is used to define styles for

your web pages, including the

design, layout and variations in

display for different devices and

screen sizes.

CSS Example:

body {
background-color:
lightblue;
}

h1 {
color: white;
text-align: center;
}

p {
font-family:
verdana;
font-size: 20px;
}

 CSS Solved a Big Problem

HTML was NEVER intended to

contain tags for formatting a web

page! HTML was created to

describe the content of a web

page. When formatting tags were

added to HTML, it created a

nightmare for web developers.

CSS removed the style formatting

from the HTML page!

 CSS Saves a Lot of Work!

The style definitions are normally

saved in external .css files. With

an external stylesheet file, you can

change the look of an entire

website by changing just one file!

 2. CSS Syntax
A CSS rule consists of a selector

and a declaration block.

CSS Syntax Structure:

selector {
property: value;
property: value;
}

Selector

Points to the HTML element you

want to style

Declaration Block

Contains one or more declarations

separated by semicolons

Example:

p {
color: red;
text-align: center;
}

This example makes all <p> elements

center-aligned with red text color.

Example Explained:

p is a selector (points to the

HTML element you want to style:

<p>)

color is a property, and

red is the property value
text-align is a property,
and center is the property

value

 3. CSS Selectors
CSS selectors are used to "find" (or

select) the HTML elements you

want to style.

Five Categories of CSS

Selectors:

1. Simple selectors (select

elements based on name, id,

class)

2. Combinator selectors (select

elements based on a specific

relationship between them)

3. Pseudo-class selectors (select

elements based on a certain state)

4. Pseudo-elements selectors

(select and style a part of an

element)

5. Attribute selectors (select

elements based on an attribute or

attribute value)

The CSS Element Selector

The element selector selects HTML

elements based on the element name.

Example:

p {
text-align: center;
color: red;
}

All <p> elements will be center-

aligned with red text color.

The CSS ID Selector

The id selector uses the id attribute of

an HTML element to select a specific

element. The id of an element is unique

within a page!

Note: An id name cannot start

with a number!

Example:

#para1 {
text-align: center;
color: red;
}

Selects the HTML element with

id="para1"

The CSS Class Selector

The class selector selects HTML

elements with a specific class attribute.

To select elements with a specific class,

write a period (.) character, followed by

the class name.

Note: A class name cannot start

with a number!

Example 1 - All elements with

class="center":

.center {
text-align: center;
color: red;
}

Example 2 - Only <p> elements

with class="center":

p.center {
text-align: center;
color: red;
}

Example 3 - Multiple classes:

<p class="center
large">This paragraph
refers to two classes.
</p>

The CSS Universal Selector

The universal selector (*) selects all

HTML elements on the page.

Example:

* {
text-align: center;
color: blue;
}

Affects every HTML element on the

page.

The CSS Grouping Selector

The grouping selector selects all the

HTML elements with the same style

definitions. To group selectors, separate

each selector with a comma.

Example:

h1, h2, p {
text-align: center;
color: red;
}

Groups h1, h2, and p elements with the

same styling.

All CSS Simple Selectors

Selector Example

#id #firstna

.class .intro

* *

element p

element,element div, p

 4. CSS Box
Model

All HTML elements can be

considered as boxes. In CSS, the

term "box model" is used when

talking about design and layout.

The CSS box model consists of:

Content - The content of the

box, where text and images

appear

Padding - Clears an area

around the content. The padding

is transparent

Border - A border that goes

around the padding and content

Margin - Clears an area

outside the border. The margin is

transparent

Box Model Demonstration:

div {
width: 300px;
border: 15px solid
green;
padding: 50px;
margin: 20px;
}

 Important: Width and

Height Calculation

When you set the width and

height properties of an element

with CSS, you just set the width

and height of the content area.

To calculate the total width and

height of an element, you must

also include the padding and

borders.

Total Width/Height Calculation

Example:

div {
width: 320px;
height: 50px;
padding: 10px;
border: 5px solid
gray;
margin: 0;
}

Total Width Calculation:

320px (width) + 20px (left + right

padding) + 10px (left + right border) =
350px total width

Total Height Calculation:

50px (height) + 20px (top + bottom

padding) + 10px (top + bottom border)
= 80px total height

Formulas to Remember:

Total element width = width + left

padding + right padding + left border +
right border

Total element height = height + top

padding + bottom padding + top border
+ bottom border

Note: The margin property affects the total

space that the box takes up on the page, but is
not included in the actual size of the box.

 5. CSS Flexbox
What is CSS Flexbox?

Flexbox is short for the

Flexible Box Layout module

Flexbox is a layout method for

arranging items in rows or

columns

Flexbox makes it easier to

design a flexible responsive

layout structure, without using

float or positioning

 Flexbox vs. Grid

CSS Flexbox Layout should

be used for one-dimensional

layout, with rows OR columns

CSS Grid Layout should be

used for two-dimensional layout,

with rows AND columns

CSS Flexbox Components

Flex Container

The parent (container) element

Flex Items

The items inside the container

Creating a Flex Container:

<div class="flex-
container">
<div>1</div>
<div>2</div>
<div>3</div>
</div>

.flex-container {
display: flex;
}

The flex container becomes flexible by

setting the display property to flex.

Before Flexbox - Layout

Modes:

Block - for sections in a

webpage

Inline - for text

Table - for two-dimensional

table data

Positioned - for explicit

position of an element

 6. CSS Colors &

Backgrounds

CSS Color Values

Color Names

Predefined names like "red", "blue",

"green"

color: red;

HEX Values

Hexadecimal color codes

color: #ff0000;

RGB Values

Red, Green, Blue values

color: rgb(255,0,0);

Background Properties

Background Color Examples:

body {
background-color:
lightblue;
}

.highlight {
background-color:
#ffff00;
}

.transparent {
background-color:
rgba(255, 0, 0, 0.5);
}

CSS Gradients

CSS gradients let you display

smooth transitions between two

or more specified colors.

CSS defines three types of gradients:

Linear, Radial, and Conic gradients.

 7. Responsive
Design & Media
Queries

What is Responsive Web

Design?

It is called responsive web design

when you use CSS and HTML to

resize, hide, shrink, enlarge, or

move the content to make it look

good on any screen.

Media Queries

Media query is a CSS technique

introduced in CSS3. It uses the

@media rule to include a block of CSS

properties only if a certain condition is

true.

Basic Media Query Syntax:

@media screen and

(max-width: 600px) {
body {
background-color:
lightblue;
}
}

This applies styles only when the

screen width is 600px or less.

Common Device Breakpoints:

/* Extra small devices

(phones, 600px and
down) */
@media only screen and
(max-width: 600px)
{...}

/* Small devices
(portrait tablets and
large phones, 600px
and up) */
@media only screen and
(min-width: 600px)
{...}

/* Medium devices
(landscape tablets,
768px and up) */
@media only screen and
(min-width: 768px)
{...}

/* Large devices
(laptops/desktops,
992px and up) */
@media only screen and
(min-width: 992px)
{...}

/* Extra large devices

(large laptops and
desktops, 1200px and
up) */
@media only screen and
(min-width: 1200px)
{...}

 Viewport Meta Tag

Always include the viewport meta

tag in your HTML head section

for proper responsive behavior:

<meta name="viewport"
content="width=device-
width, initial-
scale=1.0">

 8. Advanced
CSS Topics

CSS Grid Layout

CSS Grid Layout should be used

for two-dimensional layout, with

rows AND columns.

.grid-container {
display: grid;
grid-template-
columns: auto auto
auto;
}

CSS Animations

CSS animations allow you to

animate elements without

JavaScript.

@keyframes slide-in {
from { left: -100%; }
to { left: 0%; }
}

CSS Variables

CSS variables allow you to reuse

values throughout your stylesheet.

:root {
--main-color:
#007acc;
}

.header {
color: var(--main-
color);
}

CSS Specificity

Specificity determines which CSS

rule is applied when multiple

rules target the same element.

Order: Inline styles > IDs > Classes >

Elements

 9. CSS Quick
Reference

Text Properties

color - Text color

font-family - Font type
font-size - Font size
font-weight - Font thickness
text-align - Text alignment
text-decoration - Text
decoration

line-height - Line spacing

Layout Properties

display - Display type

position - Positioning method
float - Float direction
clear - Clear floats
overflow - Overflow behavior
visibility - Element visibility
z-index - Stack order

Box Model Properties

width - Element width

height - Element height
margin - Outer spacing
padding - Inner spacing
border - Border properties
box-sizing - Box calculation
outline - Outline properties

Background Properties

background-color - Background
color

background-image - Background
image

background-repeat - Image
repeat

background-position - Image
position

background-size - Image size

background-attachment -
Image attachment

background - Shorthand property

Flexbox Properties

display: flex - Flex container

flex-direction - Flex direction
justify-content - Main axis
alignment

align-items - Cross axis

alignment

flex-wrap - Wrap behavior

flex-grow - Grow factor
flex-shrink - Shrink factor

Animation Properties

transition - Transition effects

animation - Animation properties
transform - Transform elements
@keyframes - Animation steps
animation-duration -
Animation time

animation-delay - Animation
delay

animation-iteration-count -
Repeat count

 10. Practical
Examples

Example 1: Centered

Card Layout

<!-- HTML -->

<div class="card-
container">
<div class="card">
<h3>Card
Title</h3>
<p>Card content
goes here...</p>
<button>Read
More</button>
</div>
</div>

/* CSS */
.card-container {
display: flex;
justify-content:
center;
align-items:
center;
min-height: 100vh;
background-color:
#f0f0f0;
}

.card {
background: white;
padding: 2rem;
border-radius:
8px;
box-shadow: 0 4px
6px rgba(0, 0, 0,
0.1);
max-width: 400px;
text-align:
center;
}

.card h3 {
color: #333;
margin-bottom:
1rem;
}

.card button {
background-color:
#007acc;
color: white;
border: none;
padding: 0.5rem
1rem;
border-radius:
4px;
cursor: pointer;
}

Example 2: Responsive

Navigation

<!-- HTML -->

<nav class="navbar">
<div class="nav-
brand">Logo</div>
<ul class="nav-
menu">
<li><a
href="#">Home</a>
</li>
<li><a
href="#">About</a>
</li>
<li><a
href="#">Services</a
></li>
<li><a
href="#">Contact</a>
</li>
</ul>
</nav>

/* CSS */
.navbar {
display: flex;
justify-content:
space-between;
align-items:
center;
padding: 1rem
2rem;
background-color:
#333;
color: white;
}

.nav-brand {
font-size: 1.5rem;
font-weight: bold;
}

.nav-menu {
display: flex;
list-style: none;
margin: 0;
padding: 0; Made with Genspark
}
 .nav-menu li {
margin-left: 2rem;
}

.nav-menu a {
color: white;
text-decoration:
none;
transition: color
0.3s;
}

.nav-menu a:hover {
color: #007acc;
}

/* Mobile Responsive
*/
@media screen and
(max-width: 768px) {
.navbar {
flex-direction:
column;
}

.nav-menu {
margin-top:
1rem;
}

.nav-menu li {
margin: 0 1rem;
}
}

Example 3: CSS Grid

Layout

<!-- HTML -->

<div class="grid-
container">
<div class="grid-
item
header">Header</div>
<div class="grid-
item
sidebar">Sidebar</di
v>
<div class="grid-
item main">Main
Content</div>
<div class="grid-
item
footer">Footer</div>
</div>

/* CSS */
.grid-container {
display: grid;
grid-template-
areas:
"header header"
"sidebar main"
"footer footer";
grid-template-
columns: 200px 1fr;
grid-template-
rows: auto 1fr auto;
min-height: 100vh;
gap: 10px;
}

.grid-item {
padding: 1rem;
background-color:
#f0f0f0;
border: 1px solid
#ddd;
}

.header { grid-area:
header; background-
color: #007acc;
color: white; }
.sidebar { grid-
area: sidebar;
background-color:
#e9ecef; }
.main { grid-area:
main; background-
color: white; }
.footer { grid-area:
footer; background-
color: #6c757d;
color: white; }

/* Responsive */
@media screen and
(max-width: 768px) {
.grid-container {
grid-template-
areas:
"header"
"main"
"sidebar"
"footer";
grid-template-
columns: 1fr;
}
}

 Learning
Resources & Next
Steps

Practice Platforms

• W3Schools CSS Exercises

• CSS-Tricks for advanced

techniques

• CodePen for experimenting

• MDN Web Docs for detailed

references

Advanced Topics to

Explore

• CSS Preprocessing (Sass, Less)

• CSS Frameworks (Bootstrap,

Tailwind)

• CSS Architecture (BEM,

SMACSS)

• CSS-in-JS solutions

 W3Schools CSS Complete Notes

Content sourced from w3schools.com |
Organized for comprehensive learning

 Last updated: 2025