What is CSS?

CSS (Cascading Style Sheets) is the language that makes websites beautiful. While HTML provides structure, CSS controls appearance.

What CSS Controls:

  • Colors - Text, backgrounds, borders
  • Typography - Fonts, sizes, spacing, alignment
  • Layout - Positioning, spacing, flexbox, grid
  • Visual effects - Shadows, gradients, transforms
  • Animations - Transitions, keyframe animations
  • Responsive design - Different styles for different screen sizes

Key Concept: CSS follows the "cascading" principle - styles flow down and can be overridden based on specificity and order.

Three Ways to Add CSS

There are three methods to apply CSS to HTML, each with different use cases:

1. Inline CSS

CSS written directly inside an HTML element using the style attribute. Affects only that specific element.

Syntax:

<element style="property: value; property: value;">Content</element>

Examples:

<p style="color: blue; font-size: 20px;">Blue text, 20px size</p>

<h1 style="color: red; text-align: center; font-family: Arial;">
  Centered Red Heading
</h1>

<div style="background-color: yellow; padding: 10px; border: 2px solid black;">
  Yellow box with border
</div>

When to Use Inline CSS:

  • Quick testing or debugging
  • Email HTML templates (some email clients require inline styles)
  • Overriding styles for a single element

Disadvantages:

  • Hard to maintain - changes must be made element by element
  • No reusability - can't share styles across elements
  • Mixes content with presentation (bad practice)
  • Highest specificity (hard to override)

2. Internal CSS (Embedded)

CSS written inside a <style> tag in the <head> section. Styles apply to the entire page.

Syntax:

<head>
  <style>
    selector {
      property: value;
      property: value;
    }
  </style>
</head>

Complete Example:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Internal CSS Example</title>
  <style>
    /* Element selector */
    body {
      font-family: Arial, sans-serif;
      background-color: #f0f0f0;
      margin: 0;
      padding: 20px;
    }

    h1 {
      color: #2c3e50;
      text-align: center;
      border-bottom: 3px solid #3498db;
    }

    p {
      color: #333;
      line-height: 1.6;
      font-size: 16px;
    }

    /* Class selector */
    .highlight {
      background-color: yellow;
      padding: 5px;
    }

    /* ID selector */
    #main-content {
      max-width: 800px;
      margin: 0 auto;
      background: white;
      padding: 20px;
    }
  </style>
</head>
<body>
  <div id="main-content">
    <h1>Welcome to My Website</h1>
    <p>This is a paragraph with normal styling.</p>
    <p class="highlight">This paragraph is highlighted!</p>
  </div>
</body>
</html>

When to Use Internal CSS:

  • Single-page websites
  • Page-specific styles that won't be reused
  • Testing styles before moving to external file
  • Email newsletters or standalone HTML documents

Advantages:

  • Keeps styles organized in one place
  • No external file requests (faster for single pages)
  • Can use selectors (class, ID, element)

Disadvantages:

  • Styles can't be shared across multiple pages
  • Makes HTML file larger
  • Browser can't cache styles separately

3. External CSS (Linked)

CSS written in a separate .css file and linked to HTML. This is the recommended method for production websites.

How It Works:

<!-- HTML File: index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>External CSS Example</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <h1>Styled with External CSS</h1>
  <p class="intro">This uses an external stylesheet.</p>
</body>
</html>
/* CSS File: styles.css */
body {
  font-family: 'Segoe UI', Tahoma, sans-serif;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  padding: 20px;
}

h1 {
  text-align: center;
  font-size: 2.5rem;
  margin-bottom: 1rem;
}

.intro {
  font-size: 1.2rem;
  max-width: 600px;
  margin: 0 auto;
  text-align: center;
}

Multiple CSS Files:

<head>
  <link rel="stylesheet" href="reset.css">     <!-- CSS reset -->
  <link rel="stylesheet" href="layout.css">    <!-- Layout styles -->
  <link rel="stylesheet" href="components.css"> <!-- Component styles -->
  <link rel="stylesheet" href="responsive.css"> <!-- Media queries -->
</head>

When to Use External CSS:

  • Multi-page websites (ALWAYS use this)
  • Any production website
  • When you need to share styles across pages
  • Team projects with multiple developers

Advantages:

  • Reusability - One CSS file for entire website
  • Maintainability - Update one file to change entire site
  • Clean HTML - Separation of content and presentation
  • Browser caching - CSS file cached, faster subsequent loads
  • Team collaboration - Different people work on HTML and CSS

Best Practices:

  • Use descriptive filenames: main.css, layout.css, typography.css
  • Organize large sites with multiple CSS files
  • Place CSS files in a dedicated css/ folder
  • Minify CSS files for production (reduces file size)

All Three Methods Together

This example shows all three methods working together (though in practice, avoid mixing them unnecessarily):

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>CSS Methods Demo</title>
  
  <!-- External CSS -->
  <link rel="stylesheet" href="styles.css">
  
  <!-- Internal CSS -->
  <style>
    h1 {
      color: purple;
      text-align: center;
    }
    
    .box {
      background-color: lightblue;
      padding: 15px;
      margin: 10px 0;
    }
    
    #special {
      font-size: 24px;
      font-weight: bold;
    }
  </style>
</head>
<body>
  <h1>CSS Methods Demonstration</h1>
  
  <!-- Inline CSS (highest priority) -->
  <p style="color: red; font-size: 18px;">
    This paragraph uses inline CSS
  </p>
  
  <!-- Internal CSS (class selector) -->
  <div class="box">
    This div uses internal CSS with a class
  </div>
  
  <!-- Internal CSS (ID selector) -->
  <p id="special">
    This paragraph uses internal CSS with an ID
  </p>
  
  <!-- External CSS -->
  <p class="external-style">
    This paragraph uses external CSS
  </p>
</body>
</html>

Comparison: Inline vs Internal vs External CSS

Feature Inline Internal External
Location style attribute <style> in <head> Separate .css file
Scope Single element Single page Multiple pages
Reusability None Same page only Entire website
Maintainability Very difficult Moderate Easy
CSS Priority Highest Medium Lowest
Caching No No Yes
Best For Testing, emails Single pages All websites

CSS Specificity Order (when styles conflict):

Inline CSS  >  Internal CSS  >  External CSS  >  Browser Default

(Highest priority)              (Lowest priority)

Quick Quiz

Q1. Which CSS method is best for large, multi-page websites?
Q2. Which CSS method has the highest priority?
Q3. Where do you write internal CSS?
Q4. What's the main advantage of external CSS?

Practice Tasks

  1. Single Page with Internal CSS:
    • Create index.html with internal CSS
    • Style h1: green color, center aligned, 36px
    • Style paragraphs: gray color, 18px, line-height 1.6
    • Create .highlight class: yellow background, bold
    • Create #intro ID: larger font, different color
  2. Multi-Page Site with External CSS:
    • Create 3 HTML files: index.html, about.html, contact.html
    • Create styles.css with shared styles
    • Link CSS to all 3 pages
    • Test that style changes affect all pages
  3. CSS Priority Test:
    • Create a paragraph with all three CSS methods
    • Set different colors in each method
    • Observe which color wins (inline should win)
  4. Real Project Structure:
    • Create folder: css/
    • Create files: reset.css, main.css, responsive.css
    • Link all CSS files to your HTML
    • Organize styles logically across files

Lesson Summary

Key Takeaways:

  • CSS (Cascading Style Sheets) controls the visual presentation of HTML
  • Three methods: Inline (style attribute), Internal (<style> tag), External (.css file)
  • Inline CSS - Highest priority, hardest to maintain, use sparingly
  • Internal CSS - Good for single pages, moderate maintainability
  • External CSS - Best practice for all websites, most maintainable and reusable
  • Priority order: Inline > Internal > External > Browser default
  • Best practice: Always use external CSS for production websites
  • Separation of concerns: Keep HTML (structure) and CSS (presentation) separate

Remember: External CSS is the professional standard. It makes your code cleaner, more maintainable, and easier to collaborate on!