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”