« | 1 | Page 2: Writing styles | 3 | 4 | »
Continued from previous page
Ay, Bee, See (The Basics)
So, the two things required to write a stylesheet is a) a good text editor and b) some basic knowledge of HTML items. If you have the first, locate the stylesheet document “styles.css” included in the dbs-doc package and open it in your text editor. It is a good thing if your editor shows the line numbers, and if you have set it to display line numbers, it’ll make it easier to follow the document. On the very first line of the document you will see a comment. It is a hidden bit of text that has been left there as a note, it does not affect any styles. The way we use comments in CSS is either this way that I have done here (slash-asterisk ... asterisk-slash), which is really for comments that span multiple lines, like this:
/*This is a comment that will span over at least two lines. It serves as nothing more than an example of how a multiple-line comment works.*/
Or you can write single-line comments, like this:
//this is a single-line comment
Just make sure that a single line comment really is on one line when using it.
Styles of Writing
Just like any good cult with many followers, there are different takes on how stylesheets should be written. Some say every style should be written in a single line, because it’s more economical, others say that you should begin every new declaration of a style on a new line and indent the line, for clarity. As you can see by the styles.css document, I personally belong to the latter school. Again, this is a personal choice. You should find your own way of writing a stylesheet, the way that works best for you.
There are however a few absolutely given rules when writing css. You begin with the style selector(body, p, a, h, etc) or #some_id/.some_class plus selector, followed by a blank space and a curly brace that signals the beginning of the style declarations. Each style declaration consists of two parts: the name and the value. You separate the two with a colon after the name (background: somevalue). You close each style declaration with a semi-colon. Any declaration that lacks a closing semi-colon is still open and the cause of countless hours of debugging, hair-pulling etc. And you end each style with a closing, reversed curly brace.
This is a style:em { background: #9e0; font-weight: bold; margin: 1em 0; }
This is not a style:em (background: #9e0; font-weight: bold; margin: 5px)
Link Styles Look Different
Yes, link styles (or to be precise, anchor styles) look slightly different in the sense that you have a general style called a and a number of substyles called a:something. Not only do these styles look slightly different, but the way you write them is slightly different too. The other styles you can write in almost any order you like, but link styles must be written in a specific order. Hmm, let me emphasize that, strongly. The link styles must be written in a specific order. There, that’s better.
Here is the order in which to write anchor (link) styles. Memorize them.
a /*the general style name*/
a:link /*the first link style, it states that the anchor is indeed a link*/
a:visited /*the visited state*/
a:hover /*the hover state*/
a:focus, a:active /*these two have the same importance, hence being placed on the same line*/
If you use specific styling on any of a:link, a:visited or a:hover, you have to write all those three styles but you don’t need to use the general a style. If you want the same style on all link states, simply use the a style. You don’t have to use the separate link styles. a:focus and a:active are not regarded as important, simply because they don’t add any value to mouse-navigators. They are however good tools for keyboard navigators and screenreaders and should really be used more.
Some of the things I’ve just demonstrated, one way or another, are things that are not available in Freeway. You can only use them by hand-coding your pages, or using external stylesheets. Giving the <body> a padding for instance, styling the p-selector (paragraph) or using standards compliant tags for emphasis such as <em> and <strong> instead of italicizing or emboldening text that you want to emphasize. Em and strong should be used for emphasis. Italics and bold should only be used for decorative purposes (if even that, since the purpose of these styles are to emphasize a word or a sentence anyway). So, how do you decide what to incorporate into your stylesheet and what not to incorporate? Well, this leads us to stuff like specificity.
Next: The Order of Things.
Colophon
180 mph is a periodically published website and PDF magazine, created by Fred Kylander of Glimmerman Design. The purpose of 180 mph is to serve as an independent resource for users of the web desktop publishing software Freeway, by Softpress Systems Ltd. Neither 180 mph nor Glimmerman Design are affiliated or connected to Softpress Systems in any way. For official information about Freeway, please visit the Softpress web site.
180 mph is produced on an Apple G4, 17" Powerbook. The magazine is produced with Adobe InDesign 3, Illustrator 11 and Photoshop 8 (CS). The website is produced with Freeway Pro 3.5, SubEthaEdit 2 and Adobe Photoshop 8. Other hardware include a Canon EOS 300D and a Wacom Intuous tablet.
ISSN 1652-1652-8085
