Astro Lesson #28:
the.style.council
It's just amazing how that grrl can disappear when she knows there's
a lesson to be made! We eventually found her hiding in the Astrolab
(eating chocolate wouldn't you know it!) But she was reading up on
StyleSheets so we suppose she can be forgiven - again.
Last time we dared to mention the lovely
topic of Style Sheets just to kinda let you know what they were all
about. Don't forget that you will need recent versions of browsers
to use CSS properly and to get the most of this lesson 'cos it uses
JavaScript (go on - upgrade. You know you want to ... ). Now, it's
a mighty big topic so if you are really keen to follow up on it we
recommend purchasing a book (shock, horror - yes that means going
into a BOOKSHOP aaarrrggghh) or downloading this zip
file (119k) created by the Web
Design Group which our friend Andrew Ronayne sent in, being such
a helpful fellow. It's a bit stodgy but it is helpful. Retrogrrl will,
however, attempt to show you how to get started, so let's go!
show.your.style
Let's take an ordinary old web page and give it some style.
<html>
<head>
<title> Uncle Ned's 'Home of Square Dancing' </title>
</head>
<body>
<h1> Uncle Ned's Square Dancing Tips A'plenty </h1>
<p> Know your Dosey from Your Doe </p>
</body>
</html>
Take a look at how this pans out. It's pretty ordinary. But see how we've used the Header tag,
and notice how we've been careful
to close all our tags - this is important as the Style Sheet needs to know where things start
and finish. This might seem a pain at first, but you can live with it.
Time to add some embedded style to this baby for Uncle Ned. You need to add something like the
following into your html - stick it between the head tags and the browser knows to apply it to this particular page only.
<style type="text/css">
<!--
h1 {color:#90033 ; font-size: 16pt ; font-family: courier,"courier
new",monospace}
-->
</style>
Okely Dokely, here's what happens. Let's destruct that shall we?
unfolding.the.sheets
Always ever-so polite we like to tell browsers what we are on about, and so we say 'Pardon me
Mr Browser, but did you realise that this
ol' web page is using style sheets, of the kind text/css?'. This is so as not to confuse
browsers that are behind the times and don't know what the heck a CSS is, never mind how to display one. In this
case they will simply feign ignorance and forget what follows.
Just to cover all bases we should also plonk the Style information inside some comments - some
dumb old browsers still won't be happy otherwise and will spitefully show the Style code right
there on your web page. Icky. Comments go like this
<!-- i can say what i like in here and you
can't stop me, do you hear
-->
Okay. Now put that pen down and pay some attention. Here's where we
learn the rules. (don't worry, retrogrrl won't punish you if you break
them. Your code won't work, but that's all). Style Sheets live by
the rules - that is, they need to follow a certain structure or they
just won't cooperate with you. Just like the Monopoly rule 'do not
pass go. Do not collect $200', a rule has 2 bits to consider:
h1 { color:#90033 ; font-size: 16pt ; font-family:
courier,"courier new",monospace}
Right, here we have the 2 bits - the bit outside the curly whatsits and the bit inside. The outside
bit is called the Selector (h1), while the inside bit is called the Declaration (color etc).
The selector refers to the HTML tag we want to style-up, and the declaration refers to how we
want to do the styling. Just about any HTML tag can be a selector. We have actually 'grouped' a bunch of
declarations because they are talking about the same selector, and we all know that SOMEONE
around here is lazy - any method that saves work is dutifully employed. Otherwise we could have done
this ...
h1 { color: #90033 }
h1 { font-size: 16pt }
h1 { font-family: courier,"courier new",monospace }
but that would be silly.
property.values
Don't relax just yet, 'cos there's more. The declaration also has
2 bits (ai carumba!) - Property and Value. In retrogrrl's
example, color is one of the properties (a thing) and it's value is
the hex color #90033 (a description of the thing). We could also have
said color: red, but specifying hex equivalents is best whenever you
are using color.
The next property we mentioned was font-size and the value we want is 16pt. That's right children, with CSS
you can actually control fonts more precisely - especially font size. With plain unsalted HTML we
are stuck with 7 sizes. With Styles it is easy to present font size and, guess what, there are
three (count 'em) ways to do so ... length (or units), percentages and size (absolute or relative, also known as keywords).
Today, we used Points - and set them to 16.
Then we wanted our font to have a family (aww, ain't that nice?). Our example uses the font-family
'courier', and just in case no-one has this font on their computer, we provide the alternative
'courier new' (in quotes because it is a 2-word name) and just in case they don't have that either, we say 'oh go ahead and use whatever monospaced
font your system has as default'. This is called a Generic font name.
But hey, the properties and values could fill a page all by themselves and we are running out of room.
Here's a small sample of some more CSS stuff that we will get
to on another orbit. As a matter of interest, we will hereby publicly declare that we just spent
50 minutes trying to work out why Navigator 4.05 would not display the paragraph text in this
example correctly. We had font size instead of font-size. IE3 did not mind, but there you go. Rats.
enough.already
Don't know about you, but we have just about had enough for today,
and retrogrrl is inching her way towards the escape hatch. We did
warn ya that it's a lot to cover. So go away now and play with these
new toys - until next time when we batten down the hatches (so retrogrrl
can't leave) and tell you more tales of Stylishness, or something.
