It is time to add some CSS to our web page. We will start by adding CSS to our web page using the <style> element. This is called internal CSS. Just like in the example in the previous lesson, we will add a <style> element to the <head> element of our HTML file. Here is what our HTML file looks like with the <style> element added:
<!DOCTYPE html>
<html>
<head>
<title>My First Web Page</title>
<style>
h1 {
color: red;
}
</style>
</head>
<body>
<h1>My First Web Page</h1>
<p>This is my first web page.</p>
</body>
</html>
As you can see, we have added a <style> element to our HTML file. The <style> element contains CSS code that changes the color of the <h1> element to red. The result is a web page with a red heading.
This is called internal CSS because the CSS code is contained within the <style> element. This is the first way we can add CSS to our web pages.
Activity#
Feel free to experiment with the CSS code in the <style> element of one of the web pages that you built in the previous lesson. Try changing the color of the <h1> element to something other than red. You can also try adding a CSS rule that changes the color of the <p> element.
Try changing the color of the <h1> element to something other than red. You can also try adding a CSS rule that changes the color of the <p> element. Don’t worry if this doesn’t make sense to you yet. We will explain how to add CSS rules very shortly!