3 min read

Topic 3 of 24

CSS3

CSS3 is the latest version of CSS used to style and design web pages . It controls the layout, colors, fonts, spacing, and responsiveness of HTML elements.

🎨 CSS3 (Cascading Style Sheets)

📌 1. Definition

CSS3 is the latest version of CSS used to style and design web pages. It controls the layout, colors, fonts, spacing, and responsiveness of HTML elements.

🧱 2. Basic Syntax

selector {
    property: value;
}

🔑 Example

p {
    color: blue;
    font-size: 16px;
}

👉 Applies blue color and font size to all <p> elements.

🎯 3. Types of CSS

1. Inline CSS

<p style="color:red;">Hello</p>

2. Internal CSS

<style>
p { color: red; }
</style>

3. External CSS (Most Recommended)

<link rel="stylesheet" href="style.css">

🧠 4. CSS Selectors (Very Important)

📌 Definition

Selectors are used to target HTML elements.

⭐ Types

Element Selector

p { color: red; }

Class Selector

.myclass { color: blue; }

ID Selector

#myid { color: green; }

Group Selector

h1, p { color: black; }

📦 5. Box Model (Important Concept)

👉 Every element is a box:

+----------------------+
|      Margin          |
|  +---------------+   |
|  |   Border      |   |
|  |  +---------+  |   |
|  |  | Padding |  |   |
|  |  | Content |  |   |
|  |  +---------+  |   |
|  +---------------+   |
+----------------------+

🔑 Properties

margin → outer space
border → edge
padding → inner space
content → actual data

🎨 6. Colors & Backgrounds

body {
    background-color: lightblue;
    color: black;
}

Background Image

body {
    background-image: url("img.jpg");
}

🔤 7. Fonts & Text

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

📐 8. Layout & Display

Display Property

div {
    display: block;
}

Positioning

static
relative
absolute
fixed

div {
    position: absolute;
    top: 50px;
}

📱 9. Responsive Design (Media Queries)

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

👉 Changes style for small screens (mobile).

🧩 10. CSS3 New Features

⭐ 1. Flexbox (Layout System)

.container {
    display: flex;
    justify-content: center;
}

⭐ 2. Grid Layout

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

⭐ 3. Animations

@keyframes example {
    from {background-color: red;}
    to {background-color: blue;}
}

⭐ 4. Transitions

div {
    transition: width 2s;
}

⭐ 5. Border Radius (Rounded Corners)

div {
    border-radius: 10px;
}

⚠️ 11. Important Rules

✔ CSS follows cascading order (priority rules) ✔ Priority: Inline > Internal > External ✔ Use classes for reuse ✔ Avoid too many inline styles ✔ Use responsive design for mobile