🎨 Lesson 7: Introduction to CSS

What is CSS? CSS stands for Cascading Style Sheets. It's used to style and layout web pages - controlling colors, fonts, spacing, positioning, and more.

Why CSS?

Without CSS, all websites would look plain and unstyled. CSS allows you to:

Change colors, fonts, and text sizes
Add spacing and margins
Create layouts and position elements
Add animations and transitions
Make responsive designs for mobile and desktop
Separate style from content

Three Ways to Add CSS

1. Inline Styles

Add CSS directly to an HTML element with the style attribute:

<p style="color: blue; font-size: 18px;">This paragraph is blue.</p>

This paragraph is blue.

2. Internal Stylesheet

Add CSS in the <head> section inside <style> tags:

<head>
    <style>
        p {
            color: green;
            font-size: 16px;
        }
    </style>
</head>
<body>
    <p>This paragraph is green.</p>
</body>
        

3. External Stylesheet (BEST PRACTICE)

Create a separate CSS file and link it in the HTML:

<!-- In your HTML file -->
<head>
    <link rel="stylesheet" href="styles.css">
</head>

<!-- In styles.css -->
p {
    color: purple;
    font-size: 16px;
}
        

CSS Rule Structure

selector {
    property: value;
    property: value;
}

Breaking it down:

Selector: Which HTML element(s) to style
Property: What aspect to change (color, size, etc.)
Value: What the property should be set to

Simple Example

h1 {
    color: #667eea;
    font-size: 32px;
    text-align: center;
}
        

This CSS rule sets all <h1> elements to be blue, 32 pixels large, and centered.

Common CSS Properties

Property	Purpose	Example
color	Text color	color: blue;
background-color	Background color	background-color: yellow;
font-size	Size of text	font-size: 18px;
font-family	Font typeface	font-family: Arial;
margin	Space outside element	margin: 20px;
padding	Space inside element	padding: 15px;
border	Edge around element	border: 1px solid black;

Before and After Example

WITHOUT CSS

This is plain text in default browser style. No colors, no spacing, just basic HTML.

WITH CSS

This text has been styled with CSS. Notice the color, spacing, and improved readability.

CSS Cascade and Specificity

CSS stands for "Cascading" Style Sheets because:

Multiple styles can apply to the same element
Styles "cascade" - later rules override earlier ones
More specific selectors override less specific ones
Inline styles override everything

Comments in CSS

Use comments to explain your CSS code:

/* This is a single-line comment */

/* This is a multi-line comment
   that spans multiple lines
   to explain complex styles */

p {
    color: blue; /* Set text color to blue */
}
        

Key Takeaways

CSS is used to style and layout web pages
CSS rules have selectors, properties, and values
External stylesheets are the best practice
CSS properties control appearance (color, size, spacing, etc.)
Later rules override earlier ones (cascade)

← Back to Course | ← Previous | Next: Selectors & Properties →