Complete CSS Tutorial

Table of Contents

1. Introduction to CSS

CSS (Cascading Style Sheets) is a stylesheet language used to describe the presentation of a document written in HTML or XML (including XML dialects such as SVG, MathML). CSS describes how elements should be rendered on screen, on paper, in speech, or on other media.

It separates the content (HTML) from its visual presentation, making web development more efficient and manageable.

2. CSS Syntax

A CSS rule-set consists of a selector and a declaration block.

selector {
    property: value; /* Declaration 1 */
    property: value; /* Declaration 2 */
}
h1 { /* h1 is the selector */
    color: darkblue; /* color is property, darkblue is value */
    font-size: 36px; /* font-size is property, 36px is value */
    text-align: center;
}

.intro-text { /* .intro-text is the selector (class) */
    background-color: lightgrey;
    padding: 15px;
    border-radius: 8px;
}

Visual Example (Conceptual): An `h1` tag would appear dark blue, large, and centered. Any element with `class="intro-text"` would have a light grey background with padding and rounded corners.

3. Ways to Include CSS

There are three main ways to integrate CSS into your HTML document:

A. Inline CSS

Applied directly within an HTML tag using the `style` attribute. Useful for single, unique style applications, but generally discouraged for larger projects due to poor maintainability and separation of concerns.

<h3 style="color: purple; font-style: italic;">This heading is styled inline.</h3>
<p style="background-color: yellow; padding: 5px;">This paragraph has an inline background.</p>

Visual Example:

This heading is styled inline.

This paragraph has an inline background.

B. Internal (Embedded) CSS

Placed within a `<style>` tag in the `<head>` section of the HTML document. Good for single HTML pages or when styles are specific to that page and won't be reused elsewhere.

<head>
    <style>
        .internal-box {
            border: 2px solid green;
            padding: 10px;
            background-color: lightgreen;
        }
        .internal-text {
            text-decoration: underline;
            color: darkgreen;
        }
    </style>
</head>
<body>
    <div class="internal-box">
        <p class="internal-text">This content is styled internally.</p>
    </div>
</body>

Visual Example:

This content is styled internally.

C. External CSS (Recommended)

The most common and recommended method for styling. Styles are written in a separate `.css` file and linked to the HTML document using the `<link>` tag in the `<head>` section. This promotes reusability, maintainability, and cleaner HTML.

<head>
    <link rel="stylesheet" href="styles.css"> <!-- Link to your external CSS file -->
</head>
<body>
    <h2 class="external-styled-heading">This heading is from an external stylesheet.</h2>
    <p>All content will be influenced by 'styles.css'.</p>
</body>

And in your `styles.css` file (which would be in the same directory or specified path):

/* styles.css */
body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.external-styled-heading {
    color: #4a5568;
    background-color: #edf2f7;
    padding: 10px;
    border-left: 5px solid #667eea;
}

Visual Example:

This heading is from an external stylesheet.

All content will be influenced by 'styles.css'.

4. CSS Selectors

Selectors are used to "find" (or select) HTML elements based on their name, id, class, attributes, etc., to apply styles.

5. CSS Box Model

The CSS Box Model describes how HTML elements are rendered as boxes. Every element is a rectangular box, and this box is made up of: content, padding, border, and margin.

.box {
    width: 200px;
    height: 100px;
    padding: 20px; /* Space inside */
    border: 5px solid blue; /* Border around padding */
    margin: 30px; /* Space outside */
    background-color: lightcyan;
    box-sizing: border-box; /* Crucial for consistent sizing */
}

Visual Example:

Content

This text is below the box, affected by its margin.

`box-sizing` Property:

6. CSS Display Property

The `display` property is one of the most important CSS properties for controlling the layout of elements.

7. CSS Positioning

The `position` property controls how an element is positioned on the page. It works with `top`, `bottom`, `left`, `right` properties.

8. CSS Flexbox (Flexible Box Layout)

Flexbox is a one-dimensional layout system for arranging items in a single row or column. It's incredibly powerful for distributing space among items and aligning them within a container.

Main Concepts:

Common Flexbox Properties:

<div class="flexbox-container">
    <div class="flexbox-item">Item A</div>
    <div class="flexbox-item">Item B</div>
    <div class="flexbox-item">Item C</div>
</div>
.flexbox-container {
    display: flex; /* Makes it a flex container */
    justify-content: space-around; /* Distributes items with space around */
    align-items: center; /* Vertically centers items */
    gap: 10px;
}
.flexbox-item {
    flex: 1; /* Allows items to grow and shrink equally */
    background-color: #a5d6ff;
    padding: 15px;
    border: 1px solid #4a90e2;
}

Visual Example (Flexbox with `justify-content: space-around;` and `align-items: center;`):

Item A
Item B
Item C

Items are spaced horizontally and centered vertically.

Visual Example (Flexbox with `flex-wrap: wrap;`):

Item 1
Item 2
Item 3
Item 4

Items wrap to the next line if container is too narrow.

9. CSS Grid (Grid Layout)

CSS Grid is a two-dimensional layout system that allows you to arrange elements in rows and columns. It's ideal for defining overall page layouts or complex sections.

Main Concepts:

Common Grid Properties:

<div class="grid-container grid-example-columns">
    <div class="grid-item">Col 1</div>
    <div class="grid-item">Col 2 (Wider)</div>
    <div class="grid-item">Col 3</div>
    <div class="grid-item">Item 4</div>
    <div class="grid-item">Item 5</div>
    <div class="grid-item">Item 6</div>
</div>
.grid-container {
    display: grid;
    gap: 10px;
    padding: 10px;
    border: 1px solid #764ba2;
    background-color: #f3e6ff;
}
.grid-example-columns {
    grid-template-columns: 1fr 2fr 1fr; /* Three columns: 1 part, 2 parts, 1 part */
}
.grid-item {
    background-color: #c399e2;
    padding: 15px;
    text-align: center;
    color: #1a202c;
}

Visual Example (Grid with `grid-template-columns: 1fr 2fr 1fr;`):

Col 1
Col 2 (Wider)
Col 3
Item 4
Item 5
Item 6

Items are arranged in a 3-column grid, with the middle column twice as wide.

Visual Example (Grid with `grid-column: span 2;`):

Item A
Item B (Spans 2 Columns)
Item C
Item D

Item B stretches across two columns.

10. CSS Typography

Styling text is a core part of CSS. Key properties include:

.custom-text {
    font-family: Georgia, serif;
    font-size: 1.2rem;
    color: #336699;
    text-align: justify;
    line-height: 1.7;
    text-decoration: underline;
    text-transform: capitalize;
    letter-spacing: 0.5px;
}

Visual Example:

this is some sample text to demonstrate css typography properties. Each word starts with a capital letter, the text is justified, and it is underlined. The line height is also increased.

11. CSS Colors & Backgrounds

Colors:

Can be defined using: 

.color-box {
    background-color: #f0f8ff; /* AliceBlue */
    color: rgb(75, 0, 130); /* Indigo */
    border: 2px solid rgba(0, 128, 0, 0.7); /* Semi-transparent green */
    padding: 10px;
}

Visual Example:

This box uses various color formats.

Backgrounds:

.hero-banner {
    background: url('https://via.placeholder.com/400x100/ADD8E6/000000?text=Background') no-repeat center center / cover;
    height: 150px;
    color: #333;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5em;
    font-weight: bold;
}

Visual Example:

HERO SECTION

12. CSS Transitions

CSS transitions allow you to create smooth animated changes to CSS properties over a specified duration when an element's state changes (e.g., on hover, focus, or class change).

.animated-box {
    width: 100px;
    height: 100px;
    background-color: #ff7b72;
    transition: background-color 0.5s ease-in-out, transform 0.5s ease-out; /* Smooth transition */
}
.animated-box:hover {
    background-color: #a5d6ff; /* Changes color on hover */
    transform: scale(1.1) rotate(5deg); /* Grows and rotates */
}

Visual Example:

Hover Me!

(Hover over the box above to see the smooth transition.)

13. CSS Animations

CSS animations allow for more complex, multi-step animations. They are defined using `@keyframes` rules and then applied to elements.

@keyframes bounce {
    0% { transform: translateY(0); }
    50% { transform: translateY(-20px); }
    100% { transform: translateY(0); }
}

.bouncing-ball {
    width: 50px;
    height: 50px;
    background-color: blue;
    border-radius: 50%;
    animation: bounce 1s infinite ease-in-out; /* Apply animation */
}

Visual Example:

Pulse

(The circle above demonstrates a pulsing animation.)

14. Responsive CSS (Media Queries)

Media queries allow you to apply CSS styles conditionally based on device characteristics like screen width, height, resolution, and orientation. This is fundamental for responsive web design.

/* Default styles (for larger screens first - 'mobile-last' approach) */
.my-card {
    width: 300px;
    padding: 20px;
    margin: 10px;
    background-color: lightblue;
    box-shadow: 2px 2px 5px rgba(0,0,0,0.2);
}

/* Styles for screens up to 768px wide (tablets and smaller) */
@media (max-width: 768px) {
    .my-card {
        width: 90%; /* Take up more width on smaller screens */
        margin: 10px auto; /* Center the card */
        background-color: lightcoral; /* Change color for visual distinction */
    }
}

/* Styles for screens smaller than 480px wide (phones) */
@media (max-width: 480px) {
    .my-card {
        font-size: 0.9em; /* Smaller font size on tiny screens */
        padding: 15px;
    }
}

Visual Example:

Resize your browser window horizontally to see the box below change its background color and size based on the screen width.

This box adapts based on screen size.

(On a live page, this box would change color to lightcoral on screens < 768px and text size on screens < 480px.)

15. Best Practices

Keep Practicing!

CSS is a vast and powerful language. The best way to learn is by building projects, experimenting with properties, and using your browser's developer tools to inspect and modify styles live. Don't be afraid to break things and learn from your mistakes!