|
|
|
|
||
        |
|
 |
|||||||||||||||||||||||||||
 |
 |
|||||||||||||||||||||||||||
|
Style Me This - Part 2 In the March issue, I told you a little about style sheets -- how to use them and what they can do in a general sense. This month I get more specific, showing you how to write the style sheet itself, and inevitably offering advice along the way... for the subject of style sheets, like pretty much everything else on the web, is a little contentious. First, what's a style sheet anyway? Well, it could be a set of style instructions inserted into the top of the HTML code that is your page on the web. If you're only creating one page, that will work fine. But if you're making more than one page, you'll want to place the style instructions in their own file and just refer to that file from the HTML file that needs them. Since this is the most likely situation, assume from now on that I'm referring to an independent file when I say style sheet. You can call the file most anything you want, but it's traditional and probably wise to give it a .css filename suffix. So let's call ours my_style.css -- why not create that file in your favorite text editor and follow along? (I use BBEdit from Bare Bones Software, but SimpleText will do fine.) Since every element on the web page can have a style, you might as well start by listing them all, like so... body, h1, h2, h3, h4, h5, h6, a:link, a:visited, a:active, a:hover, p, blockquote, ul, ol, li, dl, dd, dir, table, tr, thead, tbody, tfoot, colgroup, col, td, caption, th, b, i, u, cite, em, var, address, pre, tt, kbd, code, samp, small, s, strike, sup, sub Ouch! Do we really have to create a style for all of them? Well, if you don't plan on using some of them (and there are some in that list I've never used) you can leave them out. Additionally you can gang some up and style them together, so it's not as bad as it looks at first. Here's a shorter list... body, h1, h2, h3, h4, h5, h6, a:link, a:visited, a:active, a:hover, p,
blockquote, ul, ol, li, dl, dd, dir, table, tr, td, th, cite So what does a style instruction look like? It consists of the element name followed by a pair of curly braces which surround the property:value pairs (notice the colon) which, if there's more than one pair, are separated by semicolons. As usual it's easier to show you... body {font-size:1.0em; text-decoration:none; color:black;background-color:white;} When you have a large string of properties to set for an element, it's easier to read them if you lay them out on separate lines, like this... body { Leaving the brace on its own line helps make for a clean visual layout and therefore helps ensure you don't miss anything [Editor's Note: I prefer to move the opening brace to it's own line too so that they line up]. Clean code is good code I always say. (Much to the consternation of my drinkin' buddies. "What's he on about now?" they say.) Also, be sure there's a semicolon at the end of every style property's line. So copy the line of elements above and go into the file you created and paste them in. Now separate them out onto their own lines and start inserting some curly braces. You can set this up pretty fast if you use a search and replace routine. In BBEdit, I replaced ", " with " {\r\t\r}\r\r" without the quote marks of course. This turns body, h1, h2 for example into... body { h1 { h2 { Well, not quite. You have to add the braces to the last one yourself because there's no comma and space there to replace. It's a hard life! Some of these elements will end up with the same style, so you might
as well bunch them up a little. Do you want your DDs to look like your
DLs? Then set them up this way... dl, dd { Don't forget the commas when you do this. Saying "dl dd" means something entirely different. "dl, dd" means make all dl elements and all dd elements the same style. "dl dd" means make dd elements the same as dl elements only when the dd element is a child of the dl element. To put it another way, "dl, dd" are grouped selectors - styles apply to either selector wherever they're found. "dl dd" are contextual selectors -- styles apply to the last selector in the list only in certain contexts.
Classes - the Way to True Customization One final detail. The list that we've set up so far contains only "element" selectors to give them their proper name. You can also create what are called "class" selectors. These are elements which you name yourself; which don't exist in any HTML standard. This is where styles get interesting, in my opinion. For example, I routinely use a class which I set up like this... .body-blue { The period at the beginning of the name makes it a class, "body-blue" is a descriptive name, meaning that it is the same as the body element but features the color blue. Then the definition follows -- in this case, text styled as class="body-blue" will be colored blue. Go ahead and apply style descriptions to each of the elements in our list. You can check out the links at the bottom of this column for leads on what properties go with each element, but if you're familiar with HTML you'll probably catch on pretty quick. I considered doing this for you and letting you download the css file, but like all teachers say, what would you learn if I did the work for you? ;-) Most of the time you'll be applying text styles, by specifying fonts, size and so on. You'll also style the alignment of elements and a few other things. While you can use style sheets to specify the most fussy detail on your pages, doing so will be a lot of work, and will likely be frustrating because only a couple of browsers will be able to display everything the way you want. For fonts, you should start out with those that you know are available on the largest number of computers visiting your site. Like it or not, the web is mostly Windows centric, so you'll need to specify fonts that are usually found on Windows machines. Not very many of those fonts are also going to be on our Macs, so you'll specify similar ones for Mac. You should certainly specify fonts created specifically for viewing on low-res devices like our monitors. Then finally you specify a generic font of the desired type. You string all these together in a comma separated list -- surrounding multi-word font names with single or double quotes -- like this... font-family: 'Minion Web', Georgia, 'Times New Roman', Times, serif ; This tells the browser to try to find 'Minion Web', and if it can't, to look for the others in order, and if it can't find any of the named fonts, to rely on whatever is in its preferences for serif. In other words, your page should look fine if the user has the first choice or even the second, and will degrade gracefully back to the default setting. Graceful degradation is a Very Good Thing on the web. The list above is a good one for specifying serif fonts. Here's a good one for sans-serif... font-family: Verdana, Arial, Helvetica, 'Lucida Sans', sans-serif ; What about font sizes? Believe it or not, that subject can fill a whole column, and has, and will again. But I'll just tap dance lightly around it for now. I use 'em' as the unit of measure. 'Em' means, take whatever the user has set in their browser preferences as a default size and start there. All styles specified as 1em will be that size, whatever it is. It is often 16 point on Windows machines and 14 or even 12 point on Macs, but it can be anything at all. So a size specified in your style sheet as 1.2em will be 1.2 times the default, or 19.2 points if the default is 16, and 16.8 points if the default is 14, and so on. This has the great advantage of allowing the user to pick a comfortable-for-them base font size, after which your page works with that setting instead of trying to fight it for some misguided design purpose. In other words, the user controls their own viewing experience. This too is a Very Good Thing, though to be fair, you'll find others who don't agree. Em is a relative unit. The resulting size is relative to the containing element, usually the body tag, but it can be any containing tag. So if you specify P as 0.9em and A as 0.9 em and you have a link in a paragraph, the paragraph text will indeed be 0.9em in size but the link text (inside the A element) will be 0.9 of 0.9 or 0.81em in size - probably not the intended effect. Two other relative units are ex - the "x-height" of the font - and px or pixels. Beware the latter for it is device dependant. Font size specified in px may look fine on the web page but impossibly small when printed on a high-res printer. Font sizes can also be specified in absolute units: pt (point), in (inch), cm (centimeter), pc (pica) or mm (millimeter). I can't recommend the use of any of these for screen display because different operating systems and different monitor/video board combinations can have quite different logical pixels per inch, and therefore will display your text at quite different sizes. You can specify font sizes as percentages of the sizes specified for the containing element; and finally, you can use words such as smaller, larger for relative sizes or xx-small, x-small, small, medium, large, x-large, xx-large for absolute sizes.
Phew! That was only the quick dip version! I'll probably have more to say about styles next month too. It's an all-consuming passion at the moment as I struggle to make it work in as many buggy browsers as possible. In the meantime, if you surf with Internet Explorer 5 Mac or Windows, Netscape 6 Mac or Windows, or Opera's latest on Windows, you'll have a pretty good chance to see styles in action. With older versions of any of them, you won't have much luck. Happy surfing! Here are some helpful links: A List Apart - Fear of Style Sheets: www.alistapart.com/stories/fear/fear1.html
And if you're getting into style sheets in a big way and want to use an editor to make the job easier, have a look at... Style Master: www.westciv.com/style_master/
|
||||||||||||||||||||||||||||
|
 |
|||||||||||||||||||||||||||
