CIT (Club d'Informatique et Télécoms) offers free courses taught by INPT students across various tech domains. Our Web Development cell is dedicated to bringing your ideas to life through code - from concept to creation.

CIT Web Development Hub

Learn • Build • Collaborate


# CSS Typography Basics

Fonts allow you to control how text looks on your webpage, improving readability and visual design. In CSS, typography is customized using a set of properties that work together to create polished, readable content.

Below are the most important font properties you'll use regularly.

## font-family

Defines which font is used for text. You can list multiple fonts so the browser falls back to the next option if one isn't available.

```html
<!DOCTYPE html>
<html>
<head>
<style>
body {
    font-family: "Arial", sans-serif;
}
</style>
</head>
<body>
    <p>This text uses Arial, or any sans-serif font if Arial isn't available.</p>
</body>
</html>
```

The browser will try **Arial** first, and if it's not installed, it will use any available **sans-serif** font.

**Common font stacks:**
- `"Arial", sans-serif` - Clean, readable
- `"Georgia", serif` - Traditional, elegant
- `"Courier New", monospace` - Code-like appearance

Always include a generic family (`sans-serif`, `serif`, `monospace`) as the final fallback.

## font-size

Controls how large the text appears.

```html
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
    font-size: 32px;
}
p {
    font-size: 1.2em;
}
</style>
</head>
<body>
    <h1>Hello</h1>
    <p>Paragraph text</p>
</body>
</html>
```

**Common units:**
- `px` - Fixed size (e.g., `16px`)
- `em` - Relative to parent element's font-size
- `rem` - Relative to root element's font-size
- `%` - Percentage of parent's font-size

For consistent, scalable typography across your site, `rem` is often the best choice.

## font-weight

Controls how thick or bold the text appears.

```html
<!DOCTYPE html>
<html>
<head>
<style>
p {
    font-weight: bold;
}
strong {
    font-weight: 700;
}
.light {
    font-weight: 300;
}
</style>
</head>
<body>
    <p>Bold text</p>
    <strong>Numeric bold (700)</strong>
    <p class="light">Light text (300)</p>
</body>
</html>
```

**Values:**
- Keywords: `normal` (400), `bold` (700)
- Numeric: `100` to `900` in increments of 100
  - 100-300: Thin to light
  - 400: Normal
  - 500-600: Medium to semi-bold
  - 700-900: Bold to extra bold

Not all fonts support every weight. Some fonts only have `normal` and `bold`.

## font-style

Controls whether text is italicized.

```html
<!DOCTYPE html>
<html>
<head>
<style>
em {
    font-style: italic;
}
p {
    font-style: normal;
}
</style>
</head>
<body>
    <em>Italic text</em>
    <p>Normal text</p>
</body>
</html>
```

**Values:**
- `normal` - Regular, upright text
- `italic` - Slanted text (uses the font's italic variant)
- `oblique` - Artificially slanted text (rarely used)

Use `italic` for emphasis or styling specific words.

## line-height

Controls the vertical spacing between lines of text. This is crucial for readability.

```html
<!DOCTYPE html>
<html>
<head>
<style>
.tight {
    line-height: 1;
}
.comfortable {
    line-height: 1.6;
}
.loose {
    line-height: 2;
}
</style>
</head>
<body>
    <p class="tight">
        This paragraph has tight line spacing (1).<br>
        Lines are close together.
    </p>
    <p class="comfortable">
        This paragraph has comfortable line spacing (1.6).<br>
        It's easier to read.
    </p>
    <p class="loose">
        This paragraph has loose line spacing (2).<br>
        Lines are far apart.
    </p>
</body>
</html>
```

**Best practices:**
- Body text: `1.5` to `1.6`
- Headings: `1.2` to `1.3`
- Use unitless values (e.g., `1.5`) instead of pixels for better scaling

Good line-height significantly improves readability, especially for longer paragraphs.

## text-transform

Controls capitalization without changing the actual HTML text.

```html
<!DOCTYPE html>
<html>
<head>
<style>
.upper {
    text-transform: uppercase;
}
.lower {
    text-transform: lowercase;
}
.capital {
    text-transform: capitalize;
}
.none {
    text-transform: none;
}
</style>
</head>
<body>
    <p class="upper">hello world</p>
    <p class="lower">HELLO WORLD</p>
    <p class="capital">hello world</p>
    <p class="none">Hello World</p>
</body>
</html>
```

**Values:**
- `uppercase` - ALL CAPS
- `lowercase` - all lowercase
- `capitalize` - First Letter Of Each Word
- `none` - No transformation (default)

Useful for styling headings, buttons, or navigation links without manually rewriting text.

## Combining Properties

Font properties work together to create cohesive typography. Here's a complete example:

```html
<!DOCTYPE html>
<html>
<head>
<style>
body {
    font-family: "Georgia", serif;
    font-size: 16px;
    line-height: 1.6;
}

h1 {
    font-family: "Arial", sans-serif;
    font-size: 2.5rem;
    font-weight: 700;
    line-height: 1.2;
    text-transform: uppercase;
}

p {
    font-size: 1rem;
    font-weight: 400;
}

.emphasis {
    font-style: italic;
    font-weight: 600;
}
</style>
</head>
<body>
    <h1>Typography Matters</h1>
    <p>Good typography makes content <span class="emphasis">easier to read</span> and more engaging.</p>
</body>
</html>
```

## Quick Reference

| Property         | Purpose                        | Common Values              |
|-----------------|--------------------------------|----------------------------|
| `font-family`   | Choose font                    | "Arial", sans-serif        |
| `font-size`     | Set text size                  | 16px, 1rem, 1.2em          |
| `font-weight`   | Control thickness              | normal, bold, 400-900      |
| `font-style`    | Italicize text                 | normal, italic             |
| `line-height`   | Vertical spacing between lines | 1.5, 1.6                   |
| `text-transform`| Control capitalization         | uppercase, lowercase       |

## Best Practices

**Readability first:**
- Use `line-height: 1.5-1.6` for body text
- Limit line length to 60-80 characters
- Ensure sufficient color contrast

**Font stacks:**
- Always include fallback fonts
- End with a generic family (sans-serif, serif, monospace)
- Test on multiple devices

**Performance:**
- Limit custom font usage to 2-3 font families
- Use system fonts when possible for faster loading
- Load only the font weights you actually use

**Consistency:**
- Use `rem` for scalable, predictable sizing
- Define typography rules on the `body` element
- Create reusable classes for common text styles


Master font properties to control text appearance and readability

CSS Typography Basics

# CSS Box Model - Margins & Padding

Margins and padding define the spacing around and inside an element. Understanding the difference between them is essential for creating well-spaced, readable layouts.

The CSS box model visualizes how space is calculated around every element:

![CSS Box Model Diagram](/posts/resources/css/images/box-model.png)

Every element is a box composed of four layers:
- **Content** - The actual text or images
- **Padding** - Space between content and border (inside)
- **Border** - The outline around the element
- **Margin** - Space outside the border (separates elements)

## Margins

Margins create space **outside** an element's border. They're used to separate elements from each other and prevent layouts from feeling cramped.

### Individual Margin Properties

You can control each side independently:

```html
<!DOCTYPE html>
<html>
<head>
<style>
.box {
    background-color: lightblue;
    margin-top: 20px;
    margin-right: 15px;
    margin-bottom: 30px;
    margin-left: 10px;
}
</style>
</head>
<body>
    <div class="box">This box has different margins on each side</div>
</body>
</html>
```

**Individual margin properties:**
- `margin-top` - Space above the element
- `margin-right` - Space to the right
- `margin-bottom` - Space below the element
- `margin-left` - Space to the left

### Margin Shorthand

Instead of writing four separate properties, you can use the `margin` shorthand:

#### Four values: top, right, bottom, left

```css
margin: 40px 100px 120px 80px;
/* top: 40px, right: 100px, bottom: 120px, left: 80px */
```

Think of it as going clockwise starting from the top.

#### Three values: top, horizontal, bottom

```css
margin: 40px 100px 120px;
/* top: 40px, right/left: 100px, bottom: 120px */
```

The second value applies to both left and right.

#### Two values: vertical, horizontal

```css
margin: 30px 80px;
/* top/bottom: 30px, left/right: 80px */
```

This is the most common shorthand - vertical spacing, then horizontal spacing.

#### One value: all sides

```css
margin: 20px;
/* All sides: 20px */
```

### Margin Values

Margins accept several types of values:

```html
<!DOCTYPE html>
<html>
<head>
<style>
.fixed {
    margin: 20px;  /* Fixed pixels */
}
.percentage {
    margin: 5%;  /* Percentage of container width */
}
.centered {
    width: 300px;
    margin: 0 auto;  /* Horizontal centering */
}
.negative {
    margin-top: -10px;  /* Pull element up */
}
</style>
</head>
<body>
    <div class="fixed">Fixed margin</div>
    <div class="percentage">Percentage margin</div>
    <div class="centered">Centered with auto margins</div>
    <div class="negative">Negative margin (overlaps above element)</div>
</body>
</html>
```

**Common values:**
- `px` - Fixed space (e.g., `20px`)
- `%` - Relative to container width (e.g., `5%`)
- `auto` - Browser calculates automatically (useful for centering)
- Negative values - Pull elements closer or create overlaps (e.g., `-10px`)

**Using `auto` for centering:**
When you set `margin: 0 auto` on a block element with a defined width, the browser automatically calculates equal left and right margins, centering the element horizontally.

## Padding

Padding creates space **inside** the element - between the content and the border. It's essential for preventing text from touching the edges of containers.

![CSS Box Model Diagram](/posts/resources/css/images/box-model.png)

### Individual Padding Properties

```html
<!DOCTYPE html>
<html>
<head>
<style>
.padded-box {
    background-color: lightcoral;
    border: 2px solid black;
    padding-top: 20px;
    padding-right: 30px;
    padding-bottom: 10px;
    padding-left: 15px;
}
</style>
</head>
<body>
    <div class="padded-box">
        This content has space between it and the border
    </div>
</body>
</html>
```

**Individual padding properties:**
- `padding-top`
- `padding-right`
- `padding-bottom`
- `padding-left`

### Padding Shorthand

Padding shorthand works exactly like margin shorthand:

#### One value - all sides

```css
padding: 20px;
```

All four sides get 20px of padding.

#### Two values - vertical, horizontal

```css
padding: 20px 40px;
```

Top and bottom get 20px, left and right get 40px.

#### Three values - top, horizontal, bottom

```css
padding: 20px 40px 10px;
```

Top: 20px, left/right: 40px, bottom: 10px.

#### Four values - top, right, bottom, left

```css
padding: 20px 40px 10px 5px;
```

Clockwise from the top: 20px, 40px, 10px, 5px.

### Practical Example

Here's a card component using both padding and margin:

```html
<!DOCTYPE html>
<html>
<head>
<style>
.card {
    background-color: white;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 20px;        /* Space inside the card */
    margin: 20px auto;    /* Space around the card + center it */
    max-width: 400px;
}

.card h2 {
    margin-top: 0;        /* Remove default top margin */
    margin-bottom: 10px;
}

.card p {
    margin-bottom: 0;     /* Remove default bottom margin */
}
</style>
</head>
<body>
    <div class="card">
        <h2>Card Title</h2>
        <p>This is a card with proper spacing. The padding keeps content away from edges, while margins separate it from other elements.</p>
    </div>
</body>
</html>
```

## Key Differences

| Property  | Space Location      | Affects Background | Use Case                    |
|-----------|--------------------|--------------------|----------------------------|
| **Margin**  | Outside border     | No                 | Separate elements          |
| **Padding** | Inside border      | Yes                | Space content from edges   |

**Important distinction:**
- Margins are **transparent** - the background color doesn't extend into margins
- Padding includes the element's **background color** - the background extends into the padding area

## Common Patterns

### Removing default spacing

Browsers add default margins to many elements (headings, paragraphs, lists). It's common to reset these:

```css
h1, h2, h3, p {
    margin: 0;
    padding: 0;
}
```

Then add back only the spacing you need.

### Consistent vertical rhythm

Create visual harmony by using consistent vertical spacing:

```css
p, ul, ol {
    margin-bottom: 1.5rem;
}

h2 {
    margin-top: 2rem;
    margin-bottom: 1rem;
}
```

### Button padding

Buttons need padding to be clickable and visually balanced:

```css
button {
    padding: 12px 24px;  /* Vertical: 12px, Horizontal: 24px */
    border: none;
    background-color: blue;
    color: white;
}
```

## Margin Collapsing

When two vertical margins meet, they **collapse** into a single margin. The larger margin wins.

```html
<!DOCTYPE html>
<html>
<head>
<style>
.box-a {
    margin-bottom: 30px;
    background-color: lightblue;
}

.box-b {
    margin-top: 20px;
    background-color: lightcoral;
}
</style>
</head>
<body>
    <div class="box-a">Box A has 30px bottom margin</div>
    <div class="box-b">Box B has 20px top margin</div>
    
</body>
</html>
```

The space between these boxes is **30px**, not 50px. The larger margin (30px) "wins."

**Important notes:**
- Only **vertical margins** collapse (top and bottom)
- Horizontal margins never collapse
- Padding never collapses

## Best Practices

**Use margins for external spacing:**
- Separate sections of content
- Create space between sibling elements
- Center elements horizontally with `margin: 0 auto`

**Use padding for internal spacing:**
- Keep text away from container edges
- Create clickable areas for buttons and links
- Add breathing room inside boxes

**Be consistent:**
- Define spacing rules in your CSS once and reuse them
- Use the same vertical spacing throughout your site (e.g., `1.5rem`)
- Use shorthand when all sides have the same value

**Consider using rem units:**
```css
.section {
    padding: 2rem;     /* Scales with root font-size */
    margin-bottom: 3rem;
}
```

Using `rem` instead of `px` creates more flexible, scalable spacing.

Understanding spacing inside and outside elements with margins and padding

CSS Box Model - Margins & Padding


# CSS Positioning Basics

CSS positioning defines how elements are placed within a web page. Understanding positioning is essential for creating complex layouts, overlays, navigation bars, and precisely placed elements.

Every element has a `position` property that controls how it's positioned in the document flow.

## Position Types Overview

| Position   | Description                                                   |
|------------|---------------------------------------------------------------|
| `static`   | Default positioning, follows normal document flow            |
| `relative` | Positioned relative to its normal position                    |
| `absolute` | Positioned relative to closest positioned ancestor            |
| `fixed`    | Positioned relative to viewport, stays in place when scrolling|
| `sticky`   | Relative until scroll threshold, then becomes fixed           |

## Static Positioning

Static is the **default** position for all elements. Elements appear in the normal document flow, one after another.

```html
<!DOCTYPE html>
<html>
<head>
<style>
div {
    border: 1px solid black;
    padding: 10px;
    margin: 10px;
    background-color: lightblue;
}
</style>
</head>
<body>
    <div>Box 1</div>
    <div>Box 2</div>
    <div>Box 3</div>
</body>
</html>
```

![Static positioning example](/posts/resources/css/images/static.png)

**Key characteristics:**
- Elements stack vertically (for block elements) or horizontally (for inline elements)
- `top`, `right`, `bottom`, `left` properties have **no effect**
- This is how elements behave by default

You rarely need to explicitly set `position: static` since it's the default.

## Relative Positioning

Relative positioning moves an element **relative to where it would normally appear**, without affecting the layout of surrounding elements.

```html
<!DOCTYPE html>
<html>
<head>
<style>
div {
    border: 1px solid black;
    padding: 10px;
    margin: 10px;
    background-color: lightblue;
}

.relative {
    position: relative;
    top: 20px;
    left: 30px;
    background-color: lightcoral;
}
</style>
</head>
<body>
    <div>Box 1</div>
    <div class="relative">Box 2 (Relative)</div>
    <div>Box 3</div>
</body>
</html>
```

![Relative positioning example](/posts/resources/css/images/relative.png)

Box 2 is shifted **20px down** and **30px right** from its normal position.

**Important details:**
- The element's **original space is preserved** in the layout
- Other elements don't move to fill the gap
- The element appears shifted visually, but the layout acts as if it's still in its original position
- Uses `top`, `right`, `bottom`, `left` to shift position

**Offset properties:**
- `top: 20px` - Moves element 20px down
- `left: 30px` - Moves element 30px to the right
- `bottom: 10px` - Moves element 10px up
- `right: 15px` - Moves element 15px to the left

**Common use case:** Slightly adjusting element positions without disrupting layout.

## Absolute Positioning

Absolute positioning **removes the element from the normal document flow** and positions it relative to its closest **positioned ancestor** (any parent with `position` other than `static`).

```html
<!DOCTYPE html>
<html>
<head>
<style>
.container {
    position: relative;
    width: 300px;
    height: 200px;
    border: 2px solid black;
    margin: 20px auto;
    background-color: lightgray;
}

.absolute {
    position: absolute;
    top: 50px;
    left: 50px;
    background-color: pink;
    padding: 10px;
    border: 1px solid red;
}
</style>
</head>
<body>
    <div class="container">
        <p>Container with Relative Positioning</p>
        <div class="absolute">Absolutely Positioned Element</div>
    </div>
</body>
</html>
```

![Absolute positioning example](/posts/resources/css/images/absolute.png)

The pink box is positioned **50px from the top** and **50px from the left** of the `.container` element.

**Key characteristics:**
- Element is **removed from document flow** - other elements act as if it doesn't exist
- No space is reserved for it in the layout
- Positioned relative to the nearest ancestor with `position: relative`, `absolute`, `fixed`, or `sticky`
- If no positioned ancestor exists, it's positioned relative to the `<body>`

**Common pattern - Positioned parent:**
```css
.parent {
    position: relative;  /* Creates positioning context */
}

.child {
    position: absolute;  /* Positioned within parent */
    top: 0;
    right: 0;
}
```

This is the most common pattern - set a parent to `position: relative` (which doesn't move it) to create a positioning context for absolute children.

**Use cases:**
- Tooltips and dropdowns
- Overlays and modals
- Icons positioned within containers
- Image badges or labels

## Fixed Positioning

Fixed positioning removes the element from the document flow and positions it relative to the **viewport** (browser window). It stays in place even when scrolling.

```html
<!DOCTYPE html>
<html>
<head>
<style>
.fixed {
    position: fixed;
    top: 10px;
    right: 10px;
    background-color: lightgreen;
    padding: 20px;
    border: 2px solid black;
    z-index: 1000;
}

.content {
    height: 2000px;
    padding: 20px;
}
</style>
</head>
<body>
    <div class="fixed">Fixed Box - Scroll to see me stay!</div>
    <div class="content">
        <h2>Fixed Positioning Example</h2>
        <p>Scroll down and notice the green box stays in the same viewport position.</p>
        <p>This content simulates a long page...</p>
    </div>
</body>
</html>
```

**Key characteristics:**
- Always positioned relative to the **viewport**, not any parent element
- Stays in place while scrolling
- Removed from document flow (no space reserved)
- `top`, `right`, `bottom`, `left` are relative to the viewport edges

**Common use cases:**
- Navigation bars that stay visible while scrolling
- "Back to top" buttons
- Chat widgets
- Cookie consent banners
- Floating action buttons

**Important note:** Fixed elements are positioned relative to the viewport, so `position: relative` on a parent has no effect.

## Sticky Positioning

Sticky positioning is a **hybrid** between relative and fixed. The element behaves as `relative` until you scroll to a specified threshold, then it becomes `fixed`.

```html
<!DOCTYPE html>
<html>
<head>
<style>
.spacer {
    height: 300px;
    background: lightgray;
    padding: 20px;
}

.sticky {
    position: sticky;
    top: 10px;
    background: yellow;
    padding: 10px;
    border: 2px solid orange;
}
</style>
</head>
<body>
    <div class="spacer">
        <h2>Scroll down to see sticky behavior</h2>
        <p>The yellow box below will stick when it reaches 10px from the top of the viewport.</p>
    </div>

    <div class="sticky">I become sticky when you scroll!</div>

    <div class="spacer">
        <p>Keep scrolling...</p>
        <p>The sticky element stays fixed at the top until you scroll back up or reach the end of its container.</p>
    </div>
</body>
</html>
```

**How it works:**
1. Element scrolls normally (like `relative`) until...
2. It reaches the specified threshold (`top: 10px`)
3. Then it "sticks" in place (like `fixed`)
4. When you scroll back up, it unsticks and returns to relative behavior

**Key characteristics:**
- Switches between `relative` and `fixed` behavior based on scroll position
- Must specify at least one of: `top`, `right`, `bottom`, or `left`
- Sticks within its parent container only (won't stick beyond parent's boundaries)
- Maintains its space in the document flow

**Common use cases:**
- Table headers that stick while scrolling table data
- Section headings in long articles
- Navigation menus that stick after scrolling past the hero section
- Sidebar elements that stick until you reach the end of content

## The z-index Property

When elements overlap (common with absolute, fixed, or relative positioning), `z-index` controls which element appears on top.

```html
<!DOCTYPE html>
<html>
<head>
<style>
.box {
    width: 100px;
    height: 100px;
    position: absolute;
    border: 2px solid black;
}

.box1 {
    background-color: red;
    top: 50px;
    left: 50px;
    z-index: 1;
}

.box2 {
    background-color: blue;
    top: 80px;
    left: 80px;
    z-index: 2;
}

.box3 {
    background-color: green;
    top: 110px;
    left: 110px;
    z-index: 3;
}
</style>
</head>
<body>
    <div class="box box1">Z: 1</div>
    <div class="box box2">Z: 2</div>
    <div class="box box3">Z: 3</div>
</body>
</html>
```

**How z-index works:**
- Higher numbers appear on top
- Only works on **positioned elements** (not `static`)
- Negative values are allowed
- Default value is `auto` (order depends on HTML structure)

**Common z-index values:**
```css
.modal-backdrop { z-index: 1000; }
.modal { z-index: 1001; }
.dropdown { z-index: 100; }
.navbar { z-index: 10; }
```

## Positioning Offset Properties

All positioned elements (except `static`) can use these properties:

```css
.positioned {
    position: absolute;
    top: 20px;     /* Distance from top edge */
    right: 30px;   /* Distance from right edge */
    bottom: 10px;  /* Distance from bottom edge */
    left: 15px;    /* Distance from left edge */
}
```

**Important rules:**
- `top` and `bottom` can conflict - typically use one or the other
- `left` and `right` can conflict - typically use one or the other
- Values can be `px`, `%`, `em`, `rem`, etc.
- Negative values pull the element in the opposite direction

## Centering with Absolute Positioning

A common pattern for centering absolutely positioned elements:

```html
<!DOCTYPE html>
<html>
<head>
<style>
.container {
    position: relative;
    width: 400px;
    height: 300px;
    border: 2px solid black;
    background-color: lightgray;
}

.centered {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: white;
    padding: 20px;
    border: 1px solid black;
}
</style>
</head>
<body>
    <div class="container">
        <div class="centered">Perfectly Centered!</div>
    </div>
</body>
</html>
```

**How this works:**
- `top: 50%; left: 50%` positions the top-left corner at the center
- `transform: translate(-50%, -50%)` shifts the element back by half its own width and height
- Result: the element's center aligns with the container's center

## Quick Reference

| Position   | Document Flow | Positioned Relative To          | Scrolls? |
|------------|---------------|----------------------------------|----------|
| `static`   | In flow       | Normal position                  | Yes      |
| `relative` | In flow       | Its normal position              | Yes      |
| `absolute` | Out of flow   | Nearest positioned ancestor      | Yes      |
| `fixed`    | Out of flow   | Viewport                         | No       |
| `sticky`   | In flow       | Varies (relative → fixed)        | Varies   |

## Best Practices

**Use relative for small adjustments:**
```css
.icon {
    position: relative;
    top: 2px;  /* Slight vertical alignment */
}
```

**Use absolute for overlays:**
```css
.badge {
    position: absolute;
    top: -5px;
    right: -5px;
}
```

**Use fixed for persistent UI:**
```css
.navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
}
```

**Use sticky for scrolling context:**
```css
.table-header {
    position: sticky;
    top: 0;
}
```

**Always set a positioning context:**
When using `absolute`, set the parent to `position: relative` to control where the element is positioned:

```css
.parent {
    position: relative;  /* Positioning context */
}

.child {
    position: absolute;  /* Positioned within parent */
}
```

**Consider z-index hierarchy:**
Plan your z-index values to avoid conflicts. Use a scale like 10, 100, 1000 to leave room for adjustments.


Understanding how to position elements with static, relative, absolute, fixed, and sticky positioning

CSS Positioning Basics


# CSS Units - Complete Guide

CSS units determine how we size elements on a webpage. Understanding the difference between unit types is essential for creating responsive, scalable designs.

There are two main categories of CSS units:

* **Absolute units** — fixed sizes that don't change
* **Relative units** — sizes that adapt based on context

## Absolute Units

Absolute units have fixed sizes. They don't change based on screen size, browser settings, or parent containers.

### px (Pixel)

A pixel is the smallest visible unit on a digital screen. Use pixels when you need exact, predictable sizing.

```html
<html>
<head>
    <style>
        p {
            font-size: 40px;
            color: green;
        }
    </style>
</head>
<body>
    <p>Hello GFG How are you?</p>
</body>
</html>
```

![px example](/posts/resources/css/images/px-image.png)

The font-size is fixed at 40 pixels — it does not scale with the viewport or parent element.

**When to use pixels:**
- Icons and borders
- Precise layouts where exact measurements matter
- Static UI elements that shouldn't change size

## Relative Units

Relative units scale dynamically based on their context. They're the foundation of responsive design.

### em (Relative to Parent Font Size)

The `em` unit scales based on the font-size of the parent element.

```html
<html>
<head>
    <style>
        .ok {
            font-size: 20px;
        }
        .para {
            font-size: 2em;
        }
    </style>
</head>
<body>
    <div class="ok">
        Hello GFG
        <div class="para">Hello GFG</div>
    </div>
</body>
</html>
```

![em example](/posts/resources/css/images/em-image.png)

In this example:
- Parent has `font-size: 20px`
- Child uses `2em`
- Result: `2 × 20px = 40px`

The `em` unit is useful for creating scalable components where child elements should grow proportionally with their parent.

### rem (Relative to Root Font Size)

The `rem` unit scales based on the root `html` element's font-size, ignoring all parent elements.

```html
<html>
<head>
    <style>
        html {
            font-size: 25px;
        }
        .para {
            font-size: 2rem;
            color: red;
        }
    </style>
</head>
<body>
    <div class="para">Hello GFG</div>
</body>
</html>
```

![rem example](/posts/resources/css/images/rem-image.png)

In this example:
- Root element (`html`) has `font-size: 25px`
- The paragraph uses `2rem`
- Result: `2 × 25px = 50px`

Unlike `em`, `rem` always references the root element, making it more predictable for consistent typography across your entire site.

### vw (Viewport Width)

The `vw` unit is relative to the width of the viewport. `1vw` equals 1% of the viewport width.

```html
<html>
<head>
    <style>
        .para {
            height: 10vw;
            width: 50vw;
            border: 2px solid black;
            background-color: chocolate;
            font-size: 30px;
        }
    </style>
</head>
<body>
    <div class="para">Hello GFG</div>
</body>
</html>
```

![vw example](/posts/resources/css/images/vw-image.png)

In this example:
- `width: 50vw` — the element is 50% of the viewport width
- `height: 10vw` — the element is 10% of the viewport width

The `vw` unit is perfect for creating elements that scale proportionally with screen width.

### vh (Viewport Height)

The `vh` unit is relative to the height of the viewport. `1vh` equals 1% of the viewport height.

```html
<html>
<head>
    <style>
        .full-height {
            height: 100vh;
            background-color: lightblue;
            text-align: center;
            display: flex;
            justify-content: center;
            align-items: center;
        }
    </style>
</head>
<body>
    <div class="full-height">
        <h1>This div is 100% of the viewport height (100vh)</h1>
    </div>
</body>
</html>
```

![vh example](/posts/resources/css/images/vh-image.png)

Using `100vh` makes the element fill the entire height of the browser window. This is commonly used for hero sections and full-screen landing pages.

### % (Percentage)

The percentage unit is relative to the parent element's dimensions.

```html
<html>
<head>
    <style>
        .container {
            width: 200px;
            height: 100px;
            background-color: lightgreen;
        }
        .child {
            width: 50%;
            height: 50%;
            background-color: lightcoral;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="child"></div>
    </div>
</body>
</html>
```

![percentage example](/posts/resources/css/images/percentage-image.png)

The child element takes 50% of its parent's width and height. Percentages are ideal for creating flexible, proportional layouts.

## When to Use Which Unit

### Use Absolute Units (px) When:

- You need precise, pixel-perfect measurements
- Working with icons, borders, or shadows
- Creating static layouts that don't need to scale
- UI consistency is more important than responsiveness

### Use Relative Units When:

- Designing responsive layouts
- Scaling typography across different screen sizes
- Creating fluid layouts that adapt to their containers
- Building accessible designs that respect user preferences

## Quick Reference

| Unit | Relative To        | Best Use Case                  |
|------|-------------------|--------------------------------|
| px   | Nothing (fixed)    | Icons, borders, fixed elements |
| em   | Parent font-size   | Scalable components            |
| rem  | Root font-size     | Consistent typography          |
| %    | Parent dimensions  | Flexible layouts               |
| vw   | Viewport width     | Responsive widths              |
| vh   | Viewport height    | Full-screen sections           |


Understanding absolute and relative CSS units with practical examples

CSS Units - Complete Guide


# Complete Guide to CSS Grid

CSS Grid is a powerful layout system that allows you to create complex, responsive layouts with ease.

## Basic Grid Setup

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

## Grid Areas

Define named grid areas for easier layout management:

```css
.container {
  grid-template-areas:
    "header header header"
    "sidebar main main"
    "footer footer footer";
}
```

## Responsive Grids

Use auto-fit and minmax for responsive layouts:

```css
.container {
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}
```


Master CSS Grid layout system with practical examples and best practices