Learning HTML - Inserting Styles with CSS and Inline Attributes
This episode breaks down three ways to insert CSS into HTML: the inline style attribute, the internal style element, and linking to an external stylesheet, complete with precedence and specificity rules.
#Introduction
Since episode 1 you've known that CSS is the presentation layer that works on top of HTML. Episode 13 covers inserting styles with CSS and inline attributes — the three ways to connect a stylesheet to a document, when to use which, and how the browser decides which style wins.
Understanding these three methods matters because each has different use cases. Writing styles in the wrong place makes a page hard to maintain — and maintenance is a big theme in episode 19.
#Three Ways to Insert CSS
#The style Attribute (Inline)
The first way: write styles directly on an element via the style attribute:
<p style="color: blue; font-size: 18px;">
Paragraf dengan gaya inline.
</p>The attribute value holds CSS declarations separated by semicolons. Inline styles apply to only one element, can't be reused, and mix content with presentation. Use them for quick tests — not for production.
#The style Element (Internal)
The second way: a style block inside head, containing regular CSS rules:
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<title>Gaya Internal</title>
<style>
p {
color: #374151;
line-height: 1.6;
}
</style>
</head>
<body>
<p>Paragraf yang dihias lewat blok style internal.</p>
</body>
</html>Internal styles apply to the whole document, but only that document. They suit single pages or when building a quick prototype.
#Linking to an External Stylesheet (External)
The third way: separate CSS into its own file and connect it with link:
<head>
<link rel="stylesheet" href="css/style.css">
</head>The pattern link rel="stylesheet" href="css/style.css" connects style.css to the page. This is the method recommended for all real projects: centralized CSS, easy to maintain, and cacheable by the browser.
#Precedence and Specificity
#Who Wins
When several rules target the same element, the browser uses a precedence system:
- Inline styles (the
styleattribute) beat every selector. - Rules with more specific selectors beat generic ones.
- If equally specific, the rule written last wins.
<style>
p {
color: red;
}
</style>
<p style="color: green;">Warna hijau menang karena inline.</p>The paragraph above is green — the inline style beats the p selector in the style block. This winning order matters when combining multiple stylesheets.
#The Importance of Link Order
For external stylesheets, the order of link tags in head decides who wins when specificity is equal. A stylesheet linked later overrides an earlier one.
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/style.css">Equally specific rules in style.css win because it's linked after reset.css. Get used to linking base stylesheets first, then the main stylesheet.
#When to Use Which Method
#Practical Guidelines
- External for all of a project's main styles — reusable and easy to maintain.
- Internal for truly standalone pages or during experiments.
- Inline only for small exceptions or quick tests.
Writing every style inline across a whole page bloats the markup and makes it hard to change. If you find repeated style attributes on many elements, that's a sign the styles should move into a stylesheet.
#Exercise: A Colored Page
Try all three methods at once:
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Praktik CSS</title>
<style>
h1 {
text-align: center;
color: #1f2937;
}
</style>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<h1>Praktik Menyisipkan Gaya</h1>
<p>Paragraf yang diatur oleh style.css eksternal.</p>
<p style="font-weight: bold;">Paragraf dengan gaya inline.</p>
</body>
</html>Create css/style.css with rules for p, then look in DevTools to see which column each declaration comes from. You can also confirm the stylesheet loads with curl -s http://localhost:8080/css/style.css.
#Common Mistakes and Solutions
#Everything Inline
Inline styles are hard to maintain and win every conflict. Use them only for exceptions; move repeated ones into a stylesheet.
#Link in the Wrong Place
A stylesheet link must be in head. Placing it in body makes the document invalid and can delay style loading.
#Closing
Episode 13 connects the presentation layer to the structure: three ways to insert CSS, the precedence of inline versus selectors, and guidelines for when to use which method.
Key takeaways:
- Inline uses the
styleattribute; internal uses astyleblock; external useslink. - Inline styles beat any selector.
- A stylesheet linked later wins when specificity is equal.
- External for production, internal for single pages, inline for exceptions.
- The order of
linktags inheaddetermines style conflict outcomes.
In the next episode, episode 14, we'll cover including JavaScript with script, defer and async — the script element, execution order, and loading strategies that don't block page rendering.