HTML Tutorial 2

HTML Tutorial 2

Style sheets aren't hard. What they are are a template for how your page looks. They can work on the whole page, a specific tag type or an individual tag. They can be manipulated using scripts but that's for .. ya you guessed it, later on. For now we'll look at how to apply a style sheet specification to the whole site through the <body> tag.

To add a style sheet we need the <style> tag. This goes in the <head> tag. Your page should look like this:

  1. <html>
  2. <head>
  3. <style>
  4. </style>
  5. <title>My first web page</title>
  6. </head>
  7. <body>
  8. Hello World
  9. </body>
  10. </html>

Now the <style> tag holds the specifications of how the tags should look. Blank as we have it now it uses the default specifications. By adding information to the style tag we can adapt and change the default specification. In the <style> tag add the following:

  1. body {
  2. background-color: darkgreen;
  3. color: yellow;
  4. font-family: arial;
  5. font-size: 14pt;
  6. }

Your page should look like this:

  1. <html>
  2. <head>
  3. <style>
  4. body {
  5. background-color: darkgreen;
  6. color: yellow;
  7. font-family: arial;
  8. font-size: 14pt;
  9. }
  10. </style>
  11. <title>My first web page</title>
  12. </head>
  13. <body>
  14. Hello World
  15. </body>
  16. </html>

Save your page and open it in the web browser. It should look like this: 

A screenshot of what second HTML code should look like

Ok before we go any further let's examine what we've just done. 'body {' just means we are about to adapt the <body> tag. 'background-color:' means the background color of the tag will be 'darkgreen'. (Note most common color names will work here e.g. red, blue, black, white etc). Alternatively you can use RGB codes or #codes. We'll come to these a little later. 'color:' means the color of the text of the <body> will be 'yellow' (again most common color names will work here. Point to note the #code of yellow is #FFFF00 and it's RGB code is rgb(255,255,0);). 'font-family:' means the font type of the text of the tag will be 'arial' (any font you can access using your word processor package e.g. arial, times new roman, tahoma etc can be put here instead of arial). 'font-size:' means that the size of the font of the tag will be '14pt' in this case. This can generally be any number between 6pt and 72pt but depends on your font.

Now be honest. That wasn't so bad was it. This is by no means the end of adaptions we can make but these are the generally most useful. As we go along we'll learn some more. Mess around with those until you come up with a color-scheme you're happy with. Now the most useful thing about style sheets apart from the fact you can apply one change to many tags at once is that I can re-use them. Copy the text between the <style> and </style> tags to a new page and save as 'style.css' in the same folder/directory as your html pages. Remove the <style> tag and put in it's place the following <link rel="stylesheet" href="/style.css">. Your page should like like this:

  1. <html>
  2. <head>
  3. <link rel="stylesheet" href="/style.css">
  4. <title>My first web page</title>
  5. </head>
  6. <body>
  7. Hello World
  8. </body>
  9. </html>
     

In the browser your page will look just as before but it will be much easier to make changes to your website going forward. To get all your pages looking the same you only need to add the <link> tag with the 'href' attribute equal to the location of your style sheet. Well that wasn't so bad and I think you kept up well so we'll progress and move on to the next things you'll need for a site: Pictures and Links.