Linking CSS
The Art of Bundling Your Styles
CSS can be integrated into your website in different ways, each with its own charm. The external stylesheet is the wise librarian among the options. It stores your CSS rules in a separate file and manages them centrally for multiple pages. This keeps everything tidy and speeds up your website’s loading time.
Then there’s inline CSS, perfect for quick tweaks when you just want to polish up a corner. On the other hand, internal CSS, nested in the head section, acts like a handy toolbox for individual pages. Choose wisely, as the right method can save you headaches and ensure your website doesn’t look like someone threw paint in the dark.
Link your CSS
Some magical rules you should know
Internal Styling
A Quick Spell for In-Between Moments
Sometimes, a short spell is all you need to place your CSS styles directly in the head section of your webpage. Perfect for spontaneous ideas or quick tests. You open the <style> tag, add your magic, and close it again. Done! But beware: this spell is only for fleeting moments. For long-term magic, rely on external CSS files to keep your work organized and clean.
<head>
<style>
body {
font-family: system-ui;
}
</style>
</head>
Inline Styling
Only for Special Cases
Occasionally, you might need a quick trick to enchant an element directly without summoning an entire file. This is where inline styling comes into play. Using the style attribute, you can immediately give an element a stylish transformation. But caution: as with any spell, don’t overdo it! Adding too many styles directly into your HTML can quickly become messy and hard to manage.
<body>
<h1 style="color:purple;">Tinkerville</h1>
</body>
External Styling
The Best Comes Last
In the head section of your webpage, you place a powerful link pointing to your CSS file. This file, with its magical .css extension, contains all your stylistic masterpieces. External styling is the most elegant way to separate structure from style, keeping your web creation clear and efficient.
<head>
<link rel="stylesheet" href="css/style.css">
</head>Why External Styling is Essential
Reusability
With a single stylesheet, you can enchant multiple HTML pages. One spell, endless uses—it saves time and energy.
Easy Maintenance
Make changes in the stylesheet, and—poof—your entire design is updated. Practical, isn’t it?
Faster Load Times
The browser loads the CSS once and stores it, enabling future visits to your site in the blink of an eye.
Flexibility
Want to change the design? No problem! With an external stylesheet, you can effortlessly try different styles without rewriting your entire website.
Clarity
By separating HTML and CSS, your code remains clean and readable. This prevents your work from turning into a tangled mess of characters.
Consistency
With a dedicated stylesheet, you ensure consistent styles across all pages—like a wizard leaving the same mark everywhere.
In this lesson, you have learned…
- How to embed CSS internally to make quick adjustments directly within the <style> tag.
- When inline embedding is useful to style individual elements precisely and directly.
- Why external stylesheets are the best choice to cleanly separate design from structure.
- The advantages of external CSS, such as reusability, faster loading times, and easier maintenance.
Here you can see the code you’ve practiced – but feel free to experiment! Try out changes, test new ideas, and see what happens. This is your space for tinkering!
The Riddle of Hidden Paths
In the dazzling forest of Sunnyside Fields, the old blacksmith Kael left behind a magical scroll describing three ways to apply CSS. To uncover the secret of his scroll, you must understand and use these three methods to add CSS to an HTML document. Only then can you choose the best path and solve the riddle.
Your Task: The Three Paths of Styling
Kael has given you three instructions on how to apply styles to a simple HTML document. Each method—internal, inline, and external—has its own strengths and weaknesses. Follow the instructions to determine which method works best.
Internal Linking – The Path of the Embedded
Insert internal CSS into the head section of your HTML file.
Change the background color of the page to a soft green (lightgreen).
Use the following code to achieve this:
<style>
body {
background-color: lightgreen;
}
</style>Question: What happens when you refresh the page?
What are the advantages and disadvantages of this method?
Inline Styling—The Path of the Individual
Add a p tag to the body section and use inline CSS to set the text color to blue:
<p style="color: blue;">set the text color to blue</p>Question: Why is inline styling suitable for smaller adjustments but problematic for extensive changes?
What are the biggest disadvantages of this method?
External Styling—The Path of the Wise
Delete the internal style or comment it out. Create a separate CSS file named styles.css and add the following CSS rule:
body {
background-color: lightblue;
}Link the CSS file to your HTML document using this code:
<link rel="stylesheet" href="05-style.css">Question: Test the page again. Why is this method the most flexible?
What happens when you change the background color and save the file?
What are the advantages of this method compared to the others?
Open Visual Studio Code and make these words appear on the page. Or try it right here in the editor!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Linking CSS</title>
<!-- Internal CSS -->
<style>
body {
background-color: lightgreen;
}
</style>
<!-- External CSS -->
<link rel="stylesheet" href="css/05-style.css">
</head>
<body>
<!-- Inline CSS -->
<p style="color: blue;">set the text color to blue</p>
</body>
</html>body {
background-color: cornsilk;
}