03. Internal CSS
Introduction
Section titled “Introduction”Internal CSS (also called embedded CSS) is placed within a <style> element in the HTML document’s <head> section. It allows you to define styles for the entire page without creating a separate CSS file. Internal CSS is useful for single-page styles or page-specific styling.
Basic Usage
Section titled “Basic Usage”<!DOCTYPE html><html><head> <style> body { font-family: Arial, sans-serif; margin: 0; padding: 20px; } h1 { color: #333; } </style></head><body> <h1>Title</h1> <p>Content</p></body></html>Advantages
Section titled “Advantages”Single File
Section titled “Single File”All code in one file:
<head> <style> /* All styles here */ </style></head>Page-Specific
Section titled “Page-Specific”Styles apply only to current page:
<style> /* Page-specific styles */</style>Limitations
Section titled “Limitations”No Reusability
Section titled “No Reusability”Can’t share across pages:
<!-- Each page needs its own style tag -->Larger HTML Files
Section titled “Larger HTML Files”Increases HTML file size:
<!-- Large style blocks make HTML files bigger -->Best Practices
Section titled “Best Practices”Use for Single Pages
Section titled “Use for Single Pages”<!-- Good: Single-page application --><style> /* Page-specific styles */</style>Prefer External for Multiple Pages
Section titled “Prefer External for Multiple Pages”<!-- Good: External CSS for multiple pages --><link rel="stylesheet" href="styles.css">