Further Part:- Part-2



Part:2  Setting the Standards



There are three properties I set at the beginning of every style sheet; padding, margins and a base font-size.
My preferred method is to globally reset all margins and padding to zero and assign them to elements as needed. I prefer this over instances of margin:0;padding:0; all through my CSS and I have repeatedly found it to cut the development time required for CSS layouts.
For font sizing, I use the method of setting a base size for the body element and em for all other elements, starting at 1em for the content text. For more information regarding the issues relating to even font-scaling, take a look at this.

* {
    margin:0;
    padding:0;
}
body {font-size:90%;}
The reason the font-size property is not declared within the global ruleset is that it has undesirable affects in relation to nested elements — the deeper you go, the smaller they get!




Setting the standard - links



There is one part of styling links that many fail to remeber — hovering with a mouse is not the only method of focusing on a link. Many users, myself included, use the tab key to skip through links on a page. To accomodate these users, we add a visual cue to the :focus pseudo-class.
Once again, IE/PC comes to the party and leaves a horrid mess; in this instance the problem is that IE does not render the :focus pseudo-class, but it does treat :active as:focus
Here's our basic link styles, with the :focus and :active pseudo-classes added:

a {
 color:#4C53E0;
}
a:focus, a:hover, a:active {
 color:#EB8518;
}

If you have trouble remembering the order for these declarations; this lymeric is a great help:
Lord Vader's Former Handle, Aniken

0 comments:

Post a Comment