Learn
CSS Setup and Selectors
The <style> Tag

Inline styles are a fast way of styling HTML, but they also have limitations. 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 the <style> element. CSS can be written between opening and closing <style> tags. To use the <style> element, it must be placed inside of the <head> element.

<head> <style> </style> </head>

After adding a <style> tag 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 to.

Again, the details of the CSS syntax in the example above aren’t important at the moment. You will learn more about the details of CSS syntax in later lessons.

Instructions

1.

First, add a <style> element in the head of index.html. Then, make sure to delete the inline styles that you added to the paragraph.

2.

Add the inline styles that you removed from the <p> element to the <style> element in the head.

Folder Icon

Take this course for free

Already have an account?