CSS Fundamentals — Styling the Web

1024 words

5 min read

Visual companion

Python

Type and operator map

Python Week 1: the first filter for runtime behavior

Open gallery Related surface

View

Revision summary

What this note is really saying

Short form

# CSS Fundamentals — Styling the Web ## 🎯 Learning Objectives - Apply CSS via inline, internal, and external stylesheets - Use CSS selectors (element, class, ID, combinator) - Understand the box model (content, padding, border, margin) - Create layouts using Flexbox and CSS Grid - Write responsive designs with medi...

CSS Fundamentals — Styling the Web

🎯 Learning Objectives

Apply CSS via inline, internal, and external stylesheets
Use CSS selectors (element, class, ID, combinator)
Understand the box model (content, padding, border, margin)
Create layouts using Flexbox and CSS Grid
Write responsive designs with media queries

1. CSS Introduction

CSS (Cascading Style Sheets) controls the presentation of HTML. Three ways to apply:


html
<!-- 1. Inline (avoid when possible) -->
<p style="color: blue; font-size: 18px;">Text</p>
<!-- 2. Internal (in head) -->
<head>
    <style>
        p { color: blue; }
    </style>
</head>
<!-- 3. External (best practice) -->
<head>
    <link rel="stylesheet" href="styles.css">
</head>

The "Cascade" means rules are applied in order of specificity: inline > internal > external, and more specific selectors override less specific ones.

2. CSS Selectors


css
/* Element selector */
p { color: black; }
/* Class selector (most common) */
.highlight { background: yellow; }
/* ID selector (use sparingly) */
#header { font-size: 24px; }
/* Descendant (any level) */
article p { line-height: 1.5; }
/* Child (direct only) */
ul > li { list-style: none; }
/* Adjacent sibling */
h2 + p { margin-top: 0; }
/* Attribute selector */
input[type="text"] { border: 1px solid gray; }
/* Pseudo-classes */
a:hover { color: red; }
li:first-child { font-weight: bold; }
li:nth-child(even) { background: #f5f5f5; }
/* Pseudo-elements */
p::first-line { font-variant: small-caps; }
p::before { content: "→ "; }

Specificity hierarchy: IDs (e.g., #nav) > Classes (.class) > Elements (p). Inline styles override everything. !important overrides all (avoid).

3. Box Model

Every HTML element is a rectangular box:


css
div {
    width: 200px;
    padding: 20px;       /* Space inside border */
    border: 2px solid black;  /* Border line */
    margin: 15px;        /* Space outside border */
}

(Diagram) Total width = content + padding + border + margin With box-sizing: border-box;: width INCLUDES padding and border (easier to work with):


css
* { box-sizing: border-box; }  /* Global reset */

4. Display Property


css
.block { display: block; }      /* Full width, starts new line */
.inline { display: inline; }     /* Only needed width, no height/margin control */
.inline-block { display: inline-block; }  /* Inline but can set height/width */
.none { display: none; }         /* Hidden (removed from flow) */

5. Flexbox — One-Dimensional Layout


css
.container {
    display: flex;
    justify-content: center;    /* Main axis alignment */
    align-items: center;        /* Cross axis alignment */
    flex-wrap: wrap;            /* Allow items to wrap */
    gap: 10px;                  /* Space between items */
}
.item {
    flex: 1;                    /* Grow/shrink ratio */
    flex: 0 0 200px;            /* Default: no grow, no shrink, 200px basis */
}

Flex properties (container):

flex-direction: row (default) | column | row-reverse | column-reverse
justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly
align-items: stretch | flex-start | flex-end | center | baseline
flex-wrap: nowrap | wrap | wrap-reverse Flex properties (items):
flex: shorthand for flex-grow flex-shrink flex-basis
align-self: override container's align-items for this item
order: rearrange visual order (not HTML order)

6. CSS Grid — Two-Dimensional Layout


css
.container {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;  /* 3 columns */
    grid-template-rows: auto 200px auto;   /* 3 rows */
    gap: 15px;
}
.item {
    grid-column: 1 / 3;  /* Span from column line 1 to 3 */
    grid-row: 1 / 2;
}

Grid vs Flexbox:

Flexbox: One-dimensional (row OR column). Good for navigation bars, centering, small layouts.
Grid: Two-dimensional (rows AND columns). Good for page layouts, image galleries, dashboards.

7. Responsive Design with Media Queries


css
/* Mobile first: base styles for small screens */
.container { flex-direction: column; }
/* Tablet (768px and above) */
@media (min-width: 768px) {
    .container { flex-direction: row; }
}
/* Desktop (1024px and above) */
@media (min-width: 1024px) {
    .container { max-width: 960px; margin: 0 auto; }
}

Common breakpoints: 576px (phone), 768px (tablet), 992px (desktop), 1200px (large desktop).

8. Practice Questions

Q1: What's the difference between class and ID selectors?

Answer: Classes (.name) can be used multiple times per page. IDs (#name) must be unique. IDs have higher specificity. Use classes for styling; use IDs for JavaScript hooks or anchor links. Q2: What does box-sizing: border-box do?

Answer: Makes the width property include padding and border. Without it, width only sets content width, and padding/border add to total width (box-sizing: content-box). Q3: What's the difference between display: none and visibility: hidden?

Answer: display: none removes the element from the document flow (no space occupied). visibility: hidden hides the element but reserves its space (invisible box still affects layout). Q4: When would you use Flexbox vs Grid?

Answer: Flexbox for one-dimensional layouts (navbar, centering, row of cards). Grid for two-dimensional layouts (full page structure, image galleries with rows and columns). Q5: What is specificity in CSS?

Answer: The algorithm browsers use to determine which CSS rule applies when multiple rules target the same element. From highest to lowest: inline styles → IDs → Classes/Attributes/Pseudo-classes → Elements/Pseudo-elements. Q6: How do you center a div horizontally and vertically?

Answer: Use Flexbox:
css
.parent { display: flex; justify-content: center; align-items: center; height: 100vh; }
Or Grid: display: grid; place-items: center; Q7: What does justify-content: space-between do?

Answer: Distributes items evenly along the main axis, with the first item at the start and last item at the end, and equal spacing between items. Q8: Write a media query that applies styles for mobile devices (max-width: 576px).
css
@media (max-width: 576px) {
    .menu { flex-direction: column; }
    .sidebar { display: none; }
    .content { padding: 10px; }
}

📐 Key Concepts

Selector	Syntax	Specificity
Element	`p`	0,0,1
Class	`.class`	0,1,0
ID	`#id`	1,0,0
Inline	`style=""`	1,0,0,0

Layout	Dimension	Use Case
Flexbox	1D (row OR column)	Components, nav, centering
Grid	2D (rows AND columns)	Page layout, galleries

🔗 Cross-References

Next: Advanced CSS Join Discord Previous1.2 HTML BasicsNext2.2 JavaScript Basics

What this note is really saying

CSS Fundamentals — Styling the Web

🎯 Learning Objectives

1. CSS Introduction

2. CSS Selectors

3. Box Model

4. Display Property

5. Flexbox — One-Dimensional Layout

6. CSS Grid — Two-Dimensional Layout

7. Responsive Design with Media Queries

8. Practice Questions

📐 Key Concepts

🔗 Cross-References

Intelligence Hub