Cascading Style Sheets (CSS)

What is CSS?

CSS (Cascading Style Sheets) styles HTML documents. It separates presentation from content, letting the same markup look different on different screens or themes.

Syntax

selector {
    property: value;
    property: value;
}

Example: h1 { color: blue; font-size: 2em; }.

Ways to Include CSS

• Inline: <p style="color:red">.
• Internal: <style> block in the head.
• External: <link rel="stylesheet" href="styles.css">. Preferred for reuse.

Selectors

• Type: h1.
• Class: .btn.
• ID: #main.
• Attribute: input[type="text"].
• Descendant: nav a.
• Child: ul > li.
• Pseudo-class: a:hover, li:first-child.
• Pseudo-element: p::first-letter.

The Cascade and Specificity

When multiple rules apply, CSS picks the winner based on:

1. Importance (!important beats normal).
2. Specificity (inline 1000, ID 100, class/attr/pseudo-class 10, element/pseudo-element 1).
3. Source order — later rules win.

The Box Model

Every element is a rectangular box with four layers: content, padding, border, margin. Total width = content + padding + border + margin. With box-sizing: border-box, padding and border are included in the specified width.

Colors and Units

• Colors: names, #rrggbb, rgb(), rgba(), hsl().
• Length: px (absolute), em (relative to parent font-size), rem (relative to root), %, vw/vh (viewport).

Typography

Key properties: font-family, font-size, font-weight, line-height, text-align, letter-spacing, text-decoration, text-transform. Load web fonts via @font-face or Google Fonts.

Display and Positioning

• display: block, inline, inline-block, none, flex, grid.
• position: static, relative, absolute, fixed, sticky.
• float and clear — legacy layout.

Flexbox

Flexbox is a one-dimensional layout system for rows or columns.

.container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}

Grid

CSS Grid is a two-dimensional layout system.

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

Responsive Design

Use a flexible base (rem, %) and media queries to adapt layout:

@media (max-width: 768px) {
    .grid { grid-template-columns: 1fr; }
}

Transitions and Animations

.btn { transition: transform 0.2s ease; }
.btn:hover { transform: scale(1.05); }
@keyframes slide {
    from { transform: translateX(-100%); }
    to   { transform: translateX(0);     }
}

CSS Variables

:root {
    --brand: #2ecc71;
}
.button { background: var(--brand); }

CSS Frameworks

Frameworks accelerate styling: Bootstrap, Tailwind CSS, Bulma, Foundation. They provide a grid system, typography, and pre-built components.

Summary

CSS styles HTML with selectors and properties. Master the box model, flexbox, grid, and media queries and you can build responsive layouts that work on any device.

Important Questions

1. What is CSS? List three ways to include it.
2. Explain different types of CSS selectors with examples.
3. Explain the box model.
4. What are specificity and the cascade?
5. Differentiate em, rem, and px.
6. Explain flexbox and give a code example.
7. What is responsive design? Write a media query example.
8. List five popular CSS frameworks.