Skip to main content

Best CSS Tutorial for Beginners | Learn CSS with Examples, Flexbox, Grid & Responsive Design

Introduction to CSS

CSS (Cascading Style Sheets) is a stylesheet language used to control the appearance and layout of web pages. It allows developers to style HTML elements by defining properties such as colors, fonts, spacing, and positioning.


With CSS, you can:
✔ Change text and background colors
✔ Adjust font styles and sizes
✔ Control element positioning (Flexbox, Grid)
✔ Create animations and transitions
✔ Make web pages responsive for different screen sizes

CSS enhances user experience by making websites more visually appealing, structured, and accessible across devices. 

1. CSS Kya Hai?

CSS stands for Cascading Style Sheets. It is a stylesheet language used to define the layout, colors, fonts, spacing, animations, and responsive design of HTML elements.

1.1 Why is CSS Important?

  • HTML and CSS are separate: HTML defines the structure, while CSS manages the design and presentation.

  • Efficient and reusable code: A single CSS file can be used to style multiple pages.

  • Responsive design: CSS helps make websites mobile-friendly.

 2. How to Use CSS?

CSS can be applied in three ways:

2.1 Inline CSS

Inline CSS applies styles directly within an HTML tag.


html
<p style="color: blue; font-size: 20px;">Yeh ek blue color ka paragraph hai.</p>

2.2 Internal CSS

Internal CSS is written inside the <style> tag in the <head> section of an HTML document.

html
<!DOCTYPE html>
<html lang="en"> 
<head>
    <meta charset="UTF-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Internal CSS Example</title> 
<style> 
p {
color: green; 
font-size: 18px;
 } 
</style> 
</head> 
<body>
<p>Yeh ek green color ka paragraph hai.</p> 
</body> 
</html>

2.3 External CSS

External CSS is written in a separate file and linked to an HTML file.

styles.css file:

css
p {
    color: red;
font-size: 22px;
}

HTML file:

html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>External CSS Example</title> 
<link rel="stylesheet" href="styles.css">
</head>
<body> 
<p>Yeh ek red color ka paragraph hai.</p>
</body>
</html>

3. CSS Selectors

CSS selectors are used to target specific HTML elements.

3.1 Types of Selectors

  1. Element Selector

    css
    p {
    color: blue;
}

  2. Class Selector

    css
    .my-class {
    font-size: 20px;
}

    html
    <p class="my-class">Yeh ek class-based paragraph hai.</p>

  3. ID Selector

    css
    #unique-id {
    background-color: yellow;
}

    html
    <p id="unique-id">Yeh ek ID-based paragraph hai.</p>

  4. Group Selector

    css
    h1, h2, p {
    color: purple;
}

  5. Universal Selector

    css
    * {
    margin: 0;
    padding: 0;
}

4. CSS Properties

4.1 Colors

css
p {
    color: rgb(255, 0, 0); /* Red color */
}

4.2 Backgrounds

css
body {
    background-color: lightgray;
}

4.3 Borders

css
div {
    border: 2px solid black;
}

4.4 Font Styling

css
p { 
font-family: Arial, sans-serif; 
font-size: 18px; 
font-weight: bold; 
text-align: center;
 }

4.5 Box Model

css
div {
    width: 200px; 
height: 100px; 
padding: 10px;
border: 2px solid black;
margin: 20px; 
}

5. CSS Flexbox

Flexbox is a powerful layout system that helps in aligning and distributing elements easily.

css
.container {
    display: flex; 
justify-content: center;
align-items: center;
height: 100vh;
 }
html
<div class="container"> 
<div>Item 1</div> 
<div>Item 2</div> 
</div>

6. CSS Grid

CSS Grid is an advanced layout system for designing complex page structures.

css
.grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

html
<div class="grid-container">
    <div>Box 1</div>
    <div>Box 2</div>
    <div>Box 3</div>
</div>

7. CSS Animations

css
@keyframes example {
from {
background-color: red;
} 
to{
background-color: yellow;
}
} 
.animated-box {
width: 100px; 
height: 100px;
background-color: red; 
animation: example 2s infinite alternate;
 }
html
<div class="animated-box"></div>

8. Responsive Design with Media Queries

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

html
<p>Resize the window to see the background color change.</p>

Conclusion

This was a detailed CSS guide where we explored both basic and advanced concepts. Proper use of CSS can make your website visually appealing and interactive.