Style attributes

We define the look of our web page using CSS. The best way to apply styling to a page is using a separate CSS stylesheet, which defines all the rules for our site. We'll get to this shortly.

We can however apply styles to individual elements on a page. Say we have a paragraph, like this:

Let's make it bigger and redder!

We can make it bigger with a style attribute like so:

<p style="font-size:30px">
Let's make it bigger and redder!

If we wish to apply some more rules we can do so by separating them with a semi-colon, like so:

<p style="font-size:30px; color: red;">
Let's make it bigger and redder!

Exercise - Style Tags

Use HTML something like this. You can copy and paste this if you like:

<!DOCTYPE html>
Style attributes are handy
In a pinch.
But be careful not to overuse them!

Refer to the CSS cheat-sheet here:

CSS Cheat-sheet
  1. Make the h1 big and red.
  2. Make the paragraph blue.
  3. Add a background colour to the html element.
  4. For bonus points, add a background texture to the html element. You may wish to pick one from here
  5. Add a 5 pixed dotted grey border around the body element.
  6. Set a width on the body of 500px.
  7. Center the page by setting margin:0 auto; on the body.
Next Exercise: Divs and Spans >>>
comments powered by Disqus