Session 1.6 – Basic CSS Properties

Introduction

CSS properties control the visual presentation of HTML elements. Understanding fundamental properties like alignment, margin, padding, and display is essential for creating professional web layouts. These properties form the foundation of CSS styling and layout control.

Key Insight

The CSS Box Model is fundamental to understanding how these properties work together. Every HTML element is essentially a rectangular box with content, padding, border, and margin areas.

Text Alignment

The text-align property controls the horizontal alignment of text and inline content within an element.

Text Alignment Values

/* Text Alignment Options */
.left-align {
    text-align: left;      /* Default - aligns text to left */
}

.right-align {
    text-align: right;     /* Aligns text to right */
}

.center-align {
    text-align: center;    /* Centers text horizontally */
}

.justify-align {
    text-align: justify;   /* Stretches text to fill width */
}
                    

Visual Demonstration

Left Aligned: This text is aligned to the left side of the container.

Center Aligned: This text is centered horizontally.

Right Aligned: This text is aligned to the right side.

Justified: This text is justified, meaning it stretches to fill the entire width of the container, creating even spacing between words.

Important Notes

text-align only affects inline content (text, images, inline elements)
It does not center block-level elements themselves
Justify alignment can create uneven spacing in short lines

Margin Property

Margin creates space outside an element, between the element and its neighbors. Margins are transparent and don't have a background color.

Margin Syntax Options

/* Individual Sides */
margin-top: 10px;
margin-right: 20px;
margin-bottom: 15px;
margin-left: 25px;

/* Shorthand - All sides same */
margin: 20px;

/* Shorthand - Vertical | Horizontal */
margin: 20px 40px;  /* top/bottom: 20px, left/right: 40px */

/* Shorthand - Top | Horizontal | Bottom */
margin: 10px 20px 15px;  /* top: 10px, left/right: 20px, bottom: 15px */

/* Shorthand - All four sides */
margin: 10px 20px 30px 40px;  /* top, right, bottom, left (clockwise) */

/* Auto centering */
margin: 0 auto;  /* Centers block element horizontally */
                    

Margin Values

Length Values

/* Pixels */
margin: 10px;

/* Ems (relative to font-size) */
margin: 1.5em;

/* Rems (relative to root font-size) */
margin: 2rem;

/* Percentages (relative to parent width) */
margin: 5%;
                                    

Special Values

/* Auto - browser calculates */
margin: auto;

/* Negative margins */
margin: -10px;  /* Pulls element closer */

/* Inherit from parent */
margin: inherit;
                                    

Visual Example: Margin Spacing

Box 1 with margin-bottom: 30px

Box 2 with margin-left: 50px

Margin Collapse

When two vertical margins meet, they collapse into a single margin equal to the larger of the two. This doesn't happen with horizontal margins.

/* Example of margin collapse */
.box1 { margin-bottom: 20px; }
.box2 { margin-top: 30px; }
/* Actual space between boxes: 30px (not 50px) */
                        

Padding Property

Padding creates space inside an element, between the content and the element's border. Padding is affected by the element's background color or image.

Padding Syntax

/* Individual Sides */
padding-top: 10px;
padding-right: 20px;
padding-bottom: 15px;
padding-left: 25px;

/* Shorthand - All sides same */
padding: 20px;

/* Shorthand - Vertical | Horizontal */
padding: 20px 40px;

/* Shorthand - Top | Horizontal | Bottom */
padding: 10px 20px 15px;

/* Shorthand - Top | Right | Bottom | Left (clockwise) */
padding: 10px 20px 30px 40px;
                    

Visual Example: Padding vs No Padding

No Padding: Text touches the border

With Padding: Space around content

Padding with Background

Padding extends the background color

Padding Characteristics

Padding values cannot be negative (unlike margin)
Padding adds to the total width and height of an element (unless using box-sizing: border-box)
Padding inherits the element's background
Percentage padding is calculated based on parent's width (even for top/bottom)

Display Property

The display property controls how an element is displayed in the document flow. It's one of the most important CSS properties for layout control.

Common Display Values

display: block

Element takes up full width available, starts on new line

div { display: block; }
/* Examples: div, p, h1-h6, section */
                                    

Block Element 1

Block Element 2

display: inline

Element takes only needed width, flows with text

span { display: inline; }
/* Examples: span, a, strong, em */
                                    

Inline 1 Inline 2 Inline 3

display: inline-block

Combines inline flow with block properties

.box { display: inline-block; }
/* Can set width/height, flows inline */
                                    

Box 1

Box 2

display: none

Element is completely hidden and removed from flow

.hidden { display: none; }
/* Element doesn't take any space */
                                    

Note: Different from visibility: hidden which hides but keeps space

Modern Display Values

/* Flexbox - for flexible layouts */
.container {
    display: flex;
    justify-content: space-between;
}

/* Grid - for 2D grid layouts */
.grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}

/* Table display values */
.table { display: table; }
.table-row { display: table-row; }
.table-cell { display: table-cell; }
                    

The CSS Box Model

Every HTML element is rendered as a rectangular box. The CSS box model describes how the dimensions of these boxes are calculated.

Box Model Components

Margin (transparent)

Border

Padding

Content
Actual element content

Box Model Properties

/* Standard Box Model */
.box {
    width: 300px;           /* Content width */
    height: 200px;          /* Content height */
    padding: 20px;          /* Adds to width/height */
    border: 5px solid #333; /* Adds to width/height */
    margin: 10px;           /* Outside spacing */
}
/* Total width = 300 + 20*2 + 5*2 = 350px */
/* Total height = 200 + 20*2 + 5*2 = 250px */

/* Alternative Box Model (recommended) */
.box-border-box {
    box-sizing: border-box;
    width: 300px;           /* Total width including padding and border */
    padding: 20px;
    border: 5px solid #333;
}
/* Content width = 300 - 20*2 - 5*2 = 250px */
                    

Box-Sizing Property

The box-sizing property changes how width and height are calculated:

content-box (default): width/height only includes content
border-box (recommended): width/height includes content, padding, and border

/* Apply to all elements (common practice) */
* {
    box-sizing: border-box;
}
                        

Practical Examples

Example 1: Creating a Centered Card

<!DOCTYPE html>
<html>
<head>
    <style>
        .card {
            width: 400px;
            margin: 50px auto;        /* Centers horizontally */
            padding: 30px;
            background: white;
            border: 1px solid #ddd;
            text-align: center;
        }

        .card h2 {
            margin: 0 0 15px 0;      /* Bottom margin only */
        }

        .card p {
            margin: 0;
            padding: 15px 0;
        }
    </style>
</head>
<body>
    <div class="card">
        <h2>Welcome Card</h2>
        <p>This card is centered with proper spacing.</p>
    </div>
</body>
</html>
                    

Example 2: Navigation Bar with Inline-Block

<style>
    .nav {
        background: #333;
        padding: 0;
        margin: 0;
        text-align: center;
    }

    .nav-item {
        display: inline-block;
        padding: 15px 25px;
        color: white;
        text-decoration: none;
    }

    .nav-item:hover {
        background: #555;
    }
</style>

<nav class="nav">
    <a href="#" class="nav-item">Home</a>
    <a href="#" class="nav-item">About</a>
    <a href="#" class="nav-item">Services</a>
    <a href="#" class="nav-item">Contact</a>
</nav>
                    

Example 3: Article with Proper Spacing

<style>
    .article {
        max-width: 800px;
        margin: 0 auto;
        padding: 40px 20px;
    }

    .article h1 {
        margin: 0 0 20px 0;
        padding-bottom: 15px;
        border-bottom: 2px solid #333;
    }

    .article p {
        margin: 15px 0;
        padding: 0;
        line-height: 1.6;
    }

    .article .highlight {
        display: inline-block;
        padding: 5px 10px;
        background: #ffeb3b;
        margin: 0 5px;
    }
</style>
                    

Common Layout Patterns

Centering Block Element

.center {
    width: 80%;
    margin: 0 auto;
}
                                    

Equal Spacing

.section {
    margin: 20px 0;
    padding: 20px;
}
                                    

Remove Margins

h1, p {
    margin: 0;
    padding: 0;
}
                                    

Session Summary

Key Points

Text-align: Controls horizontal alignment of inline content (left, center, right, justify)
Margin: Creates space outside elements, can be negative, margins collapse vertically
Padding: Creates space inside elements, inherits background, always positive
Display: Controls element layout behavior (block, inline, inline-block, none, flex, grid)
Box Model: Every element is a box with content, padding, border, and margin
Box-sizing: Use border-box for more intuitive width calculations

Best Practices

Use margin: 0 auto; to center block elements
Apply box-sizing: border-box; globally for easier layouts
Use consistent spacing units (rem or px) throughout your design
Reset default margins and padding on elements when needed
Use padding for internal spacing, margin for external spacing

Next Session Preview

In the next session, we'll explore CSS styling for backgrounds and borders, learning how to create visually appealing designs with colors, gradients, images, and border styles.