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'

Styles are like adjectives.

I like ice cream.

But which flavor exactly? Go around the room and ask the girls what their favorite ice cream flavor is.

I like chocolate ice cream
I like vanilla ice cream.

Ask the girls if they know how to change the background color of a body tag.

<body bgcolor='#facade'/>
<body style='background-color: #facade'/>

Style / bgcolor are basically "adjectives" and the "noun" is body.

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.

Reminder: When writing styles, add the semicolon even though the last style doesn't require it. It will help to avoid confusion later. Example: style="width:500px; height500;"

<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="…">