Inline Styling Our HTML Page

In this lesson, we meet inline styling in HTML! Let's begin!

We will be using the style attribute in our HTML code to beautify our web page! The way we’ll do that is the same as always, with a code along exercise!

Exercise: Using the style attribute to adorn a web page

To apply style attributes to index.html, follow these steps:

Step 1:

In the index.html file from the previous lesson, remove the <p> element from the <body> section and add more content as the highlighted markup shows:

<!DOCTYPE html>
<html>
<head>
<title>Table of Contents</title>
</head>
<body style="font-family: Verdana, Arial, sans-serif">
<h1 style="color: white; background-color:#61b3e7">
Introduction
</h1>
<h2>Whom this book is for?</h2>
<h2>Errata</h2>
<h1>Chapter 1</h1>
<h2>What you will learn in this chapter</h2>
<h2>Summary</h2>
<h1>Chapter 2</h1>
<h2>Recap</h2>
<h2>Conclusion</h2>
</body>
</html>

Live coding widget

Use our live coding ...