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