Last time you learned what CSS is and how it styles HTML. But how exactly do you connect CSS to your HTML pages?
There are three main ways to apply CSS styles to your HTML. Each method has its own advantages and best use cases.
Engagement Message
Can you name the three methods of adding CSS to HTML?
The first and most common method is external stylesheets. This means creating a separate CSS file (like styles.css
) and linking it to your HTML.
You connect them using: <link rel="stylesheet" href="styles.css">
in your HTML's <head>
section.
Engagement Message
What's the main benefit of using a single external stylesheet for an entire website?
The second method is internal styles. You write CSS directly inside your HTML file using <style>
tags in the <head>
section.
This keeps everything in one file, but the CSS only applies to that specific HTML page.
Engagement Message
When might you want to keep CSS and HTML in the same file for a single-page project?
The third method is inline styles. You add CSS directly to individual HTML elements using the style
attribute.
Example: <p style="color: red;">This text is red</p>
applies styling to just that one paragraph.
