CSS Tutorial
Learn CSS step by step with easy examples
What is CSS?
CSS stands for Cascading Style Sheets. While HTML provides the structure and content of a web page, CSS controls how it looks - the colors, fonts, layout, spacing, and overall design.
Think of it this way:
- HTML = The skeleton and organs of a body
- CSS = The skin, clothes, and appearance
CSS Syntax
CSS rules are made up of a selector and declarations:
css
1/* This is a CSS comment */
2h1 {
3 color: #ce9178]">blue;
4 font-size: #ce9178]">24px;
5 text-align: #ce9178]">center;
6}
Breaking it down:
- h1Selector - Tells CSS which HTML element to style
- { }Declaration block - Contains the style rules
- colorProperty - What aspect to style
- blueValue - How to style it
How to Add CSS to HTML
There are three ways to add CSS to your HTML:
1. Inline CSS
Directly in HTML elements
html
1
text-[#9cdcfe]
">style="color: red; font-size: 30px;">2 Red Heading
3
4
5
text-[#9cdcfe]
">style="color: blue; font-weight: bold;">6 Blue paragraph
7
Quick but not recommended for large projects
2. Internal CSS
In the HTML head section
html
1
2
12
Good for single-page styling
3. External CSS
Separate CSS file
html
1
2text-[#9cdcfe]">rel="stylesheet" text-[#9cdcfe]">href="styles.css">
3
4/* In styles.css file */
5h1 {
6 color: red;
7 font-size: 30px;
8}
9p {
10 color: blue;
11 font-weight: bold;
12}
Best for multiple pages
CSS Selectors
Selectors tell CSS which HTML elements to style. Here are the most common ones:
Element Selectors
Select by HTML tag name
css
1/* Styles ALL h1 elements */
2h1 {
3 color: #ce9178]">blue;
4}
5
6/* Styles ALL paragraphs */
7p {
8 font-size: #ce9178]">16px;
9}
10
11/* Styles ALL links */
12a {
13 color: #ce9178]">green;
14 text-decoration: #ce9178]">none;
15}
Class Selectors
Select by class attribute
css
1/* HTML */
2
This paragraph is highlighted
3
This is a warning
4
5/* CSS */
6.highlight {
7 background-color: #ce9178]">yellow;
8 padding: #ce9178]">10px;
9}
10
11.warning {
12 color: #ce9178]">red;
13 font-weight: #ce9178]">bold;
14}
ID Selectors
Select by ID attribute
css
1/* HTML */
2
Welcome to My Site
3
4
5/* CSS */
6#main-title {
7 text-align: #ce9178]">center;
8 color: #ce9178]">purple;
9}
10
11#sidebar {
12 width: #ce9178]">300px;
13 background-color: #ce9178]">lightgray;
14}
Multiple Selectors
Style multiple elements at once
css
1/* Style h1, h2, and h3 the same way */
2h1, h2, h3 {
3 font-family: #ce9178]">Arial, sans-serif;
4 color: #ce9178]">darkblue;
5}
6
7/* Style all paragraphs and divs */
8p, div {
9 line-height: #ce9178]">1.5;
10 margin-bottom: #ce9178]">15px;
11}
Colors
CSS offers several ways to specify colors:
css
1/* Color names (140 predefined colors) */
2h1 {
3 color: #ce9178]">red;
4 background-color: #ce9178]">lightblue;
5}
6
7/* Hex colors (most common) */
8h2 {
9 color: #ce9178]">#ff0000; /* Red */
10 background-color: #ce9178]">#00ff00; /* Green */
11}
12
13/* RGB colors */
14h3 {
15 color: #ce9178]">rgb(255, 0, 0); /* Red */
16 background-color: #ce9178]">rgb(0, 255, 0); /* Green */
17}
18
19/* RGBA colors (with transparency) */
20h4 {
21 color: #ce9178]">rgba(255, 0, 0, 0.5); /* Semi-transparent red */
22 background-color: #ce9178]">rgba(0, 0, 255, 0.3); /* Semi-transparent blue */
23}
Color Tips:
- • Use hex colors (#ff0000) for precise control
- • Use color names (red, blue) for quick testing
- • Use RGBA for transparency effects
- • Test colors for accessibility (contrast)
Text Styling
Make your text look exactly how you want:
Font Properties
Control font appearance
css
1h1 {
2 font-family: #ce9178]">Arial, sans-serif;
3 font-size: #ce9178]">32px;
4 font-weight: #ce9178]">bold;
5 font-style: #ce9178]">italic;
6}
7
8p {
9 font-family: #ce9178]">"Times New Roman", serif;
10 font-size: #ce9178]">16px;
11 font-weight: #ce9178]">normal;
12 line-height: #ce9178]">1.5;
13}
Text Properties
Control text alignment and decoration
css
1.center {
2 text-align: #ce9178]">center;
3}
4
5.right {
6 text-align: #ce9178]">right;
7}
8
9.underline {
10 text-decoration: #ce9178]">underline;
11}
12
13.uppercase {
14 text-transform: #ce9178]">uppercase;
15}
16
17.spaced {
18 letter-spacing: #ce9178]">2px;
19}
The Box Model
Every HTML element is a rectangular box. The box model describes how space is calculated:
Content
Padding
Border
Margin
css
1.box {
2 /* Content area */
3 width: #ce9178]">300px;
4 height: #ce9178]">200px;
5
6 /* Padding - space inside the box */
7 padding: #ce9178]">20px;
8
9 /* Border - line around the box */
10 border: #ce9178]">2px solid black;
11
12 /* Margin - space outside the box */
13 margin: #ce9178]">10px;
14
15 /* Background color */
16 background-color: #ce9178]">lightblue;
17}
Box Model Properties:
- Content: The actual content (text, images)
- Padding: Space between content and border
- Border: Line around the padding
- Margin: Space outside the border
Basic Layout
Learn how to position and arrange elements on your page:
Display Property
Control how elements behave
css
1/* Block elements take full width */
2.block {
3 display: #ce9178]">block;
4 background-color: #ce9178]">lightblue;
5 padding: #ce9178]">10px;
6 margin: #ce9178]">5px 0;
7}
8
9/* Inline elements sit side by side */
10.inline {
11 display: #ce9178]">inline;
12 background-color: #ce9178]">lightgreen;
13 padding: #ce9178]">5px;
14}
15
16/* Inline-block combines both */
17.inline-block {
18 display: #ce9178]">inline-block;
19 width: #ce9178]">100px;
20 height: #ce9178]">50px;
21 background-color: #ce9178]">lightyellow;
22 margin: #ce9178]">5px;
23}
Float Property
Make elements float left or right
css
1/* Float image to the left */
2.float-left {
3 float: #ce9178]">left;
4 margin: #ce9178]">0 15px 15px 0;
5}
6
7/* Float image to the right */
8.float-right {
9 float: #ce9178]">right;
10 margin: #ce9178]">0 0 15px 15px;
11}
12
13/* Clear floats */
14.clear {
15 clear: #ce9178]">both;
16}
Responsive Design Basics
Make your website look good on all devices with media queries:
css
1/* Base styles for all devices */
2.container {
3 width: #ce9178]">100%;
4 padding: #ce9178]">20px;
5 background-color: #ce9178]">lightblue;
6}
7
8/* Styles for tablets and larger */
9@media (min-width: #ce9178]">768px) {
10 .container {
11 width: #ce9178]">750px;
12 margin: #ce9178]">0 auto;
13 padding: #ce9178]">30px;
14 }
15}
16
17/* Styles for desktops */
18@media (min-width: #ce9178]">1024px) {
19 .container {
20 width: #ce9178]">1000px;
21 padding: #ce9178]">40px;
22 }
23}
24
25/* Hide elements on small screens */
26@media (max-width: #ce9178]">767px) {
27 .desktop-only {
28 display: #ce9178]">none;
29 }
30}
Responsive Tips:
- • Start with mobile design first
- • Use percentages instead of fixed pixels
- • Test on different screen sizes
- • Keep touch targets at least 44px
Common CSS Examples
Here are some practical examples you can use right away:
Button Styling
Create attractive buttons
css
1.button {
2 background-color: #ce9178]">#007bff;
3 color: #ce9178]">white;
4 padding: #ce9178]">12px 24px;
5 border: #ce9178]">none;
6 border-radius: #ce9178]">5px;
7 cursor: #ce9178]">pointer;
8 font-size: #ce9178]">16px;
9}
10
11.button:#ce9178]">hover {
12 background-color: #ce9178]">#0056b3;
13}
14
15.button:#ce9178]">active {
16 transform: #ce9178]">translateY(1px);
17}
Card Design
Create content cards
css
1.card {
2 background-color: #ce9178]">white;
3 border-radius: #ce9178]">8px;
4 box-shadow: #ce9178]">0 2px 10px rgba(0,0,0,0.1);
5 padding: #ce9178]">20px;
6 margin: #ce9178]">20px 0;
7}
8
9.card h3 {
10 margin-top: #ce9178]">0;
11 color: #ce9178]">#333;
12}
13
14.card p {
15 color: #ce9178]">#666;
16 line-height: #ce9178]">1.6;
17}
Navigation Bar
Simple horizontal navigation
css
1.navbar {
2 background-color: #ce9178]">#333;
3 padding: #ce9178]">0;
4}
5
6.navbar ul {
7 list-style: #ce9178]">none;
8 margin: #ce9178]">0;
9 padding: #ce9178]">0;
10 display: #ce9178]">flex;
11}
12
13.navbar li {
14 margin: #ce9178]">0;
15}
16
17.navbar a {
18 display: #ce9178]">block;
19 color: #ce9178]">white;
20 padding: #ce9178]">15px 20px;
21 text-decoration: #ce9178]">none;
22}
23
24.navbar a:#ce9178]">hover {
25 background-color: #ce9178]">#555;
26}
Form Styling
Make forms look professional
css
1.form-group {
2 margin-bottom: #ce9178]">20px;
3}
4
5label {
6 display: #ce9178]">block;
7 margin-bottom: #ce9178]">5px;
8 font-weight: #ce9178]">bold;
9}
10
11input, textarea {
12 width: #ce9178]">100%;
13 padding: #ce9178]">10px;
14 border: #ce9178]">1px solid #ddd;
15 border-radius: #ce9178]">4px;
16 font-size: #ce9178]">16px;
17}
18
19input:#ce9178]">focus, textarea:focus {
20 border-color: #ce9178]">#007bff;
21 outline: #ce9178]">none;
22}
Practice Exercise
Create a simple webpage with these CSS styles:
- A blue heading centered on the page
- Paragraphs with a larger font size and line spacing
- A button with a hover effect
- A colored background for the whole page
- A simple navigation bar
Use our code editor to practice! Start with basic HTML and add CSS styling step by step.