Web Development Lesson 3 - Tables

• We'll continue using the the work you've done in jsfiddle until now.
• Since you've probably lost the work while doing the exercise, here it is again.

<h1 style="font-family:arial, sans-serif; color: green; font-size: 1.7em; text-decoration: underline; font-variant:small-caps; text-shadow:2px 2px #ff0000;">
My Story
</h1>
<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>

• To start with, remove all the styles inside tags, so for example, <p style="text-indent:50px"> becomes simply <p>.

• Each of the design elements we've used are called 'styles'.
• They can be separated from HTML by using CSS.
• In jsfiddle, you can put the style rules in the section at the top right.
• Let's make paragraph text blue.

p {
  color: blue;
}

• The tag before the brackets ({}) shows the target - what the rules will be applied to.
• The rules inside the brackets are applied to all elements that match the target element. In this case, all paragraphs. The heading remains unchanged.
• This makes CSS very useful for creating a consistent look throughout your website.
• Simply associate the same CSS rules with every page and they'll look the same.
• 'Cascading' refers to the way the rules are applied to child elements as well, unless it's overridden by rules for a more specific target. We'll talk about what 'specific' means later.

• Let's try some other rules that you are familiar with.
• Below color: blue;, add text-indent: 50px; so your CSS looks like this.

p {
  color: blue;
  text-indent: 50px;
}

• There are four types of text alignment. You've used right, and the default is left. You can also use center, but today, let's try justify. This aligns both the left and the right ends of the text as you see in books.

text-align: justify;

• Did you add this line inside the brackets on its own line? Did it work as expected? If it didn't, try to work out what you did wrong (eg spelling, missing ;) or ask for help.

• Now make the span italic using the following code.

span {
  font-style: italic;
}

• All our <span> tags are now italicised.

• Let's modify the heading.
• We can change the font family by adding the same code as the attribute.

h1 {
  font-family: Arial, sans-serif;
}

• Let's make the heading really big.

font-size: 3em;

• Any attribute that works in HTML can be used in CSS. Let's complete the heading using the same attributes as before.

h1 {
  font-family: Arial, sans-serif;
  font-size: 3em;
  text-decoration: underline;
  font-variant: small-caps;
  line-height: 3em;
  text-shadow:2px 2px #ff0000;
}

• Notice that by placing each style definition on a separate line and indenting them makes it very clear which element is targeted and what styles they will use. If you haven't been indenting your code, please try from now on.

Next: Table Structure and Content