How to use Style tags on HTML

How to use Style tags on HTML

Modern webpage have a lot of style, meaning that they have a lot of properties to make them look great. One way to add style to a group of elements is by setting a style for each element individually as the example below.

<!doctype html>
  <html>
    <body>
     <h3> List of Pharaohs </h3>
       <p style="font-family: Papyrus"> TuTankhamun </p>
       <p style="font-family: Papyrus"> Cleopatra </p>
       <p style="font-family: Papyrus"> Ramses II </p>

    </body>
   </html>

As you see in the example to apply the style attribute we always write the style property inside the opening tag. But there is an easier way to add the same style to one type of elements. We start start by adding the style tags inside the head tags.

<!doctype html>
  <html>
    <head>

      <style> 
               p {
                  font-family: Papyrus;
                  font-size: 14px;
                 }
     </style>
     </head>

    <body>
     <h3> List of Pharaohs </h3>
       <p> TuTankhamun </p>
       <p > Cleopatra </p>
       <p > Ramses II </p>

    </body>
   </html>

Now you know how to add Css style on your html page . We use what with call in CSS a CSS Rule, to add a style to all paragraphs elements <p> only.

p {

font-family: Papyrus;

font-size: 14px;

}

Css rule

If we want a style to apply to the entire page we can use the body selector.

body {

Background-color: lightBlue;

Color: black;

}

Css rule

We can style as many elements as we want inside the style tags. As long we add a space between different rules.

<!doctype html>
  <html>
    <head>

      <style> 
               h3 {
                 
                  font-size: 30px;
                  Color: Red;
                  Font-family: Helvetica;
                  }

               p {
                  font-family: Papyrus;
                  font-size: 14px;
                 }

     </style>
     </head>

    <body>
     <h3> List of Pharaohs </h3>
       <p> TuTankhamun </p>
       <p > Cleopatra </p>
       <p > Ramses II </p>

    </body>
   </html>

One thought on “How to use Style tags on HTML

Leave a Reply

Your email address will not be published. Required fields are marked *

Follow by Email
LinkedIn
LinkedIn
Share
Instagram
error: Content is protected !!