ChristopherRobbins PhpWiki - Web Class Style Chapter

Style - CSS

Let's say you are the coach of a rugby team, and the team has to wear different colored tops depending on which team they are playing. Today, your team needs to wear orange jerseys. How do you tell them which color to wear? Do you pull aside each player individually and instruct them to wear an orange jersey, or do you get all their attention, and just once, tell them all they need to wear orange jerseys?

External CSS files tell the whole team what they have to wear at once. Telling each player idividually is how the deprecated <font> tag worked, and how inline CSS works today. Rarely if ever is it advantageous to repeat your instructions 7 times when you can do it just once, so we will focus on external stylesheets, and how to make them as efficient and powerful as possible.

Cascading Style Sheets (CSS) are used to define the style of a document: color, size and position. Let's say we want all of our headlines to be big and orange. Rather than mark every single headline with code that makes it big and orange, we can can define a style for headlines once in the CSS, and then all we need to do is tell the document where to apply that style.

External style sheets are defined in a separate (external) file. Many different XHTML documents can then be made to refer to this one style sheet, so that if we need to change that orange headline to red, we do it once in the external style sheet, and the XHTML's style will be updated accordingly.

The syntax is different than XHTML, and defining styles works a lot like how we would define words. First, you name the term (here called the selector), and then define what that term means (or what attributes make up that selector):

selector {

attribute: value; attribute2: value2; attribute3: value3;

}

So, we could make all of the first-level headings <h1> big orange headings like this:

h1 {

font-family: Georgia; color: orange; font-size: 25px; background-color: white;

}

We have defined the <h1> selector to be 25px Georgia type in orange color.

By defining all of XHTML's built-in selectors - <h1>, <h2>, <h3>, etc., <li>, <ul>, etc... - we can customise the XHTML we were writing in the previous chapter to look however we want.

But sometimes a built-in selector won't be enough. Remember how we organized information using <span> and <div> in the previous chapter?

<span class="smalltext">...</span>

</div>

<span class="smalltext">...</span>

</div>

With CSS, we can specify where these sections go and what they look like. We could make the header big and orange, the menu small and blue, and the body text medium sized and black. We can also use the CSS to tell the XHTML where to go on the page, positioning the header at the top, the menu along the left, and the body down the middle. We talked about the difference between <span> (inline) and <div> (blocklevel), and the difference between id and class in XHTML. As far as CSS markup is concerned, there is no difference between <span> and <div>, meaning that we define a style used in either in the same way. However, the difference in defining class and id is that id must be preceded by a "#", and classs by a ".".

So, in the above XHTML, header is defined as an id. This means we would need to define it with a "#":

|#header {

font-family: Georgia, serif; color: orange; font-size: 25px; background-color: white;

}

Whereas smalltext, a class, is defined with a preceding ".":

.smalltext {

font-family: arial, sans-serif; color: black; font-size: 9px; background-color: white;

}

The spacing is unimportant. In fact, we could do it all in one line:

|#header {font-family: Georgia, serif; color: orange; font-size: 25px; background-color: white;} .smalltext {font-family: arial, sans-serif; color: black; font-size: 9px; background-color: white;}

but it's usually easier to read and adjust broken up into separate lines.

Now that you understand the basics of CSS syntac, let's get into the details.

The attributes you'll adjust most often are font-family, size, color, background-color, and line-height.

font-family

Since different computers have different fonts, there is only a handful of fonts we can rely on with the web. These are: times, times new roman, georgia, arial, verdana, helvetica, monaco and courier. On the web, fonts are divided into three categories: serif, sans-serif, and monospace. Serif means 'foot' so a serif font is a font that looks like it has feet, those little extra squiggles at the edges of the letters. Times, times new roman and georgia are the major serif fonts we have available for use on the web.

Sans-serif means literally, "without feet," so sans-serif fonts are unadorned fonts, like Helvetica, Verdana and Arial.

Monospace are fonts whose spacing is equalized so that every letter takes up the same amount of space. For instace, in a serif or sans-serif, the letter "w" will take up a wider area than the letter "i." Not so with monospace: "i" is given so much space to the left and right that it ends up taking just as much space as the more tightly-packed "w." Courier and monaco are the monospace fonts we tend to rely on for web-work.

If you absolutely have to use a font not in this very basic set, you could specify that font, but be sure to also specify a few alternates, always ending with the generic category of the font to ensure something resembling your intentions is displayed.

For instance:

body { font-family: Garamond, Georgia, Serif; }

would specify Garamond as the default font for the document. If the user's computer does not have Garamnond, then text would be rendered in Gerogia. And if they didn't even have Georgia, then it would be displayed in the computer's default serif font.

We can define a lot more than just the font with CSS. Let's flesh this out a bit:

body { margin: 0px; padding: 10px; font-family: Garamond, Georgia, Serif; font-size: 12px; line-height: 15px; letter-spacing: .3em; color: #33333; background-color: #ccccc; }

Margin vs. Padding

Margin and padding both add space around elements. The difference is that margin adds space outside of the element, while padding adds the space within the element. If we think of a person's muscle as the content, then the amount of fat would be the padding, and the space between that person and anyone else would be the margin.

|||||||MARGIN/PADDING ILLUSRTRATION ||||||

In this case, we have set the margin to 0px, and the padding to 10px. "px" stands for pixel, so this will give a 10 pixel space around the edges of the document. Since margin is zero, the actual body element reaches to the edge of the browser window. However, text or image put within the element will have 10 pixels of space around it.

|||||||MARGIN/PADDING ILLUSRTRATION 2 ||||||

Pixels, points, percentage and ems

||||||EM PIXEL POINT PERCENTAGE ILLUSTRATION ||||

Every other attribute we have specified above are rather self-explantory: font-size specifies the size of the font, line-height sets the amount of space between each line of text, letter-spacing sets the space between each letter. However, what might not make sense are the units we are using: px, pt, and em. As we mentioned earlier, px stands for pixels, and this is the most consistent way of specifying size. The drawback to using pixels for size is that some browsers will lose their ability to scale text when it has been set in pixels.

Points are another option. They are more flexible than pixels, and so will scale with any browser than hasd that capability, but because they are so flexible their appearance can vary greatly between different browsers.

On the surface, percentage seems to be the most useful unit, since it is based on the size the user has selected as his or her own default. By setting <h1> to be 150%, and body text as 100%, in theory we would always have text set to a size the user can read. If we were to set body text as 12px, then regardless of the user's preferences, our text would be 12 pixels. The problem with % is that it is rendered the least consistently of all the units.

An em is a typographical unit equal to the width of the letter "m." What's so useful about ems are that they will scale along with the text. By setting the letter-spacing to be .3em, we are asking for approximately one third of the width of a letter m at 12px to be inserted between the letters. If we decided to scale the font to 15px, the em would increase proportionally, so we can always be assured of an appropriate space.

As you can see, there are many options for units, and it can all get a bit confusing. So, create a codument that mixes all of the different units, and test it on as many browsers as you can find. This will give you a good feel for the sacrifices you make with each decision. And in general, a safe bet is to use the units as I have above: pixels for font-size and line-height, and ems for letter-spacing.

COLORS

|||RGB HEXADECIMAL ILLUSTRATION ||||

The attributes color and background-color probably make perfect sense to you, but the value that follows — a hodgepodge of number sand letters, is probably a bit confusing.

Those letters and numbers are a way of specifying color to the computer called Hexadecimal. As you may or may not know, colors on screens are made of three colors of light: red, green and blue. By telling the computer to mix different amounts of red, green and blue, we can make almost any color we want! On the web, these amounts are broken into 3 pairs of letters and numbers, for 6 in total. The first 2 are for red, the second 2 are for green, and the last 2 are for blue.

The scale goes from 0 to 9, and then A to F. The higher the number or letter, the brighter the color.

FF = 100% brightness EE = 93% brightness DD = 87% brightness CC = 80% brightness BB = 73% brightness AA = 67% brightness 99 = 60% brightness 88 = 53% brightness 77 = 47% brightness 66 = 40% brightness 55 = 33% brightness 44 = 27% brightness 33 = 20% brightness 22 = 13% brightness 11 = 7% brightness 00 = 0% brightness

When the colors are all at the same brightness, then they make grey.

For instance, in our example we have:

color: #33333; background-color: #ccccc;

33 is 20%. So since all the values are the same, that means we will have a 20% brightness red, green, and blue, which together mix to create a rather dark grey of only 20% brightness. We have set the background color to be all c's, which is 80& brightness, a much lighter grey for the background. Test it and see how it works!

Pure white would be 100% brightness of all the colors, or #ffffff, and pure black would be 0% brigthness of all the colors, or #000000. The brightest red would be #ff0000. What would the brightest green be?

Take some time to adjust the different color-values and watch how it affects the color. And be sure to check out http://www.visibone.com/colorlab/ , who have done some wonderful work in organizing and examining the hexadecimal color pallette. e-pixs color lab is also a very helpful page at http://www.e-pixs.com/colors2.html.

Now, just as font-size changes on different platforms and browsers, so does color. There are 216 "web-safe' colors that are guaranteed to display on all mac and pc browsers for any color monitor. Those are all colors that use only pairs of 00, 33, 66, 99, ff, and cc. If you specify any other color, there is a chance it will come out as a completely different color, or as a mixture of some other colors on older monitors. As always, weight your risks and know your audience when you make these sorts of decisions.

Positioning: absolute and relative

So far we've covered the basics of display, size, color, font, etc. But CSS can also control position: where the elements appear on the screen. There are two ways of specifying positioning: absolute and relative. Absolute positioning sets exact coordinates that determine where the element will sit on the screen, regardless of what is around, under or over it. Relative positioning puts an element on the screen in relation to the position of the others.

to make the distinction clearer, lets go back to the rubgy team, pretending that each rugby player is an element on the screen. I tell one of my players to run to 30 meters from the west end of the field, and 30 meters from the opponents goal. That is absolute positioning. No matter what is going on in the field, he will be at that exact point. Now, I tell another player to stay 20 meters south of his opponent. If the opponent moves, he moves. That is relative positioning.

||||| RUGBY ABSOLUTE RELATUIVE POSITIONING ILLUSTRATION |||

Let's create a style for a menu bar that sits along the right-hand side of the screen, using absolute positioning.

.menu { position: absolute; top: 10px; right: 10px; padding: 10px; margin: 0px; width: 150px; background-color: #333333; color: #fff; }

|||||DIAGRAM OF MENU WITH ABSOLUTE POSITIONING ||||||

We could do the same thing with relative-positioning:

.menu { position: relative; float: right; margin-top: 0px; margin-right: 0px; padding: 10px; width: 150px; background-color: #333333; color: #fff; }

|||||DIAGRAM OF MENU WITH RELATIVE POSITIONING ||||||

Notice than rather than specify the absolute position from the top and right, we tell it to float in relation to the right of the screen, and use margin to place it. In this case, we should get the exact same results from these two different methods. But when we start adding other elements onto the screen, the differences between absolute and relative positioning start to become apparent.

Let's bring a title bar into this.

With absolute positioning:

.titlebar { position: absolute; top: 0px; left: 0px; padding: 10px; margin: 0px; width: 100%; height: 100px; background-color: #ff0000; color: #fff; }

|||||DIAGRAM OF TITLEBAR + MENU WITH ABSOLUTE POSITIONING (OVERLAP!!!!!) ||||||

Oops, these too are bumping into each other. Since both are positioned absolutely, they stubbnornly sit where you told them, regardless of who gets in their way.

With relative positioning, they will adjust to each other's positions:

.titlebar { position: relative; margin: 0px; padding: 10px; width: 100%; height: 150px; background-color: #ff0000; color: #fff; }

|||||DIAGRAM OF TITLEBAR + MENU WITH RELATIVE POSITIONING ||||||

As you can see, we are using both % and pixels fort positioning, just as we did for font-size. Note that while setting width can and horizontal positioning with percentages can often create a very flexible site, % of height is still not widely supported.

Z-INDEX

We've looked at how to avoid overlap of elements, but sometimes you want elements to overlap. And when you do overlap, you want to specify how they overlap - that is which elements are on top and which are under. We do this with what is called the z-index. The higher the z-index, the closer to the "surface" of the screen. The lower the z-index, the more buried the element becomes.

|||||||DiaGRAM OF Z INDEX |||||

Alternate and imported Style Sheets

We've talked about how to code XHTML, and how to code CSS. Now we will talk about several methods for linking the two.

You can put CSS in one three places:

In the head: these are known as internal or embedded style sheets

<head> <style type="text/css" media="all"> (insert styles here) </style>

</head>

In the body: these are known as inline style sheets

<span style="...">(insert styles here)</span>

In an external document: these are known as external style sheets

This links to an external document that contains all of the styles. this is by far the most useful method, as many different XHTML documents can refer to this one style sheet. Should you wish to alter the style of the site, you only need alter this one document and every section will update.

Another benefit of external style sheets is that you can then apply multiple styles to the same XHTML. You could create one with big type and high contrast for people who need glasses, another with several subtle greys for the trendy designers, and the latest browsers can switch between these styles.

Media

We can also specify style sheets for different media. Perhaps one for screen, and a different one for printing that gets rid of extraneous elements and ensures it will fit on a normal sized piece of paper.

Now, if someone prints the document, the browser will automatically apply the special style sheet you have developed for printing. For best results in print, use black on white, leave a wider margin around the page, and keep the text about 400px wide.

import

Another way to introduce an external style sheet is to import it. Since many older browsers do not reckognise @import, this is a wonderful method for adding styles not supported by older browsers without sabotaging the old browser exerience.

As you can see, by separating the style into separate documents from the XHTML, you can create an incredibly flexible site with all the whizbang the latest browsers can handle, yet able ti simplify itself so that it coesn't choke the older browsers.