— You already know how you can add styles to a specific element. For example, you know how to change the color of the text inside the <p> tag. But what if we need to do this for several tags of the same type?

— It’s just as easy - just add a style attribute to each paragraph and specify the desired property.

<p style="color: red">Red text</p>
<p style="color: red">Another red text</p>

— Not bad, but what if there are hundreds of similar paragraphs? What if, in addition to the color, you need to change the font size?

It would be a lot more convenient to specify a single style that applies to all <p> tags than to duplicate the style attribute in each of them.

Let’s start with a simple HTML document without styles.

<!DOCTYPE html>
<html>
  <head>
  <title>Internal Styles</title>
  </head>
  <body>
    <h1>Heading</h1>
    <p>First paragraph</p>
    <p>Second paragraph</p>
  </body>
</html>

The first task is to set the font size inside all <p> tags to 16px.

To avoid duplicate styles, we will add a paired <style> tag. Inside of it, we’ll place the tag name and the list of style properties we want to apply.

  • start with the tag name
  • follow up with the curly braces
  • inside the curly braces put a list of required CSS properties
<style>
  p {
    font-size: 16px;
  }
</style>

— Where should we use this <style> tag?

— We use the <style> tag inside the <head> tag. Immediately after <title>. Then our HTML document will look like this:

<!DOCTYPE html>
<html>
  <head>
  <title>Internal Styles</title>
    <style>
      p {
        font-size: 16px;
      }
    </style>
  </head>
  <body>
    <h1>Heading</h1>
    <p>First paragraph</p>
    <p>Second paragraph</p>
  </body>
</html>

Now the font size inside each paragraph will be 16px.

The second task is to make the background of all paragraphs red.

To change the background color, we will add a css property background-color. The value of the background color is set in the same way as the font color:

<style>
  p {
    font-size: 16px;
    background-color: red;
  }
</style>

— And if we want to change the heading styles, we need to add another <style> tag?

— No. You can add as many tags as you like inside the <style> tag. Let’s try changing the height of the <h1> heading to make it stand out.

This is done using the height property.

— Exactly, I remember how we set the height of the image using the height attribute.

<style>
  h1 {
    height: 40px;
  }
  p {
    font-size: 16px;
    background-color: red;
  }
</style>

As you can see, we just added the name of the h1 tag and styled it just like we did for the paragraph. By the way, you can similarly add width. Only now you need to use the width property.

The third task is to set the width of all paragraphs to 500px:

<style>
  h1 {
    height: 40px;
  }
  p {
    width: 500px;
    font-size: 16px;
    background-color: red;
  }
</style>

If we add another paragraph to our web page, all the styles described inside the <style> are immediately applied to it.

<!DOCTYPE html>
<html>
  <head>
  <title>Internal Styles</title>
    <style>
      p {
        font-size: 16px;
      }
    </style>
  </head>
  <body>
    <h1>Heading</h1>
    <p>First paragraph</p>
    <p>Second paragraph</p>
    <hr>
    <p>
      The long paragraph we just added.
      It will have all the same styles as the previous two.
      No code duplication, which is very nice :).
    </p>
  </body>
</html>

Just like the font, the height and width properties can be set not only in pixels, but also relative to the height of the parent component. I’ll give you a separate task for it.