CSS. We leave to a new level

If you have recently begun to engage in layout of html-pages and want to learn how to do it better this article is for you, besides, it will be suitable for those who have been imposing a long time ago, unfortunately many people incorrectly compile their style sheets.
Here are a few highlights of writing CSS.

1. Any browser has default values ​​for style properties, for example, padding and margin. If we don’t want our site to look different in different browsers (few people want), we need to reset these values. To do this, it is enough to enter this code in the beginning of our style file.

html , body , div , span , applet , object , iframe ,
h1 , h2 , h3 , h4 , h5 , h6 , p , blockquote , pre ,
a , abbr , acronym , address , big , cite , code ,
del , dfn , em , font , img , ins , kbd , q , s , samp ,
small , strike , strong , sub , sup , tt , var ,
b , u , i , center ,
dl , dt , dd , ol , ul , li ,
fieldset , form , label , legend ,
table , caption , tbody , tfoot , thead , tr , th , td {
margin : 0 ;
padding : 0 ;
border : 0 ;
outline : 0 ;
font-size : 100 % ;
vertical-align : baseline ;
background : transparent ;
}
body {
line-height : 1 ;
}
ol , ul {
list-style : none ;
}
blockquote , q {
quotes : none ;
}
blockquote : before , blockquote : after ,
q : before , q : after {
content : '' ;
content : none ;
}

/ * remember to define focus styles! * /
: focus {
outline : 0 ;
}
')
/ * remember to highlight inserts somehow! * /
ins {
text-decoration : none ;
}
del {
text-decoration : line-through ;
}

/ * tables still need 'cellspacing = "0"' in the markup * /
table {
border-collapse : collapse ;
border-spacing : 0 ;
}

This is css-library code reset styles Reset.css . Please note that after its insertion, it is desirable to get rid of those selectors that will not be applied.

2. Make out the styles correctly. Remember that well-written, readable code will justify itself in the future, I am sure you will have to return to it more than once, it is much easier to understand well-written code, we are talking about spaces, hyphens, new lines ... There are two styles of writing CSS, the first

#contact_left {
float : left ;
color : # 4d0c1a ;
padding-top : 20px ;
}

- each new property is written on a new line, usually it is new, some consider it more visual, this method increases the size of the css-file, the second

div .content { color : # 999 ; font-size : 1.5em ; padding : 30px 0 ; }
div .content .name { font-size : 2em ; color : # 555 ; }
div .content .value { font-size : 1.7em ; color : # 555 ; }

- all properties are written on one line, separated by spaces, the main advantage of this method is that you can write styles in a hierarchical order, which to some extent makes life easier for the developer

What style to choose - you decide!

3. Use inheritance where possible. It is very easy and convenient! Define a property once for the parent of the element (the one that is above) and you will no longer need to set it every time for each descendant, if necessary later you can redefine it.
For example, to determine the size and font name for the entire page, specify it for BODY

body {
background : # 855a23 url ( ../image/bg.gif ) repeat-y scroll center top ;
color : # 000 ;
font-family : arial , helvetica , sans-serif ;
font-size : 11px ;
}

For all inherited page elements there will be an 11px font.
If for a particular paragraph you need to use a larger font, just set it to it, thereby overriding the initial value. It is important to remember that the values ​​specified as percentages are not inherited!

The original article is presented in my blog maxmoriss.ru

UPD This is my first article on Habré, do not judge strictly!