Embedded Files
As previously stated, inline styles are not the best way to style HTML elements. If you wanted to style, for example, multiple <h1> elements, you would have to add inline styling to each element manually. In addition, you would also have to maintain the HTML code when additional <h1> elements are added.
Fortunately, HTML allows you to write CSS code in its own dedicated section with a <style> element nested inside of the <head> element. The CSS code inside the <style> element is often referred to as an internal stylesheet.
An internal stylesheet has certain benefits and use cases over inlines styles, but once again, it’s not best practice (we’ll get there, we promise). Understanding how to use internal stylesheets is nonetheless helpful knowledge to have.
To create an internal stylesheet, a <style> element must be placed inside of the <head> element.
<head>
<style>
</style>
</head>
After adding opening and closing <style> tags in the head section, you can begin writing CSS code.
<head>
<style>
p {
color: red;
font-size: 20px;
}
</style>
</head>
The CSS code in the example above changes the color of all paragraph text to red and also changes the size of the text to 20 pixels. Note how the syntax of the CSS code matches (for the most part) the syntax you used for inline styling. The main difference is that you can specify which elements to apply the styling.
Instructions
Instructions
1. Let’s move the inline style that was added to the paragraph into an internal stylesheet.
Start by adding an empty <style> element in the head of index.html.
2. Inside of the <style> element, add a CSS ruleset targeting the paragraph (the <p> element). You can leave the declaration block empty for now.
3. Next, place just the declaration from the inline style into the empty declaration block in the inline stylesheet.
4. Finally, delete the inline style from the <p> element.
Notice how the styling works the same in the stylesheet as it did in the inline style!
Page updated
Report abuse