Web Development Lesson 2 - Text

In this exercise you'll learn how to create a heading and some more formatting styles that make a heading pop.

We'll continue to use the code you've been working on in jsfiddle.

My Story
<p style="text-align:right">
My friend Pablo has a <em style="color:red; font-weight:700">pet dog</em> called Sam who likes to have his tummy scratched. When they go to the park, <strong>he likes to chase a <em>ball</em>.</strong> He rolls in the dirt so Pablo has to wash him when they get home.
</p>
<p style="text-indent:50px">
On Sundays they drive to the <sup>mountains</sup> where he runs around smelling the grass and <span style="color:blue;">wagging his tail</span>. He gets so tired that he sleeps all the way home.
</p>

• Headings can also be defined using html tags. Let's add a heading above the first line

<h1>My Story</h1>

• Notice that the text is much bigger and heavier, as you'd expect from a heading.
• There are 6 levels of heading from <h1> to <h6>. They get smaller (less important) as the number gets higher.

• Let's make some changes to the heading style.
• Change the font by adding a font-family style attribute.

<h1 style="font-family:Arial,sans-serif;">My Story</h1>

• Now make it green.

<h1 style="font-family:Arial,sans-serif; color:green;">My Story</h1>

• Next, let's make it smaller.

<h1 style="font-family:Arial,sans-serif; color:green; font-size: 1.7em;">My Story</h1>

• The em is the standard size for normal font, so this is 1.7 times bigger than the letter text (but still smaller than h1 usually is).

• Let's underline the heading.

<h1 style="font-family:Arial,sans-serif; color:green; font-size: 1.7em; text-decoration:underline;">My Story</h1>

• Let's make it all upper case.

<h1 style="font-family:Arial,sans-serif; color:green; font-size: 1.7em; text-decoration:underline; text-transform:uppercase;">My Story</h1>

• Here's a different style that looks great in headings. Notice that you need to delete text-transform:uppercase; to get small-caps to work. You can't have both.

<h1 style="font-family:Arial,sans-serif; color:green; font-size: 1.7em; text-decoration:underline; font-variant: small-caps;">My Story</h1>

• We can also change the height of the line.

<h1 style="font-family:Arial,sans-serif; color:green; font-size: 1.7em; text-decoration:underline; font-variant: small-caps; line-height: 3em;">My Story</h1>

• Did you notice the extra space above the heading now? That's because the line height is bigger than before.

• Finally, let's add some shadow to the heading.

<h1 style="font-family:Arial,sans-serif; color:green; font-size: 1.7em; text-decoration:underline; font-variant: small-caps; line-height: 2em; text-shadow:2px 2px red;">My Story</h1>

• Here we are adding a red shadow 2 pixels below and 2 pixels to the right of the original heading.
• See how you can string many style attributes together?
• This is handy if you want to change the style of one element, but becomes cumbersome if, for example, you want to change the style of all paragraphs in your letter. For that, we'll use CSS, which we'll cover in Lesson 3.
• All the style attributes we've used in this lesson can be used in CSS.

Next: Javascript