The best way to personalize your page
Cascading style sheets? Why? Well - because unlike HTML, stylesheets let you control how the webpage looks. You can tell it what font to use on specific types of tags, for instance - all my <em> tags are rather brightly emphasised, and if you look at my page source, all you will see is <em>emphasised</em>. Nice, I say. And if I want different types of emphasis, I could have made several classes, rather than just changing the <em> tag. I could for instance, make one emphasis like this one. A bit annoying, but fun. And a small example of the "cascade" idea. If you look at the code on that one, you will see <em class="red">, which overrides the normal <em> tag.
Using CSS requires a lot of care at present, and it must be checked with multiple browsers. The browsers don't yet fully support CSS, unfortunately. Though each new version of MSIE and Netscape gets better, they both still need a lot of work. Netscape 6 beta is much improved, , and MSIE 5.5 beta is somewhat better, so there is hope. Opera is reasonably good, and I hope they continue to improve. However, because there are problems with the current versions, it is best to stick to the more basic CSS for now. Float and some of the absolute postioning, for instance, are very badly supported, so I am still using tables for positioning - something I would really rather not do.
It doesn't really do any damage if the browser doesn't support a particular style or style attribute at all (just doesn't look as good), the problem comes when they partially support an attribute, or have glitchy support. For instance, I have my paragraphs set to justify. For some unknown reason, Netscape 4.6 will try to justify a short end sentence in a paragraph, leaving you with with very widely spaced words, unless you close the paragraph with a </p> and leave a space between the period and the </p>. There are a couple of other problems with unclosed paragraphs and browser implementation of CSS, so it is best to always close them anyway.
There are rules as to what inherits what, and which style set is dominant, most of the browsers still have a bit of trouble with this, but it generally works.
There are 4 basic ways to use a CSS styles or stylesheets.
One, you can embed the style in the document, it goes right below <HTML> and above <HEAD>.
Two, you can link to an external stylesheet. This page uses a linked style
sheet - it's in the<head> section of the html and reads like this:
<LINK REL="stylesheet" TYPE="text/css" HREF="../web/web.css">.
And every page in the web area of the site here uses it. If I want to change emphasis
to green print on yellow background, all I do is change the stylesheet, and every
page that is linked to that stylesheet has that emphasis. And I don't have to
go change the <font> tags in dozens of pages.
Three, you can import a stylesheet, (which so far, only MSIE seems to be supporting, but it will be very powerful once it's fully supported, as it will allow you to truly do cascades).
Four, for fine-tuning, add styles inline - which overrides linked and embedded styles, but like an html tag, needs to be done at each use. I suppose if you want to use something just once, but I think that if you do it extensively, you might as well just use font tags.
Confused yet? I actually found CSS more difficult to learn to use than basic HTML, but once I got to know it, I was hooked. One of the things I like best about stylesheets is that ability to change the whole look of a site with just a few changes in one stylesheet. Another thing I like is that if a browser doesn't support stylesheets, it just ignores them. This leaves my page still quite readable, even if a little dull.
Cascading Stylesheets Tutorial
- Created by Steve Mulder. The first tutorial I tried when I first decided to learn CSS. Also, the only one I needed. He's truly great at explaining the ins and outs in plain English, and leading you through things step by step. Create your first stylesheet here, once you've done that, it's just practice and play from then on. He gives you a very good basis.
- Cascading Style Sheet Guide
- A detailed guide to stylesheets, I found it very helpful. This site also lets you change their style, as our main site does, but only if you are running MSIE. Intermediate level.
- W3C CSS
- The W3C Overview pages for Cascading Style Sheets (CSS). Good for the advanced user. Covers everything in advanced techno-babbling detail, which I like, your mileage may vary.
- CSS Validator
- Make sure it's right before you wonder why it doesn't work. Online, and a very handy little program, tells you exactly where the error is, - even gives you warnings about things that aren't wrong, but could cause odd reactions in browsers.
- The Definitive Style Sheet Reference - Meyer
- List of what works on what browsers, with notes and tests. Find out exactly what works on what browser. Includes Opera, NS, MSIE, both for PC and Mac.
- CSS Bugs and Workarounds
- An very good list of bugs in browsers, and ways to work around the bugs. I hope these pages aren't needed too much longer, but I'm afraid they will be.
- CSS test pages (W3C) and the
Float test page (W3C)
- These two are an excellent resource for testing what works (and doesn't work) properly in different browsers. Just take your favorite browser for a stroll through the various tests. Float is generally very badly supported, so going through this area can be pretty funny!
- Scripts: CSSFile
- CGI, strictly speaking - It is a Perl script that will make your look optional. You can have many different stylesheets and let your users pick the one they like to browse your site with. Used gleefully on the main part of this site. I've had an incredibly good time with this little script! Everyone who has ever had a client complain about the colors or text on their site should try it. Finally, maybe we can please everyone!