Style Sheets - HTML Tutorial
Whenever we’ve used style="…" in an HTML element, we’ve created a CSS rule. CSS (Cascading Style Sheets) is a separate language from HTML, but it’s essential for controlling the appearance of your website. Think of a webpage as having three main components:
-
Structure: The HTML markup is the page’s skeleton. It defines headings, sections, paragraphs, lists, and more. Without structure, your page would be an unorganized block of text.
-
Content: The text, images, videos, and other media are the page’s flesh. This is what visitors come to see.
-
Presentation: CSS is the page’s skin, clothing, and makeup. It determines how your content looks, from colors and fonts to layout and spacing.
So far we’ve only applied styles to individual elements. While this works, it’s not efficient. A better approach is to collect all CSS rules in one place - a style sheet - and apply them consistently across your page, or even your entire website.
Embedded Style Sheets
An embedded style sheet is placed inside the <head> of your document and can style multiple elements at once. For example:
<html>
<head>
<title>When Irish Eyes Are Smiling</title>
<style>
p { color: #008000; background: #ffff00; }
</style>
</head>
<body>
<h1>When <em>Irish Eyes</em> Are Smiling</h1>
<p>Here's how the chorus goes:</p>
<p>
When Irish eyes are smiling,<br>
<em>Sure, 'tis like the morn in Spring.</em><br>
In the lilt of Irish laughter<br>
<em>You can hear the angels sing.</em>
</p>
</body>
</html>Let’s break this down:
<style>: Indicates the start of an embedded CSS block. Place it inside the<head>.p: The CSS selector targeting all paragraph elements.{ color: #008000; background: #ffff00; }: The CSS declarations that define the rule: green text on a yellow background. Each declaration is separated by a semicolon.
Multiple CSS Rules and Selectors
You can define multiple rules in a style sheet. For example:
<style>
body { background: #ff0000; }
p { color: #008000; background: #ffff00; }
</style>You can also target multiple elements with the same rule using commas:
p, h1 { color: #008000; background: #ffff00; }Or use a descendant selector to style elements inside others:
h1 em { color: #0000ff; }This only colors em elements inside h1 headings, leaving other ems unaffected.
Cascading Rules
CSS rules can conflict. The “Cascading” part determines which rule applies:
- Rules in an external linked style sheet have the lowest priority.
- Embedded style sheets in the
<head>override linked sheets. - Inline styles using the
styleattribute have the highest priority.
For example:
<p style="color: blue;">This text is blue.</p>The inline style overrides any matching rule in linked or embedded stylesheets.
Reusable Global Style Sheets
Instead of embedding CSS in every page, you can place your styles in a separate .css file and link it to multiple pages:
<link rel="stylesheet" href="/css/style.css">This creates a single source of truth for your styles, making your site easier to maintain.