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:focusHere'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