Styling

Class Outline

Review tags (hr, h1, img, a, b), nesting,
Style is an 'attribute' of a tag, just like href or src.
Style syntax is nitpicky -- Spot the Error exercise.
Lab time: background; color; font-size; font-style; text-align;
Multiple style attributes
Image styles width, float

Review exercise

Students get a handout with a designed web page (using tags they learned so far); Students have to write the code for the page as an exercise
Review the answers on the board
Review img tag; Review a tags;
Ask students to identify children and parent tags

Style is an 'attribute'

What was unique about img and a tags?

They have 'stuff' in the tag. Not just <a>, it's <a href="…"> What was the stuff for the img tag?

This 'stuff' is called an attribute.

Style is just another attribute you can add to a tag.

We can add a style attribute, just like we did href or src.

For example:

# For a link we did this:
<a href="http://www.google.com">Schmoogle</a>

# For style we can do this:
<p style="background:blue">Hi there!</p>

What do you think this style attribute does?

Style attributes (just like all html) are nitpicky.

Has to exactly the right syntax or it won't work.

Exercise: Spot the error:

Write each of the following code blocks on the board and the rules as we uncover them.

<p style=background:blue>Hi there!</p>

Can someone come and fix it.

Rule 1: Everything after the style tag should be in quotes.

<p style:"background=blue">Hi there!</p>

Can someone fix this?

Rule 2: Syntax is style=":" First =, then :

<p> style="background:blue" Hi there!</p>

Can someone fix this?

Rule 3: The style has to go within the opening tag.

Lab time

There are tons of style attributes, let's start with these 5.

Use the p tag like we did above and play with each of these style attributes on your site:

background:salmon;
color:white;
font-size:15px;
font-style:georgia;
font-align:right;

Multiple style attributes

What happens if you want to have more than one style for a tag, e.g., background:blue && color:white?

<p style="background:blue;color:white">Hi there!</p>

Separate mulitple styles with a semi-colon.

Image styles: float and width

Two handy styles for images:

Try this out on one of your images, what happens?

<img style="float:right" src="…">