Skip to content

Introduction to CSS

CSS (Cascading Style Sheets) is the language that makes websites beautiful. While HTML provides the structure, CSS controls the visual appearance and layout of web pages.

What is CSS?

CSS is a stylesheet language used to describe how HTML elements should be displayed. It controls colors, fonts, spacing, layout, and visual effects.

Key Characteristics

  • Stylesheet Language: Defines how HTML elements look
  • Separation of Concerns: Keeps styling separate from structure
  • Cascading: Multiple styles can apply, with rules for which takes priority
  • Universal: Works with all HTML elements

Why Learn CSS?

Essential for Web Development

  • Visual Design: Transform plain HTML into beautiful websites
  • User Experience: Create engaging, professional interfaces
  • Responsive Design: Make sites work on all devices
  • Career Essential: Required skill for frontend developers

What CSS Can Do

  • Colors and Backgrounds: Change text colors, background colors, and images
  • Typography: Control fonts, sizes, spacing, and text styling
  • Layout: Position elements, create columns, and design page structure
  • Animations: Add transitions and animations
  • Responsive Design: Adapt layouts for different screen sizes

How CSS Works

CSS works by selecting HTML elements and applying styles to them. The browser reads both HTML (structure) and CSS (styling) to render the final page.

The Relationship: HTML + CSS

HTML = Structure (skeleton)
CSS  = Styling (appearance)

Think of HTML as the foundation of a house, and CSS as the paint, furniture, and decoration.

CSS Syntax

CSS uses a simple syntax:

selector {
    property: value;
    property: value;
}

Example

h1 {
    color: blue;
    font-size: 32px;
}

This CSS: - Selects all <h1> elements - Sets the color to blue - Sets the font size to 32 pixels

Three Ways to Add CSS

CSS written directly in HTML elements:

<h1 style="color: blue; font-size: 32px;">Hello</h1>

When to use: Rarely - only for quick testing or single-use styles.

2. Internal CSS (Embedded)

CSS written in a <style> tag in the HTML <head>:

<!DOCTYPE html>
<html>
<head>
    <style>
        h1 {
            color: blue;
            font-size: 32px;
        }
    </style>
</head>
<body>
    <h1>Hello</h1>
</body>
</html>

When to use: Small projects or single-page sites.

CSS written in a separate .css file and linked to HTML:

styles.css:

h1 {
    color: blue;
    font-size: 32px;
}

index.html:

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <h1>Hello</h1>
</body>
</html>

When to use: Always for real projects - best practice!

!!! tip "Use External CSS" External CSS files are reusable, maintainable, and keep your code organized.

CSS Selectors

Selectors target HTML elements to style them:

Element Selector

Selects all elements of a specific type:

p {
    color: red;
}

Class Selector

Selects elements with a specific class (starts with .):

.highlight {
    background-color: yellow;
}

Used in HTML:

<p class="highlight">This text is highlighted.</p>

ID Selector

Selects an element with a specific ID (starts with #):

#header {
    background-color: blue;
}

Used in HTML:

<div id="header">Header content</div>

!!! warning "IDs Should Be Unique" Each ID should only be used once per page. Use classes for multiple elements.

CSS Properties

CSS has hundreds of properties. Common categories:

Color Properties

  • color - Text color
  • background-color - Background color
  • border-color - Border color

Typography Properties

  • font-family - Font type
  • font-size - Text size
  • font-weight - Boldness (normal, bold)
  • text-align - Alignment (left, center, right)

Layout Properties

  • width - Element width
  • height - Element height
  • margin - Space outside element
  • padding - Space inside element

CSS Comments

Add comments to document your code:

/* This is a CSS comment */

/* 
   This is a
   multi-line comment
*/

h1 {
    color: blue; /* Heading color */
}

Complete Example

index.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS Example</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <h1>Welcome to My Website</h1>
    <p class="intro">This is an introduction paragraph.</p>
    <p>This is a regular paragraph.</p>
</body>
</html>

styles.css:

/* Style the heading */
h1 {
    color: #333;
    font-size: 36px;
    text-align: center;
}

/* Style paragraphs with intro class */
.intro {
    font-size: 18px;
    color: #666;
    font-weight: bold;
}

/* Style all paragraphs */
p {
    line-height: 1.6;
    margin: 10px 0;
}

Browser Developer Tools

All modern browsers include developer tools to inspect and test CSS:

How to Open

  • Chrome/Edge: Press F12 or Ctrl+Shift+I (Windows) / Cmd+Option+I (Mac)
  • Firefox: Press F12 or Ctrl+Shift+I (Windows) / Cmd+Option+I (Mac)
  • Safari: Enable Developer menu, then press Cmd+Option+I

What You Can Do

  • Inspect elements and see their CSS
  • Modify CSS in real-time
  • See which styles are applied
  • Debug layout issues

!!! tip "Use Developer Tools" Developer tools are essential for learning and debugging CSS. Practice using them!

CSS Versions

Version Year Key Features
CSS1 1996 Basic styling
CSS2 1998 Positioning, media types
CSS3 1999+ Modules, animations, flexbox, grid
CSS4 In Development Advanced features

!!! note "We'll Focus on CSS3" Modern CSS (CSS3) is what you'll use. It's well-supported and includes all essential features.

Best Practices

  1. Use External Stylesheets: Keep CSS in separate files
  2. Use Meaningful Names: Name classes and IDs clearly
  3. Organize Your Code: Group related styles together
  4. Comment Your Code: Explain complex styles
  5. Start Simple: Learn basics before advanced features
  6. Test in Multiple Browsers: Ensure compatibility

Common Mistakes to Avoid

1. Inline Styles Everywhere

<!-- ❌ Wrong -->
<h1 style="color: blue; font-size: 32px;">Title</h1>
<p style="color: red; font-size: 16px;">Text</p>

<!-- ✅ Correct -->
<link rel="stylesheet" href="styles.css">
<h1>Title</h1>
<p>Text</p>

2. Using IDs for Styling

/* ❌ Wrong (IDs should be unique) */
#button {
    background: blue;
}

/* ✅ Correct (use classes) */
.button {
    background: blue;
}

3. Not Using External Files

<!-- ❌ Wrong (for larger projects) -->
<style>
    /* 500 lines of CSS here */
</style>

<!-- ✅ Correct -->
<link rel="stylesheet" href="styles.css">

Resources

What's Next?

In the following tutorials, you'll learn:

  1. CSS Syntax and Selectors - Master how to target and style elements
  2. Colors, Text, and Fonts - Control typography and colors
  3. Box Model and Layout - Understand spacing, sizing, and positioning
  4. Flexbox - Modern layout system for flexible designs
  5. Responsive Design - Make websites work on all devices
  6. Advanced Topics - Transitions, animations, and more

!!! success "You're Ready!" You now understand what CSS is and why it's essential. Let's start styling your web pages!

Next Tutorial: CSS Syntax and Selectors