Make your life easier
Creating a web site which uses Cascading style sheets (CSS) is a lot easier to maintain than creating a web site without it. That is, if your familiar with most of the useful of the CSS properties.
For instance, lets pretend you attached a style sheet to all of your pages on your Web site, using either the @import rule, or the link HTML element.
Now, after you've finished deploying a HUGE web site which has several thousand pages, and its all static, your boss walks in, and he says You know, the client doesn't like that color scheme... we need to try something else.
Do you throw up your hands and quit the job? -- No way! CSS allows you to make changes to of your pages color, padding, margins, alignment, background images, font size and families, positioning, floating, etc. all from one single CSS file. All you need to do is open up that one single file, make an edit, and re-upload it. Boom - your done.
Comments (0) | 
Sep 11, 2009
Code it cleaner, and better
Lets pretend that you have a web page, which has a really huge data table inside of it. And all text within the table is green. It has 30 rows, 3 columns, its huge! (In this example we will only use 10 rows.)
You want all of the data to be aligned to the center of each cell. And none of the text should wrap. Ordinarily, this is the code a person would use to do that.
| Food | Drinks | Payment |
| Food | Drinks | Payment |
| Food | Drinks | Payment |
| Food | Drinks | Payment |
| Food | Drinks | Payment |
| Food | Drinks | Payment |
| Food | Drinks | Payment |
| Food | Drinks | Payment |
| Food | Drinks | Payment |
| Food | Drinks | Payment |
Tables have to be completely downloaded before they can be rendered by the client machine. If your design and content is inside of tables, then your whole webpage will need to be downloaded before it can be rendered, leaving your visitors waiting for no reason at all.
Read More... |
Comments (0) | Sep 11, 2009
Conditional Selectors
According to the W3C spec, CSS is supposed to obey laws of specificity. If one selector is more specific than another, it will get selected before the lesser specific ones. Or, if one rule has a higher precedence than another, it'll get selected instead of another with lower precedence (or importance).
This is how one style rule may work on one page and not another, based upon the condition, or position that is element is at in code. For example...
Lets say we wanted to have all of our h1 elements to look bold, and be in the Verdana font, here is the CSS code we would use to do that:
h1 {
font-family: Verdana;
font-weight: bold;
}
Read More... |
Comments (0) | Jun 21, 2009
The attr(x) function
Plenty of web sites refer to this example when describing what the attr(x) function does. In general, it justs pulls the attribute value out of an element, and returns it as a string. A string that can be used, however you please.
@media print {
a::after {
content: attr(href);
}
}
Sure, I'll admit - showing users what the URL of a link was, AFTER the page has been printed, can be quite useful. Like this, for example:
This is my linkhttp://www.google.com/
Although, it doesn't look all that good crammed up against the right side of a link. And what if we have "back to top" (section anchored) links throughout the page? In this case it would be useless to the user to see "#top" as the URL, to remedy this, we can do a couple things.
Read More... |
Comments (0) | Jun 21, 2009
