What is CSS (Cascading Style Sheets)

CSS or Cascading Style Sheets is a stylesheet language used to describe the appearance and formatting of HTML documents. CSS separates content (HTML structure) from presentation (visual appearance), enabling web developers to control the design, layout, and look of a web page efficiently.

CSS was first introduced by Håkon Wium Lie in 1996 as part of a collaborative project with Tim Berners-Lee (the creator of the WWW). Since then, CSS has undergone several important revisions:

• CSS1 (1996): The first version, which introduced basic styling concepts such as fonts, colors, margins, borders, and padding. It supported selectors, classes, and IDs.
• CSS2 (1998): Added positioning features (z-index, float), media types, table styling, and more advanced layout features. CSS2.1 is a minor revision to fix ambiguities.
• CSS3 (since 2011): Designed as separate modules (modular approach). Introduced animations, transitions, transforms, flexbox, grid, media queries, and many other modern features.

The Purpose of CSS

The main purpose of CSS is separating content from presentation. With CSS, developers can change the appearance of an entire site by editing a single stylesheet, without touching the HTML structure at all.

The Advantages of CSS

1. Maintainability: Appearance changes are made in one file, not on each page individually.
2. Consistency: Every web page has a uniform appearance because they all use the same stylesheet.
3. Responsive Design: Media queries allow the appearance to adapt to various screen sizes (mobile, tablet, desktop).
4. SEO (Search Engine Optimization): Cleaner HTML (without inline styles) is easier for search engines to index.
5. Performance: CSS files can be cached by the browser, reducing page load time.

The Three Types of CSS

1. Inline CSS

Inline CSS is written directly on an HTML element using the style attribute. This method has the highest priority but is hard to maintain.

<h1 style="color: blue; font-size: 24px;">Title with Inline CSS</h1>
<p style="color: gray; line-height: 1.6;">Paragraph with inline styling.</p>

Pros: Fast for testing, highest priority.
Cons: Hard to maintain, cannot be cached, code is repeated in many places.

2. Internal CSS (Embedded CSS)

Internal CSS is written inside a <style> tag placed in the <head> section of an HTML document. It is suitable for styling a single page.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Internal CSS Example</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f5f5f5;
        }
        h1 {
            color: #333;
            text-align: center;
        }
        p {
            color: #666;
            line-height: 1.8;
        }
    </style>
</head>
<body>
    <h1>Page Title</h1>
    <p>Paragraph with internal CSS.</p>
</body>
</html>

Pros: More organized than inline, suitable for a single page.
Cons: Cannot be shared with other pages, increases the HTML size.

3. External CSS

External CSS is stored in a separate file with a .css extension and linked to the HTML using a <link> tag. This is the most recommended method.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>External CSS Example</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <h1>Page Title</h1>
    <p>Paragraph with external CSS.</p>
</body>
</html>

/* styles.css */
body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: #ffffff;
    margin: 0;
    padding: 20px;
}

h1 {
    color: #2c3e50;
    border-bottom: 2px solid #3498db;
    padding-bottom: 10px;
}

p {
    color: #555;
    line-height: 1.8;
    max-width: 800px;
    margin: 0 auto;
}

Pros: Can be used on many pages, can be cached by the browser, separated from the HTML.
Cons: One extra HTTP request (can be minimized with bundling).

@import Rule

In addition to <link>, external CSS can also be imported using the @import rule inside another CSS file or inside a <style> tag.

/* main.css */
@import url("reset.css");
@import url("variables.css");

body {
    font-family: Arial, sans-serif;
}

Comparing link vs @import

CSS Frameworks

Some popular CSS frameworks that make web development easier:

• Bootstrap: The most popular CSS framework, created by Twitter. Provides ready-to-use responsive components.
• Tailwind CSS: A utility-first framework that allows styling directly in HTML with utility classes.
• Bulma: A modern CSS framework based on Flexbox, without JavaScript.
• Foundation: A responsive framework used for enterprise projects.

Frameworks help speed up development, but a solid understanding of basic CSS is still essential for customization and debugging.

Summary

CSS is the foundation of modern web styling. Understanding the history, purpose, types, and inner workings of CSS is a crucial first step for every web developer. In the next tutorial, we will study CSS syntax, selectors, and various styling properties in depth.