Introduction to CSS and Styling

Welcome to CSS!

Today we're embarking on an exciting journey into the world of Cascading Style Sheets (CSS) - the styling language that transforms plain HTML documents into visually appealing websites. If HTML is the skeleton of a webpage, CSS is the skin, clothes, makeup, and overall appearance. Without CSS, the web would be a plain, text-only experience reminiscent of the early 1990s.

In this session, we'll explore the fundamentals of CSS, learn about its relationship with HTML, and start building the skills you'll need to create beautiful, responsive web designs.

File Organization

Before we dive in, let's talk about file organization. For your CSS files:

Location: Store your CSS files in a dedicated folder, typically named styles or css
Naming convention: Use descriptive names without spaces or hyphens; use underscores instead (e.g., main_styles.css, responsive_layout.css)
Link relationship: CSS files are linked to HTML documents using the <link> element in the <head> section

For this session, we'll be working with a file named main.css in a folder called styles.

What is CSS?

CSS (Cascading Style Sheets) is a style sheet 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.

Think of CSS as a set of instructions for the browser - like a detailed painting guide that explains exactly how the HTML structure should look to the user.

CSS Analogy: The Building Metaphor

Imagine building a house:

HTML is the structural framework - the foundation, walls, and roof that give the house its basic shape and functionality
CSS is everything that makes the house visually appealing and livable - the paint colors, furniture arrangement, lighting, and decorative elements
Just as you wouldn't try to build a house by starting with paint colors, you shouldn't design a website by starting with CSS. Structure (HTML) comes first, then style (CSS).

The Evolution of CSS

Before CSS, styling a webpage required using HTML attributes and tags like <font> and bgcolor. This approach had several problems:

It mixed content (what the page says) with presentation (how the page looks)
It required repeating style information throughout the document
It made site-wide style changes extremely difficult

CSS solved these problems by separating content from presentation, allowing for:

Cleaner HTML focused on content
Centralized style rules that apply throughout a website
Greater control over presentation
Easier maintenance

How to Add CSS to Your HTML Documents

There are three ways to incorporate CSS into your web pages:

1. External CSS (Recommended)

External CSS involves creating a separate .css file and linking to it from your HTML document. This is the preferred method for most websites.

In your HTML file's <head> section:

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

In styles/main.css:

body {
    font-family: Arial, sans-serif;
    line-height: 1.6;
    color: #333;
    background-color: #f4f4f4;
}

h1 {
    color: #0066cc;
}

Real-world application: External CSS is like having a company style guide that ensures consistent branding across all materials. Large websites might have multiple CSS files for different sections or features, all working together for a cohesive look.

2. Internal CSS (Style Element)

Internal CSS is defined within a <style> element in the <head> section of an HTML document.

<head>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f4f4f4;
        }
        h1 {
            color: #0066cc;
        }
    </style>
</head>

Use case: Internal CSS is useful for single-page documents or when you need page-specific styles that differ from your main website. Think of it like special decoration for just one room in your house.

3. Inline CSS (Style Attribute)

Inline CSS applies styles directly to individual HTML elements using the style attribute.

<h1 style="color: #0066cc; font-size: 32px;">Welcome to My Website</h1>

Use case: Inline CSS should be used sparingly, primarily for unique, one-off styling needs or when styles need to be applied dynamically (e.g., through JavaScript). It's like hanging a single, special picture frame that doesn't match any others in your house.

The Cascade: Why "Cascading" is in the Name

The "cascading" in CSS refers to how styles are applied and prioritized. When multiple style rules conflict, a specific order determines which rule "wins." The cascade follows this priority (from highest to lowest):

Inline styles (style attribute)
Internal and external stylesheets (determined by order and specificity)
Browser default styles

This is like layers of authority in a organization - the CEO's decision (inline style) overrides the department manager's policy (internal/external CSS), which overrides the employee handbook (browser defaults).

CSS Syntax: The Building Blocks

Understanding CSS syntax is like learning the grammar of a new language. Let's break down the components:

selector {
    property: value;
    another-property: value;
}

Example:

h1 {
    color: blue;
    font-size: 24px;
    margin-bottom: 15px;
}

Let's analyze this:

Selector (h1): Points to the HTML element you want to style
Declaration block: Everything between the curly braces
Declaration: Each property-value pair (e.g., color: blue;)
Property (color): The aspect you want to style
Value (blue): The setting you assign to the property
Semicolon (;): Ends each declaration (like a period in a sentence)

Analogy: Think of CSS as a series of instructions for a painting:

The selector is like saying "For the sky part of the painting..."
The properties and values are the instructions: "...use blue paint, make it cover 50% of the canvas, and blend it at the edges."

Common Syntax Errors to Avoid

Forgetting semicolons between declarations
Missing opening or closing curly braces
Typos in property names or values
Using colons instead of semicolons (or vice versa)

Pro tip: Modern code editors like VS Code will highlight syntax errors and provide autocompletion to help avoid these mistakes!

CSS Selectors: Targeting Elements

Selectors are patterns that match HTML elements. They're how you specify which elements should receive a particular style. Mastering selectors is crucial for efficient CSS.

Basic Selector Types

Element Selector

Targets all instances of a specific HTML element.

p {
    line-height: 1.6;
    margin-bottom: 15px;
}

This applies styles to all <p> elements on the page.

Class Selector

Targets elements with a specific class attribute. Use a period (.) before the class name.

/* In CSS */
.highlight {
    background-color: yellow;
    font-weight: bold;
}

/* In HTML */
<p class="highlight">This paragraph will be highlighted.</p>

Real-world use: Classes are like categories or tags for styling. Just as you might categorize clothes as "casual," "formal," or "athletic," classes help organize elements for styling purposes. A single element can have multiple classes, separated by spaces.

ID Selector

Targets a single element with a specific ID attribute. Use a hash (#) before the ID name.

/* In CSS */
#header {
    background-color: #333;
    color: white;
    padding: 20px;
}

/* In HTML */
<div id="header">Website Header</div>

Important: IDs must be unique on a page. Think of them like Social Security numbers - each person gets exactly one, and no two people share the same number.

Combining Selectors

You can combine selectors to target elements more precisely:

/* Targets paragraphs with the class "note" */
p.note {
    font-style: italic;
    color: #666;
}

/* Targets elements with both "alert" and "error" classes */
.alert.error {
    background-color: #ffdddd;
    border: 1px solid #ff0000;
}

Selector Specificity: The Rules of Precedence

When multiple selectors target the same element with conflicting styles, specificity determines which one wins.

Specificity hierarchy (from lowest to highest):

Element selectors (e.g., p, h1)
Class selectors, attribute selectors, pseudo-classes (e.g., .highlight, :hover)
ID selectors (e.g., #header)
Inline styles (using the style attribute)

Analogy: Specificity is like security clearance in a classified facility. Someone with "Top Secret" clearance (ID selector) can override decisions made by someone with "Secret" clearance (class selector), who can override someone with "Confidential" clearance (element selector).

/* Specificity battle example */
p {
    color: blue;              /* Least specific */
}
.text {
    color: red;               /* More specific */
}
#unique {
    color: green;             /* Most specific */
}

<p class="text" id="unique">What color will I be?</p>

In this example, the text will be green because the ID selector has the highest specificity.

Working with Colors in CSS

Colors are fundamental to web design. CSS offers several ways to specify colors.

Color Notation Methods

1. Color Names

CSS recognizes 140+ color names like red, blue, green, purple, etc.

h1 {
    color: navy;
}
button {
    background-color: tomato;
}

Best for: Quick prototyping or when exact color precision isn't critical.

2. Hexadecimal Colors

Six-digit codes preceded by a hash (#) representing RGB values in base-16.

body {
    background-color: #f5f5f5; /* Light gray */
}
footer {
    background-color: #1a1a1a; /* Very dark gray */
    color: #ffffff;            /* White */
}

Each pair of characters represents red, green, and blue values from 00 (none) to FF (maximum).

Shorthand: When each color channel has repeating digits, you can use 3-digit shorthand:

#ff0000 → #f00  /* Red */
#00ff00 → #0f0  /* Green */
#0000ff → #00f  /* Blue */

3. RGB and RGBA

Specifies red, green, and blue values on a scale of 0-255. RGBA adds an alpha channel for transparency (0-1).

header {
    background-color: rgb(30, 144, 255);  /* Dodger blue */
}
.overlay {
    background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent black */
}

Real-world use: RGBA is particularly useful for creating overlays, shadows, and transparent elements that let content underneath partially show through.

4. HSL and HSLA

Represents colors using Hue, Saturation, and Lightness. HSLA adds an alpha channel.

.brand-color {
    color: hsl(204, 70%, 53%);       /* Blueish */
}
.tooltip {
    background-color: hsla(50, 100%, 50%, 0.8); /* Semi-transparent gold */
}

Advantage: HSL makes it intuitive to create color variations. Keep the same hue (first value) and adjust saturation or lightness to create related colors that work well together.

Color Psychology and Web Design

Colors evoke emotional responses and have cultural associations:

Red: Excitement, passion, attention, warning
Blue: Trust, calmness, professionalism, reliability
Green: Growth, health, nature, wealth
Yellow: Optimism, happiness, caution
Black: Luxury, sophistication, power
White: Simplicity, cleanliness, purity

Real-world application: Notice how financial websites often use blue to convey trust, while sale prices are frequently highlighted in red to create urgency.

The CSS Box Model: Understanding Layout

Every HTML element is represented as a rectangular box. The CSS box model describes these boxes and their properties.

Components of the Box Model

Content: The actual content of the element (text, images, etc.)
Padding: Space between the content and the border
Border: A line that surrounds the padding and content
Margin: Space outside the border, separating the element from others

Analogy: Think of the box model like a framed picture:

The content is the photograph itself
The padding is the matting around the photo
The border is the picture frame
The margin is the space you leave between frames when hanging multiple pictures

Box Model Properties

.box {
    /* Content dimensions */
    width: 300px;
    height: 200px;
    
    /* Padding (inner space) */
    padding-top: 20px;
    padding-right: 15px;
    padding-bottom: 20px;
    padding-left: 15px;
    /* Shorthand: padding: 20px 15px 20px 15px; */
    /* Further shorthand: padding: 20px 15px; (top/bottom right/left) */
    
    /* Border */
    border-width: 2px;
    border-style: solid;
    border-color: #333;
    /* Shorthand: border: 2px solid #333; */
    
    /* Margin (outer space) */
    margin-top: 30px;
    margin-right: 10px;
    margin-bottom: 30px;
    margin-left: 10px;
    /* Shorthand: margin: 30px 10px 30px 10px; */
    /* Further shorthand: margin: 30px 10px; (top/bottom right/left) */
}

Box-Sizing Property

By default, the width and height properties only set the size of the content area, not including padding or border. This can make layout calculations difficult.

The box-sizing property changes this behavior:

/* Default behavior */
.content-box {
    box-sizing: content-box;
    width: 300px;
    padding: 20px;
    border: 10px solid black;
    /* Total width: 300px + 40px padding + 20px border = 360px */
}

/* Alternative behavior */
.border-box {
    box-sizing: border-box;
    width: 300px;
    padding: 20px;
    border: 10px solid black;
    /* Total width: 300px (includes content, padding, and border) */
}

Modern practice: Many developers apply box-sizing: border-box; to all elements for more intuitive sizing:

* {
    box-sizing: border-box;
}

Real-world application: The box model is crucial for page layouts. Understanding it helps you create precise designs and troubleshoot spacing issues. For example, when creating a multi-column layout, you need to account for the full box size of each column (including margins, padding, and borders) to prevent unwanted wrapping or overflow.

Text Styling Fundamentals

Text is a primary component of most web pages. CSS offers extensive control over how text appears.

Typography Properties

Font Family

The font-family property specifies which font(s) to use.

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

List multiple fonts as fallbacks in case some aren't available. The browser will use the first available font in the list.

Font categories:

Serif fonts: Have small lines at the ends of characters (e.g., Times New Roman, Georgia)
Sans-serif fonts: Clean, without serifs (e.g., Arial, Helvetica, Roboto)
Monospace fonts: All characters have the same width (e.g., Courier, Consolas)
Cursive fonts: Mimic handwriting (e.g., Comic Sans, Brush Script)
Fantasy fonts: Decorative, for titles and headings (e.g., Impact)

Font Weight

The font-weight property controls text thickness.

h1 {
    font-weight: bold; /* or 700 */
}
p {
    font-weight: normal; /* or 400 */
}
.light-text {
    font-weight: 300;
}

Values:

normal: Default weight (equivalent to 400)
bold: Bold weight (equivalent to 700)
Numeric values: From 100 (thinnest) to 900 (thickest), in increments of 100

Text Alignment

The text-align property controls horizontal text alignment.

.center {
    text-align: center;
}
.right {
    text-align: right;
}
.justify {
    text-align: justify;
}

Line Height

The line-height property controls the vertical space between lines of text.

p {
    line-height: 1.6; /* 1.6 times the font size */
}
.tight {
    line-height: 1.2;
}
.spacious {
    line-height: 2;
}

Readability tip: Line heights between 1.4 and 1.6 are generally considered optimal for body text readability on screens.

Text Decoration

The text-decoration property adds or removes lines on text.

a {
    text-decoration: none; /* Removes underline from links */
}
.emphasis {
    text-decoration: underline;
}
.strike {
    text-decoration: line-through;
}

Text Transform

The text-transform property controls text capitalization.

.uppercase {
    text-transform: uppercase;
}
.capitalize {
    text-transform: capitalize; /* First letter of each word */
}
.lowercase {
    text-transform: lowercase;
}

Web Fonts: Beyond System Fonts

Web fonts allow you to use custom fonts not installed on users' computers.

Google Fonts Example

<!-- In HTML head -->
<head>
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
</head>

/* In CSS */
body {
    font-family: 'Roboto', sans-serif;
}

Real-world application: Typography is crucial for brand identity. Companies often use custom fonts across their digital and print materials for consistent brand recognition. For example, Netflix uses its custom "Netflix Sans" font across its platform.

Backgrounds and Borders

Backgrounds and borders are essential for creating visual divisions and interest in your layouts.

Background Properties

Background Color

.card {
    background-color: #f8f9fa;
}

Background Image

header {
    background-image: url('/images/header_bg.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

Background properties:

background-size: Controls image size (cover, contain, specific dimensions)
background-position: Places the image (top, center, bottom, left, right, or specific coordinates)
background-repeat: Controls tiling (repeat, no-repeat, repeat-x, repeat-y)
background-attachment: Controls scrolling behavior (scroll, fixed, local)

Background Shorthand

.hero {
    background: #333 url('/images/hero.jpg') center / cover no-repeat fixed;
}

Multiple Backgrounds

.layered {
    background: 
        linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)),
        url('/images/texture.jpg');
}

Border Properties

Basic Border

.box {
    border-width: 2px;
    border-style: solid;
    border-color: #333;
    
    /* Shorthand */
    border: 2px solid #333;
}

Border Styles

Common styles include: solid, dashed, dotted, double, groove, ridge, inset, outset.

.dashed-box {
    border: 2px dashed #999;
}
.dotted-box {
    border: 2px dotted #999;
}

Individual Border Sides

.custom-borders {
    border-top: 2px solid red;
    border-right: 3px dashed blue;
    border-bottom: 4px dotted green;
    border-left: 5px double orange;
}

Border Radius

Creates rounded corners.

.rounded {
    border-radius: 5px;
}
.circle {
    border-radius: 50%; /* Creates a circle if height = width */
}
.custom-shape {
    border-radius: 10px 20px 30px 40px; /* top-left, top-right, bottom-right, bottom-left */
}

Real-world application: Modern UI design often features subtle rounded corners (8-12px) on cards, buttons, and input fields to create a softer, more approachable look. Fully rounded elements (50% border-radius) are commonly used for profile pictures, notification badges, and action buttons.

Hands-On Exercise: Your First Styled Card

Let's apply what we've learned to create a simple styled card component.

HTML Structure

<div class="card">
    <img src="https://via.placeholder.com/300x200" alt="Card image">
    <div class="card_content">
        <h2 class="card_title">Card Title</h2>
        <p class="card_text">This is some sample text for our card component. It demonstrates how CSS can transform simple HTML into an attractive UI element.</p>
        <a href="#" class="card_button">Learn More</a>
    </div>
</div>

CSS Styling

/* styles/main.css */

/* Card container */
.card {
    width: 300px;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    overflow: hidden; /* Ensures the image doesn't break the rounded corners */
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

/* Card image */
.card img {
    width: 100%;
    display: block;
}

/* Card content area */
.card_content {
    padding: 20px;
}

/* Card title */
.card_title {
    margin-top: 0;
    margin-bottom: 10px;
    color: #333;
    font-size: 20px;
}

/* Card text */
.card_text {
    color: #666;
    line-height: 1.5;
    margin-bottom: 20px;
}

/* Card button */
.card_button {
    display: inline-block;
    background-color: #0066cc;
    color: white;
    padding: 8px 16px;
    text-decoration: none;
    border-radius: 4px;
    font-weight: bold;
    transition: background-color 0.3s;
}

.card_button:hover {
    background-color: #0052a3;
}

Exercise explanation: This example demonstrates:

Creating a responsive container with borders and shadows
Managing spacing with padding and margin
Styling typography for hierarchy
Building an interactive button with hover effects
Using transitions for smooth animations
Implementing hover states to enhance user experience

Try modifying this example by:

Changing colors to match a brand
Adjusting font sizes and families
Experimenting with different border-radius values
Adding additional hover effects

CSS Best Practices and Organization

As your CSS grows, organization becomes essential for maintainability.

Code Organization

Group related styles: Keep related styles together (e.g., all header styles, all form styles)
Use comments: Add section comments to separate logical groups
Follow a consistent naming convention: Choose a convention like BEM (Block Element Modifier) and stick with it
Limit selector nesting: Overly specific selectors can cause maintenance issues

Sample Organization

/* styles/main.css */

/* ==========================================================================
   Reset and base styles
   ========================================================================== */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Roboto', sans-serif;
    line-height: 1.6;
    color: #333;
}

/* ==========================================================================
   Typography
   ========================================================================== */
h1, h2, h3, h4, h5, h6 {
    margin-bottom: 0.5em;
    font-weight: 500;
    line-height: 1.2;
}

p {
    margin-bottom: 1rem;
}

/* ==========================================================================
   Layout containers
   ========================================================================== */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
}

/* ==========================================================================
   Header styles
   ========================================================================== */
header {
    background-color: #333;
    color: white;
    padding: 1rem 0;
}

/* ==========================================================================
   Navigation
   ========================================================================== */
nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* ==========================================================================
   Components: Buttons
   ========================================================================== */
.btn {
    display: inline-block;
    padding: 8px 16px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-weight: 500;
    text-decoration: none;
}

.btn-primary {
    background-color: #0066cc;
    color: white;
}

/* Add more component styles as needed */

Naming Conventions

BEM (Block Element Modifier) is a popular naming convention that creates clear, strict relationships between HTML and CSS.

Block: Standalone component (e.g., .card)
Element: Part of a block (e.g., .card__title, .card__image)
Modifier: Variation of a block or element (e.g., .card--featured, .card__button--large)

<div class="card card--featured">
    <img class="card__image" src="image.jpg" alt="">
    <div class="card__content">
        <h2 class="card__title">Card Title</h2>
        <p class="card__text">Card description</p>
        <a href="#" class="card__button card__button--primary">Learn More</a>
    </div>
</div>

Real-world application: Large projects like Facebook, Airbnb, and Bootstrap use systematic CSS organization and naming conventions to manage thousands of style rules across hundreds of components. This approach allows multiple developers to work on the codebase without conflicts and makes future maintenance easier.

Debugging CSS

Troubleshooting CSS issues is a key skill for web developers.

Common CSS Problems and Solutions

1. Styles Not Applying

Possible causes:

Selector specificity issues (a more specific rule is overriding yours)
Typos in selectors or property names
CSS file not properly linked
Element structure doesn't match what you're targeting

Solution: Use browser dev tools to inspect the element and check which styles are being applied and which are being overridden.

2. Layout Breaking

Possible causes:

Box model issues (unexpected margins, padding, borders)
Floats not being cleared
Absolute positioning taking elements out of flow
Width calculations not accounting for all box model parts

Solution: Temporarily add a background color or border to see the actual space elements are taking. Check box-sizing property.

3. Cross-Browser Issues

Possible causes:

Using newer CSS features without vendor prefixes
Browser-specific bugs or interpretations
Default styles varying between browsers

Solution: Test in multiple browsers, use a CSS reset, and consider feature detection or polyfills for newer features.

Browser Developer Tools

Modern browsers include powerful tools for CSS debugging:

Element inspector: View and modify the DOM structure
Styles panel: See all applied styles and their origin
Computed tab: View the final computed values of all properties
Box model visualization: See padding, border, and margin dimensions
CSS changes: Modify styles in real-time to test solutions

Pro tip: In Chrome DevTools, you can quickly test layout issues by toggling the "Show element margin" and "Show element padding" options in the Styles panel.

Further Resources and Next Steps

Documentation and References

MDN CSS Documentation - Comprehensive and reliable CSS reference
CSS-Tricks - Articles, tutorials, and code snippets
W3Schools CSS Tutorial - Beginner-friendly tutorial with examples

Interactive Learning

Flexbox Froggy - Learn CSS flexbox through a game
Grid Garden - Learn CSS grid through a game
CodePen - Explore and experiment with CSS examples

CSS Tools

Coolors - Color scheme generator
Google Fonts - Free web fonts
CSS Gradient - Gradient generator
Smooth Shadow Generator - Create realistic box shadows

Topics to Explore Next

CSS Flexbox: Modern layout system for one-dimensional layouts
CSS Grid: Powerful system for two-dimensional layouts
CSS Transitions and Animations: Add motion to your designs
CSS Variables: Create reusable values and themes
CSS Preprocessors: Tools like Sass and Less that extend CSS functionality
CSS Frameworks: Pre-built systems like Bootstrap and Tailwind CSS

Today's Assignment: Style Your HTML Pages

Now it's your turn to apply what you've learned today.

Assignment Requirements:

Create a new file called styles/my_styles.css
Link it to your HTML pages from Monday's assignment
Apply styling to the following elements:
- Body (font-family, background color, text color)
- Headings (colors, sizes, margins)
- Links (colors, hover effects, text decoration)
- Lists (spacing, bullet styles)
- Create at least one card-like component with borders, padding, and hover effects
Include at least 3 different CSS selectors (element, class, ID)
Use the box model effectively (margins, padding, borders)
Implement at least one hover effect
Comment your CSS to explain what different sections do

Bonus challenges:

Create a consistent color scheme with at least 3 colors
Use Google Fonts to customize typography
Implement a simple navigation layout
Add a gradient background somewhere in your design
Use CSS variables for colors and repeated values

Submit your completed assignment by uploading both your HTML and CSS files to your course repository, maintaining the proper folder structure.

Wrapping Up

Congratulations! You've taken your first steps into the world of CSS. Today we covered fundamental concepts that will serve as building blocks for everything else you'll learn about web styling.

Remember:

CSS separates content from presentation, making your code cleaner and more maintainable
Selectors target HTML elements, while declarations define their styles
The box model describes how space works around elements
Organization is key as your stylesheets grow

In this afternoon's session, we'll dive deeper into CSS positioning, display properties, floats, and other layout techniques. The journey to mastering CSS is long, but with consistent practice, you'll develop the skills to create beautiful and responsive web designs.

Questions? Let's discuss them now before our break!

Welcome to CSS!

File Organization

What is CSS?

CSS Analogy: The Building Metaphor

The Evolution of CSS

How to Add CSS to Your HTML Documents

1. External CSS (Recommended)

2. Internal CSS (Style Element)

3. Inline CSS (Style Attribute)

The Cascade: Why "Cascading" is in the Name

CSS Syntax: The Building Blocks

Example:

Common Syntax Errors to Avoid

CSS Selectors: Targeting Elements

Basic Selector Types

Element Selector

Class Selector

ID Selector

Combining Selectors

Selector Specificity: The Rules of Precedence

Working with Colors in CSS

Color Notation Methods

1. Color Names

2. Hexadecimal Colors

3. RGB and RGBA

4. HSL and HSLA

Color Psychology and Web Design

The CSS Box Model: Understanding Layout

Components of the Box Model

Box Model Properties

Box-Sizing Property

Text Styling Fundamentals

Typography Properties

Font Family

Font Size

Font Weight

Text Alignment

Line Height

Text Decoration

Text Transform

Web Fonts: Beyond System Fonts

Google Fonts Example

Backgrounds and Borders

Background Properties

Background Color

Background Image

Background Shorthand

Multiple Backgrounds

Border Properties

Basic Border

Border Styles

Individual Border Sides

Border Radius

Hands-On Exercise: Your First Styled Card

HTML Structure

CSS Styling

CSS Best Practices and Organization

Code Organization

Sample Organization

Naming Conventions

Debugging CSS

Common CSS Problems and Solutions

1. Styles Not Applying

2. Layout Breaking

3. Cross-Browser Issues

Browser Developer Tools

Further Resources and Next Steps

Documentation and References

Interactive Learning

CSS Tools

Topics to Explore Next

Today's Assignment: Style Your HTML Pages

Assignment Requirements:

Wrapping Up