Search⌘ K
Home
Courses
Web Development: Unraveling HTML, CSS, and JavaScript

Inline Styling Our HTML Page

Explore how to apply inline styling to your HTML page using the style attribute. Learn to modify header colors and margins directly within your HTML tags and see your changes in real time. This lesson helps you practice coding inline CSS, understand its effects, and prepare for more advanced styling techniques.

We'll cover the following...

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:

HTML
<!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 ...