Manager's Guide to CSS

Cascading Style Sheets (CSS) are the 'new' way to make the page appear as you want it to. Before CSS, 'tricks' had to be played with HTML if you wanted absolute control over what was displayed to the user on the screen. And, even then, sometimes it just wouldn't come out exactly like you wanted. CSS offers to change all of that with absolute control over the visual representaion of your information.

Many HTML tags have certain display properties associated to them by default. CSS allows you to override those default properties and set your own. That's it in a nutshell. It may seem funny now big of a deal has been made over this until you've struggled for hours and still find yourself unable to get a page to look like you want with standard HTML controls. It happens more often than you'd think.

There are three basic ways to incorporate style sheets:

1) Inline with the text. Kinda like a 'fancy' HTML tag.

2) In the header of the document.

3) With an external document.

Inline styles require a lot of typing and I'm lazy, so I won't bother with that for right now. Including the styles in a header simply moves the location of the display properties. Neat idea to centrally locate the information, but it still doesn't save a lot of work for me. Finally, using an external style sheet allows all of your pages access to the same disply controls and you only have to write it once. Sounds like the lazy man's solution to me. Just what the doctor ordered.

From here, we could either create the document, then the style sheets or vice versa. They both have to be in place to work. I'll assume that, like me, you already have pages out there and you simply want to learn more about this 'CSS thing', so we'll make the extrnal CSS document first. If you need assistance in creating a HTML page, go see my tutorial series on that at The Manager's Guide to HTML.

Begin by creating a text file much like you did with your HTML files, only this time call it filename.css instead of filename.html. While we can control the display of existing tags, I pretty much am happy working within the constraints of standard HTML for that. I would much rather use CSS for what it does better than standard HTML, creating custom tags and saving me work.

In the process of documenting everything, I have created a series of web pages with step by step procedures. While I can create the output I want with stabndard HTML. the process has been quite tedious and has to be repeated for each page. I'm looking for an easier way.

To see what I'm aiming for as final output, look at the page done in standard HTML describing the procedure for when cron is down on a production server (Don't worry if this doesn't mean a thing to you, it wouldn't unless you are a UNIX weenie). The format is the important part. iThe header is fine with standard HTML as is the standard black text. I want commands to appear exactly as typed in red. I want the resulting display to be in blue text. Ideally, I would like that to also be in the same font as a terminal (courier), but that is not absolutely necessary. Because of the difficulty of doing that in standard HTML, I was willing to live without it. Now, with CSS, it's not much more difficult than settling for the default font. What I ireally objected to is that the command to make the red text appear is:

Wow, a lot of typing to get two characters to show up in red, huh? The same thing was required every time I wanedt the blue text to show up. With CSS, I can create my own tag called to represent a command to be typed and I'll create a text file named procs.css (procs is short for procedures). iThe entire file consists of the two lines:

cmd {color:red; font:"courier"}
dsply {color:blue font:"courier"}

About the same amount of work to do one line of each text style now does it for the entire document and all other such documents. Now I have to doctor the HTML document to take advantage of this. I'll copy the file cron_down.html into a new file cron_css.html. Now, the conversion process won't save me a lot of work since I'll essentially just be undoing the HTML I have already created. The work savings is realized with all future documents created like this. And, if I decide I don't like the output in the future, I can change all the documents by changing the one css file.

To link an external style sheet to a web page, in the <HEAD> section of the page, type in:

where filename.css is the name of the external CSS style sheet. If the style sheet is not in the same directory as the web page (or even on a different server!!) then the path to the file must be included.

Return to Manager's Guide to the Internet

This page has been visited

times.