CSS We go to a new level

    If you have recently started to make HTML html pages and want to learn how to do it better this article is for you, in addition, it is suitable for those who have been typesetting for a long time, unfortunately many people incorrectly compose their style sheets.
    Here are some key points to write CSS correctly.

    1. Any browser has default style property values, for example, for padding and margin. If we don’t want our site to look different in different browsers (few people want it), we need to reset these values. To do this, just enter this code at the top of our stylesheet

    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 the Reset.css stylesheet css library code . Please note that after inserting it, it is advisable to get rid of those selectors that will not be applied.

    2. Make styles right. Remember that a well-written human-readable code will justify itself in the future, I’m sure you will have to come back to it more than once, it’s much easier to understand correctly-composed code, we are talking about spaces, hyphenation, 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, it is usually 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; }
     

    - we write all the properties on one line, separating them with 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

    which style to choose - you decide!

    3. Use inheritance where possible. It is very simple and convenient! Define the property once at the parent of the element (the one located above) and you will no longer need to set it each time for each descendant, if you need to later you can redefine it.
    For example, to determine the size and name of the font for the entire page, set it to 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 elements of the page there will be a font of 11px size.
    If you need to use a larger font for a separate paragraph, just set it, thereby overriding the initial value. It is important to remember that the values ​​specified as percentage values ​​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!

    Also popular now: