CSS
In the previous "brief overview" post, HTML was discussed. In the HTML document that was created there was a <head> area which I didn't go into detail about. Today we're going to revisit that document and make use of the head area with some of the "invisible" code I mentioned. It's called CSS (Cascading Style Sheets) and it has its own tag <style>. As the name suggests we use the tag to add "style", colour and hopefully some pizzazz.Back to the HTML
<!DOCTYPE html>
<html>
<head></head>
<body>
<h1>My first HTML document</h1>
<p>I'm really proud of this, doesn't it look great! <a href="http://sketchytech.blogspot.co.uk">I learn't how to do it here</a>.</p>
</body>
</html>
<html>
<head></head>
<body>
<h1>My first HTML document</h1>
<p>I'm really proud of this, doesn't it look great! <a href="http://sketchytech.blogspot.co.uk">I learn't how to do it here</a>.</p>
</body>
</html>
Next the CSS
CSS is written using curly braces and style instructions. So first of all we're going to change the appearance of our h1 and we'll do this by simply writing:
h1 {color:red;}
Notice first the US spelling of the word colour (color), this is essential, and next the way we've first identified the tag then followed it with a curly brace, the name of an element and an instruction for that element, and that we finish each instruction with a semi-colon, and close the whole lot with a curly brace.
How do we add this to our document?
We add this style information to our document using the <style> tag within the head area of the document. Like so:
<style>
h1 {color:red;}
</style>
h1 {color:red;}
</style>
This means our whole document will read:
<!DOCTYPE html>
<html>
<head><style>
h1 {color:red;}
</style></head>
<body>
<h1>My first HTML document</h1>
<p>I'm really proud of this, doesn't it look great! <a href="http://sketchytech.blogspot.co.uk">I learn't how to do it here</a>.</p>
</body>
</html>
<html>
<head><style>
h1 {color:red;}
</style></head>
<body>
<h1>My first HTML document</h1>
<p>I'm really proud of this, doesn't it look great! <a href="http://sketchytech.blogspot.co.uk">I learn't how to do it here</a>.</p>
</body>
</html>
What if I have two h1 headings and want them to look different?
If this is something you want to do (really?) then we have at our disposal two more CSS items to make this happen: class and id. Let's add an id to our CSS first of all:
#heading {text-align:center;}
Next we'll add the class name:
.heading {text-transform:uppercase;}
An id is only used once on any one page, but a class can be used over and over again, and since the latter can be applied over and over again, a h1 might have the same class as a paragraph for example unless we apply it specifically to a level of heading by writing for example:
h1.heading {text-transform:uppercase;}
But the real magic comes in how we denote a class and an id both in the CSS and in the HTML to link them together. In CSS a full stop preceding a word means class (e.g. .myclass) and a hash sign means id (e.g. #myid), as you'll see above, and as you'll see below we apply a class with class="ourreusableclassname" and an id with id="ouruniqueidname" in the HTML.
Note: the names of our class and id can be anything we choose as long as the CSS and HTML agree and they don't conflict with other id and class names in the document.
<!DOCTYPE html>
<html>
<head><style>
h1 {color:red;}
#heading {text-align:center;}
.heading {text-transform:uppercase;}
</style></head>
<body>
<h1 id="heading" class="heading">My first HTML document</h1>
<p>I'm really proud of this, doesn't it look great! <a href="http://sketchytech.blogspot.co.uk">I learn't how to do it here</a>.</p>
</body>
</html>
<html>
<head><style>
h1 {color:red;}
#heading {text-align:center;}
.heading {text-transform:uppercase;}
</style></head>
<body>
<h1 id="heading" class="heading">My first HTML document</h1>
<p>I'm really proud of this, doesn't it look great! <a href="http://sketchytech.blogspot.co.uk">I learn't how to do it here</a>.</p>
</body>
</html>
In reality we'd most likely want all h1 styles to look the same, and that's the reason we have h2, h3, h4, h5, and h6 at our disposal to identify a hierarchy of headings, but this is just a quick example to get you started. And if you copy and paste this penultimate piece of code into your text editor and save the file with an HTML extension all will work when you open it in a web browser.
Fine, am I ready to head into the big wide world with this now?
Not quite, you should be aware that it is normally the case that a single set of CSS is shared across multiple HTML files, and we do this by saving the CSS in a separate file and then creating a link from the HTML to the CSS inside the head area of the document. The CSS file doesn't need the style tags or any doctype declaration in the CSS file. It is plain text saved with a .css filename extension. We link to it within the head like this:
Where the href points to the file/folder in which the CSS is held.
<!DOCTYPE html>
<html>
<head><style rel="stylesheet" type="text/css" href="style.css">
</style></head>
<body>
<h1 id="heading" class="heading">My first HTML document</h1>
<p>I'm really proud of this, doesn't it look great! <a href="http://sketchytech.blogspot.co.uk">I learn't how to do it here</a>.</p>
</body>
</html>
<html>
<head><style rel="stylesheet" type="text/css" href="style.css">
</style></head>
<body>
<h1 id="heading" class="heading">My first HTML document</h1>
<p>I'm really proud of this, doesn't it look great! <a href="http://sketchytech.blogspot.co.uk">I learn't how to do it here</a>.</p>
</body>
</html>
Where the href points to the file/folder in which the CSS is held.
Comments
Post a Comment