Astro
Lesson #35:
my.kinda.style!
A
long time ago, in a galaxy far, far away, Retrogrrl chatted to you
all about CSS - cascading style sheets. You've probably forgotten
all that stuff so jump into the SIDRAT and go for a quick spin back
to Lessons 27 & 28.
Back so soon? Goodie - let's go on shall we?
Today
we will take a quick look at how to add a style using Dreamweaver
2 or 3 - our favorite program. If you don't have DW (shame on you!)
- grab the shuttle to Macromedia
and download a trial version.
There
are many instances when some styles simply won't work in all browsers
but a simple text style will do quite nicely and is easy to apply.
(This works in 4+ browsers and even IE3).
a.case.for.a.css
Now the whole reason for using a style is to allow greater control
over fonts and to eventually allow the WC3 (that's the international
bunch of bods who decide what's hip and cool in HTML) to phase out
the font tag. Remember how it all works? A style sheet is a high falutin'
name for an external text file that is invisibly linked to your web
page and governs what happens in the page when you apply it to certain
elements such a <p> paragraph, or <a href> links.
We've actually just done this before your very eyes and you didn't
notice a thing - hey presto! The first paragraph in this lesson uses
the traditional font tags <font face="arial, helvetica,verdana"
size="2" color="#000000"></font>. You
can imagine how many of these little suckers are hanging around the
place.
This section however is using an independent style sheet (just a
text file with a fancy name, remember?) that lives in the same directory.
The first instance involves the paragraph heading, the second the
actual text. Let's look at the contents of the style sheet and see
what's happening...
airing.the.sheets
.cadethead { font-family:
Verdana, Arial, Helvetica, sans-serif; font-size: 14pt; color: #FF9933}
p { font-family: Verdana, Arial, Helvetica,
sans-serif; font-size: 10pt; color: #000000}
This is what it looks like - just text. Now you can write this by
hand or use Dreamweaver - it will look the same in any case. There
are two things going on in this style sheet - the first is a class,
which is just a fancy term meaning a universal nickname that we can
apply to many page elements - like a fake ID card. This first part
of any style is called the selector - the something we want
to select and apply a style to.
In the first case we called the selector .cadethead
- we could have called it .unclefred,
it doesn't matter. What does matter is the [.]
in front - this is what makes the selector a special selector called
a class. So we could have .unclefred
or .myheader or .whatchamacallit
- as long as there is a [.]
Inside the curly brackets we have the instructions for .cadethead,
or the declaration - wherever we apply the class of .cadethead
these things shall come to pass
- font-family: (much the same
as our old pal 'font face') ;
- font-size: (same as our old pal font size, except
we get more choices: we have stuck with pts) ;
- color: (straightforward)
Notice that after each property is a colon [:]
This is a must as it means the specific description, or value
of the property, is coming next. Between each property there
is a semicolon [;] which means
that the value for this property is complete. (If there are more properties
to come).
The second case is very similar except that instead of a class we
have redefined an HTML tag - the <p> or paragraph. This simply
means that wherever we use a paragraph in a web page it will take
on these new characteristics. Now lets see how we do it in Dreamweaver.
dream.a.little.style.with.me
Make a plain web page - just a bunch of text and do not format any
of it. If you do, this formatting will take precedence over any style
sheet instructions. This is because the rules of HTML say that style
sheets must have a cascading, or tiered, level of importance - internal
formatting is the big boss, an internal style (we mentioned this in
our previous lessons!) comes second - middle management if you will
- and an external style sheet comes last - the working class man.
Your page should look like this.
Now we get to make a stylesheet - what fun! If you want to do it
by hand copy the style sheet information as we showed you above,
and save in notepad (pc) or simpletext (mac)
as is - no formatting, nuthing, nada, zip - as a .css file - call
it style.css. Once again, you can call it what you like - it could
be nerd.css. Doesn't matter.
In Dreamweaver you do things a little backward. You link your page
to a style sheet that doesn't yet exist (unless of course you are
already a dab hand at this and prepared one beforehand), and then
edit the empty style sheet that results. Crazy man, crazy.
With your web page opened in DW, select
[Window]
[Styles]
Note: In DW 3 select [CSS Styles] as
it now has 2 kinds which we won't go into right now. The floating
style window will magically appear. You could also have selected the
styles icon from the panel at the bottom of the DW screen, or pressed
F7. So many choices, oi vay!
In DW3, select the [Open Style Sheet]
icon from the floating window, or from the menu bar -
[Text]
[CSS Styles]
[Edit Style Sheet]
DW2 is the same, but has text, not icons in the floating window.
Next, click [Link] in the new window
that pops up - a dialog box will appear and here you simply type the
name you want to call your new style sheet - in our case it was cadet.css.
Very original. For your example let's call it mystyle.css
and we'll keep it in the same directory. If you had a few stylesheets
that you wanted to use alternately, you could give them a directory
of their own - as long as you specify the link correctly it's not
a problem.
If you have selected [View] [Head Content]
from the main menu bar you will see a miraculous thing - a small icon
of a chain link appears. Click it and the property floating palette
will tell you the name of the stylesheet you are now linking to -
cool! This icon is useful as it quickly lets you know there is a style
sheet linking to a page - otherwise you would have to look at the
HTML itself.
Now select [Open Style Sheet] again
and select [mystyle.css]. It is currently
empty so we will fill it with 2 things - a paragraph selector and
a new class selector we are going to call .myclass
- there's that originality again folks!
Select [Edit] and [New].
For the first style select [Redefine HTML Tag]
- which should be the default selection anyway - and scroll down in
the Tag window until you find the p tag.
Now your screen will be full of pop-p windows. The topmost one appears
chockfull of goodies - we will stick to simplicity however. Select
[Type], and choose the following:
font - verdana,arial,helvetica,sans-serif
color - 6666cc
size - 10pt
Select [Okay] [Save] [Done] to close
all the windows. Your page should now look like this.
Look at the source code for your page - you will see this between
the head tags:
<link rel="stylesheet" href="mystyle.css">
This is the link to the style sheet which has transformed any of
your text sitting inside paragraph tags. If you made a Style Sheet
all by yourself you will need to put this in the head section of your
page, making sure the link points to the correct css file.
style.and.class
The last thing we want to now do is make the special class. Type
a heading at the top of your page 'How I was
a Good Little Space Cadet' then we will edit our style sheet.
Select [Open Style Sheet], Select your
style sheet and choose [Edit], then [New].
Select [Make Custom Class] and enter
a name in the dialog box which appears - don't forget to keep the
[.] - call it .myclass
and make the following selections
font - verdana,arial,helvetica,sans-serif
color - 663366
size - 12pt
weight - bold
[Okay], [Save] and [Done]
Now highlight the heading you just typed and in the style window
select .mystyle. Hey Presto! Your heading
will take on the new characteristics of the class in the style sheet
- in fact, any text you highlight and apply this to will change. Try
it by highlighting the word Retrogrrl
and adding the class to this word only - here's what the HTML will
look like ...
<span class="mystyle">Retrogrrl</span>
It is saying 'apply the special instructions which I called "mystyle"
to only this piece of text, overriding any other instructions I might
have told you about' and it does this by adding the <span>
tag. Pretty nifty huh? Your page should now look like this.
a.mile.of.style
So there you have it - not too hard, but takes a little bit of thought.
Imagine the possibilities of linking one style sheet to all your pages
- any change you make to the style sheet will be universal and all
those font tags can disappear for good, creating smaller and less
cluttered web pages. Very tidy.
Til
next time when Retrogrrl recovers from the millenium festivities.
next.pod
