Archive for the ‘CSS’ Category

Wow. I jumped up and down when I found out that CSS 3 is offering a “border-radius” property. No more having to use images or wacky CSS code. Check out the good news here.

In my quest to fine tune my CSS skills, Silvia Muller my ITI & Learning professor, lent me a book entitled CSS Web Site Design by Eric Meyer. I believe I have a good grasp of CSS already, but I know there are tiny facts I don’t know. The first major fact I encountered involves using style sheets. Meyer states there is “one difference between linking and importing [which] is that you can link only from an XHTML document, whereas any style sheet can have one or more @import directives” (Page 57). This is important to note, because there are several ways in which a website can be structured. The first way to structure a site is to have all pages use one single style sheet. A second way is to have one base style sheet have other secondary sheets (for specific types of pages, i.e. products, support, etc.) link to it, which is called using “sectional styles.” A third way called “modularizing styles” is to have separate style sheets for various parts of the site, such as the footer, header, content, etc, with an overall main style sheet for elements that each part of the site has in common.

Another thing I didn’t know about is the use of “ems” as a measurement and its differences between “pixels” (Page 120). Meyer suggests using ems over pixels because they scale to the parent font size and that 1em is equal to the font size of the element.

A third thing I didn’t know is a type of short hand that can be used for the font property. Just as the background property can also contain information about background-repetition, such as: background: url(’images/dog.gif’) no-repeat, the font property can also be used with short hand. In the following example, the font weight, font face, font size, line height, and font family are all combined into one statement:

#content p {
font: bold italic smaller/1.5 Arial, sans-serif;
}

This example is taken from Meyer’s book on Page 225.

Meyer also has a section on choosing font families based on browser capabilities and what to watch out for (Starting on page 196).

Another thing that interests me is his mention of using padding to position elements side by side (also called “fixing column drop”). That instead of trying to position two divs next to each other using float left, one can float the left div left and the right div right. By expanding the left div’s padding outward to the right, and assigning a negative margin to the right div, you can trick the CSS algorithm’s to place the two divs side-by-side. And when the browser’s width is decreased, the two divs will continue to remain next to each other. To read a detailed explanation of this process, see page 137.

The above information are the most notable I have read so far. I’m currently up to chapter 7, so I still have some more reading to do.