Lesson 3: Mastering Embedded CSS

Learn how to apply styles within HTML documents using embedded stylesheets for efficient styling.

Start Learning

What is Embedded CSS?

Embedded CSS (also called internal CSS) is placed within the <style> tag in the <head> section of an HTML document. This method allows you to define styles for the entire document in one place.

Document-wide styling: Styles defined in the embedded CSS apply to all matching elements in the HTML document.

Embedded CSS Syntax

The syntax for embedded CSS is straightforward. Place your CSS rules inside a <style> element:

<!DOCTYPE html>
<html>
<head>
  <style>
    selector {
      property1: value1;
      property2: value2;
    }
  </style>
</head>
<body>
  <!-- HTML content -->
</body>
</html>
Key characteristics:
  • Applies to the entire HTML document
  • Medium specificity - overrides external styles but not inline styles
  • More efficient than inline CSS for multiple elements
  • Easier to maintain than inline CSS

Practical Examples

Explore these practical examples of embedded CSS in action:

Basic Document Styling

<!DOCTYPE html>
<html>
<head>
  <style>
    body {
      background-color: #f0f9ff;
      font-family: 'Segoe UI', Tahoma, sans-serif;
      line-height: 1.6;
      margin: 0;
      padding: 20px;
    }
    
    h1 {
      color: #0d47a1;
      text-align: center;
      border-bottom: 2px solid #2196f3;
      padding-bottom: 10px;
    }
    
    p {
      color: #333;
      font-size: 18px;
      margin-bottom: 15px;
    }
    
    .highlight {
      background-color: #fffde7;
      padding: 5px;
      border-radius: 4px;
    }
  </style>
</head>
<body>
  <h1>Welcome to CSS Tutorial</h1>
  <p>This paragraph demonstrates embedded CSS styling.</p>
  <p class="highlight">This paragraph has a special highlight class.</p>
</body>
</html>

Result:

Welcome to CSS Tutorial

This paragraph demonstrates embedded CSS styling.

This paragraph has a special highlight class.

Advanced Component Styling

<!DOCTYPE html>
<html>
<head>
  <style>
    .card-container {
      display: flex;
      gap: 20px;
      justify-content: center;
      padding: 20px;
    }
    
    .card {
      width: 250px;
      background: white;
      border-radius: 10px;
      box-shadow: 0 5px 15px rgba(0,0,0,0.1);
      overflow: hidden;
      transition: transform 0.3s;
    }
    
    .card:hover {
      transform: translateY(-10px);
    }
    
    .card img {
      width: 100%;
      height: 180px;
      object-fit: cover;
    }
    
    .card-content {
      padding: 20px;
    }
    
    .card h3 {
      margin-top: 0;
      color: #0d47a1;
    }
    
    .btn {
      display: inline-block;
      background: #2196f3;
      color: white;
      padding: 8px 15px;
      border-radius: 4px;
      text-decoration: none;
      margin-top: 10px;
    }
  </style>
</head>
<body>
  <div class="card-container">
    <div class="card">
      <img src="https://picsum.photos/400/300?nature" alt="Nature">
      <div class="card-content">
        <h3>Nature Card</h3>
        <p>Beautiful nature landscapes for your inspiration.</p>
        <a href="#" class="btn">View More</a>
      </div>
    </div>
    <div class="card">
      <img src="https://picsum.photos/400/300?city" alt="City">
      <div class="card-content">
        <h3>City Card</h3>
        <p>Urban landscapes and city architecture.</p>
        <a href="#" class="btn">View More</a>
      </div>
    </div>
  </div>
</body>
</html>

Result:

Nature

Nature Card

Beautiful nature landscapes for your inspiration.

View More
City

City Card

Urban landscapes and city architecture.

View More

CSS Specificity with Embedded Styles

Understanding how embedded CSS interacts with other styling methods:

1. Inline Styles (Highest Priority)
2. Embedded Styles (Medium Priority)
3. External Styles (Lowest Priority)
Selector Type Specificity Value Example
Inline Styles 1,0,0,0 style="color: blue;"
ID Selectors 0,1,0,0 #header { ... }
Class Selectors 0,0,1,0 .highlight { ... }
Element Selectors 0,0,0,1 p { ... }
Important tip: Embedded styles have higher specificity than external styles but lower than inline styles. Use !important sparingly to override styles when necessary.

When to Use Embedded CSS

While embedded CSS has its limitations, it's perfect for specific scenarios:

Single-Page Websites

Ideal for small websites with only one HTML page where all styles are contained.

Prototyping & Testing

Perfect for quickly testing styles without creating external files.

Performance Optimization

Reduces HTTP requests for small projects, improving load time.

Component-Based Styles

Useful for styling specific components in modern frameworks.

Avoid for large projects: For multi-page websites, external CSS is more maintainable and efficient.

Best Practices for Embedded CSS

Follow these guidelines to use embedded CSS effectively:

Organize your styles: Group related styles together and use comments to separate sections.
Use meaningful class names: Choose descriptive names that reflect the purpose of the element.
Avoid over-qualifying selectors: Use the simplest selector possible to target elements.
Maintain consistent formatting: Use consistent indentation and spacing for readability.
Consider separation of concerns: For larger projects, move styles to external CSS files.

Next Steps

Now that you understand embedded CSS, continue to the next lesson to learn about external stylesheets.

Previous Lesson Next Lesson: External CSS