Adding CSS to an HTML Web page
Let's work through an example of adding a style sheet to a basic HTML document. Consider a simple HTML document below,
SNIPPET
1<!DOCTYPE html>
2<html>
3<head>
4 <title> My First Webpage </title>
5 <link rel="stylesheet" href="style.css">
6</head>
7<body>
8 <h1> Hello World! </h1>
9 <p> This is my first webpage. </p>
10</body>
11</html>Let's start by changing the color of the h1 heading in style.css.
SNIPPET
1h1{
2 color: blue;
3}
Now let's specify a change in multiple properties of the paragraph element. CSS allows us to specify multiple properties within a single rule, so we can change the background color and font size of a paragraph element as,
SNIPPET
1p{
2 background-color: gray;
3 font-size: 25px;
4}
We can see that now our simple webpage looks a little more colorful than before.