HTML CSS
HTML describes the structure of a page; CSS controls how it looks. There are three ways to attach CSS to HTML.
The three ways
| Method | Where it goes | Best for |
|---|---|---|
| Inline | style attribute on a single element | One-off tweaks. |
| Internal | <style> block in <head> | A single page or quick prototype. |
| External | <link rel="stylesheet" href="…"> in <head> | Sharing styles across many pages — recommended for production. |
Cascading: who wins?
When multiple rules apply to the same element, the browser uses the cascade. In a tie, the rule with greater specificity wins; inline styles beat both internal and external rules.
Tip: Visit the CSS Tutorial chapter for full coverage of selectors, the box model, flexbox, and grid.
Example
Example
<!DOCTYPE html>
<html>
<head>
<title>HTML CSS</title>
</head>
<body>
<h1>HTML CSS</h1>
<p>This is a demo page for the "HTML CSS" lesson.</p>
</body>
</html>
Try it Yourself »
Exercise
Move these inline styles into a single <style> block at the top of the page.
<head>
<
>
h1 { color: navy; }
</style>
</head>
Same name as its closing tag.
Discussion
Loading…