Lesson 1: Introduction to CSS

Learn how CSS transforms HTML elements into visually appealing web pages. Understand the core concepts of styling with practical examples.

Start Learning

What is CSS?

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

CSS separates content from presentation. This separation improves content accessibility, provides more flexibility in presentation, and reduces complexity in HTML documents.

Basic CSS Syntax

A CSS rule consists of a selector and a declaration block:

selector {
    property: value;
    /* This is a CSS comment */
}
Selector: Points to the HTML element you want to style
Declaration: A property-value pair that defines a style
Declaration Block: Contains one or more declarations

Ways to Apply CSS

CSS can be applied to HTML documents in three ways:

1. Inline CSS

Applied directly to an HTML element using the style attribute:

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

Hello World

2. Internal CSS

Defined within a <style> element in the HTML <head>:

<head>
    <style>
        h1 {
            color: green;
            font-size: 28px;
        }
    </style>
</head>

Hello World

3. External CSS

Defined in a separate .css file and linked to the HTML document:

<head>
    <link rel="stylesheet" href="styles.css">
</head>

In styles.css:

h1 {
    color: #ff5722;
    font-size: 32px;
}

Hello World

Practical CSS Examples

Explore these practical CSS examples to see styling in action:

Text Styling:

h2 {
    color: #2196f3;
    font-family: 'Arial', sans-serif;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 2px;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.2);
}

Result:

Styled Heading

This heading demonstrates various text styling properties.

Box Model:

.box {
    width: 200px;
    height: 150px;
    background: #ff9800;
    color: white;
    padding: 20px;
    border: 3px solid #e65100;
    border-radius: 10px;
    margin: 20px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

Result:

CSS Box Model

Interactive CSS Demo

Try changing the CSS properties to see how they affect the element:

Controls

Result

Interactive Box

Generated CSS

#interactiveResult {
  background: #4caf50;
  width: 200px;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

CSS Best Practices

Follow these best practices when writing CSS:

Use external stylesheets for better maintainability and reusability
Organize your CSS with comments and logical grouping of related styles
Use consistent naming conventions like BEM (Block, Element, Modifier)
Keep specificity low to avoid "specificity wars" in your stylesheets
Minify CSS for production to reduce file size and improve load times

Next Steps

Continue your CSS journey with the next lesson on CSS Selectors.

CSS Home Lesson 2: Basic Selectors