Fonts and colors

Here's some HTML:

<h1>A page</h1>
<p>This is a page.</p>
<p>It is not a dog.</p>
<h2>This is subheading.</h2>
<p>That subheading is not a dog, either.</p>

Here's how it renders:

Plain HTML

Let's style it, by adding a style section to the HTML file.

<style>
  h1 {
    font-family: Calibri;
    }
</style>
<h1>A page</h1>
<p>This is a page.</p>
<p>It is not a dog.</p>
<h2>This is subheading.</h2>
<p>That subheading is not a dog, either.</p>

This changes the way <h1> tags are rendered. Here's what it looks like:

Font family change

font-family is a CSS property. The font family can be courier, serif, Arial, lots of things.

Let's add some color:

<style>
  h1 {
    font-family: Calibri;
    color: yellow;
    background-color: black;
    }
</style>
<h1>A page</h1>
<p>This is a page.</p>
<p>It is not a dog.</p>
<h2>This is subheading.</h2>
<p>That subheading is not a dog, either.</p>

That looks like:

Adding color changes

You can change the look of any HTML tag this way. Not just headings.

There are hundreds of CSS properties. We'll talk about more of them as we go through the course.

Confuse people by making links vanish.