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
After adding a
<style> tag in the head section, you can begin writing CSS code.
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.