CSS FREE Tutorial
🎨 Complete CSS Tutorial for Beginners – With Live Output
Welcome! This is your all-in-one beginner’s guide to CSS (Cascading Style Sheets). You’ll learn how to style your website, change layouts, use color, position elements, and even make your site mobile-friendly — all with easy examples and real output.
📘 1. What is CSS?
CSS is short for Cascading Style Sheets. It describes how HTML elements should be displayed on the screen. You may refer our HTML tutorial if you are new to HTML.
You use CSS to change:
- Text colors and fonts
- Backgrounds and borders
- Page layouts
- Element positioning
- Responsive design for mobile
📍 2. Ways to Use CSS
🔹 Inline CSS
Inline CSS is applied directly inside HTML elements using the style attribute.
<p style="color: blue;">This is blue text.</p>
Live Output:
This is blue text.
🔹 Internal CSS
Internal CSS is written inside a <style> block in the HTML file’s <head>.
<style> p { color: green; } </style> <p>This is green text.</p>
Live Output:
This is green text.
🔹 External CSS
In this case you will have two different files. One of the file contains htlm file (example index.html) and the other is the CSS file (example style.css) and below is the folder structure of where those files where saved and the content of each file.
📁 Folder Structure (important!):
project-folder/
├── index.html
└── style.css
✅ index.html (your HTML file):
<!DOCTYPE html> <html lang="en"> <head> <link rel="stylesheet" href="style.css"> </head> <body> <p>This is red text from an external stylesheet.</p> </body> </html>
✅ style.css (your external CSS file):
/* style.css */ p { color: red; }
Live Output:
This is red text from an external stylesheet.
✏️ 3. CSS Syntax
The basic structure of CSS is:
selector { property: value; }
Example:
h1 { color: #4CAF50; font-size: 32px; }
Live Output:
Styled Heading
🎯 4. Selectors
🔹 Tag Selector
Targets all elements of a specific tag (like all <p> tags).
🔹 Class Selector
Targets elements with a specific class. Use . before the class name.
.highlight { background-color: yellow; }
Live Output:
This text is highlighted!
🔹 ID Selector
Targets one unique element. Use # before the ID.
#title { color: navy; font-weight: bold; }
Live Output:
Title Styled with ID
5. Text and Background Styling
Here we change font, alignment, colors, and decoration.
Styled Text Block
This paragraph has a gray background, a sans-serif font, and is easy to read.
📦 6. The CSS Box Model
Every element in CSS is a box with content, padding, border, and margin.
.box { padding: 20px; border: 2px solid black; margin: 10px; background-color: white; }
Live Output:
It has padding (inside), a border, and a margin (outside).
📍 7. Exercise:- What is CSS Positioning?
