Last time I challenged you to make your own web page with a single paragraph and I tried to get you to colour it red:
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>My Title</title> </head> <body> <p colour="red">My first paragraph.</p> </body> </html>
I did a nasty thing there, even though I said that you should make sure to spell colour wrong browsers don't understand the colour, or even color, attribute. Browsers have had all sorts of quirks over the years in that some supported some attributes whereas others didn't. As far as I'm aware none of them have supported the colour attribute. And most especially don't support it within the HTML5 specification (a specification is something that browser manufactureres are supposed to respect). In order to actually colour our paragraph we have to use soemthing called CSS.
CSS is cool and something that you'll come to love and hate in equal measure if you carry on along making websites.
CSS is as old as SGML (remember that old thing?) but owes an awful lot to a Norwegian by the name of Håkon Wium Lie. It's an interesting thing as it's basically a way of telling browsers how to display the content of your page! You tell it to jump and then tell it how high you want it to jump in much the same way as a Sergeant major might to troops. In the example above we could tell the browser to paint the paragraph red by saying style="color:red;".
The order is to colour it and the specific order is to colour it red (there are a load of different names for colours in HTML, here is a list). Another way of looking at CSS is to think of it a list of key:value pairs. We can look at color being the key and red being the value. This is a cool concept to get your head around while you're here as a lot of things can be split into this type of pairs when we look at websites.
CSS is also fascinating in that it can be in all sorts of different places at once!
We can place our CSS in a different file and call it within the page itself:
style.css:
p { color: red; }
index.html:
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>My Title</title> <link rel="stylesheet" href="style.css" /> </head> <body> <p>My first paragraph.</p> </body> </html>
We can place out CSS in the page:
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>My Title</title> <style> p { color: red; } </style> </head> <body> <p>My first paragraph.</p> </body> </html>
We can add it to the elements that we want to style directly:
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>My Title</title> </head> <body> <p style="color:red;">My first paragraph.</p> </body> </html>
There's a hierarchy in this though as styles applied directly take precedent over styles defined in the head of the page which in turn take precedence over styles within external style sheets. I guess it's like the closer the order comes from the louder it is so it's going to be acted on over quieter orders.
This might mean that you'll want your styles on the elements but that can get really quite boring and make the HTML which makes up your page ugly. It also goes against the seperation of content and style! This might seem irrelevant but imagine that you're a search engine robot and you want to be able to "read" the content of a web page. Would it be easier to read <p style="color:#ff0000">My first paragraph</p> or <p>My first paragraph</p>? That's not overly hard to read is it, but imagine that you want the paragraph to be larger, have a non-standard typeface and be italic? That could get quite boring to read through couldn't it?
So if having it on the element isn't right perhaps you should sling the directives in the head? That works but it's a little like giving the search engine a really long introduction to your webpage, perhaps it will just get bored and leave before it gets to the good stuff?
Far better, I think, to put all the styling in a different file that the search engine can skim over and not have to worry about, that way the HTML that makes up my webpage just has the important stuff in it rather than ideas about the wallpaper and what colour the skirting boards need to be.
Anyway, that's probably enough for today. We'll have a look at styling a little bit more next time.
No comments:
Post a Comment