join: new@juude



get alerts for new articles






CLOSE WINDOW

join: new@juude



get alerts for new articles






CLOSE WINDOW
css: casscading style sheets

CSS Basics w3c


intro | media-types | reset/setup
RULES:  css | cascading | @rules
SELECTORS: selectors | properties/values

Getting Started


You will find that you will want to reset the properties of certain elements for every web site that you design. Its probably easier to create a separate CSS for these elements and import the styles into your main style sheet. At the top of your main style sheet put this information:
@import "reSet.css";
Do not import from too many style sheets because it can slow your load time.

Fonts


Now that we have @fonts you might want to also add the font information and license to this other style sheet. Your font vender will supply this information.

Reset


First you need to reset some defaults ( the reset was first created by Eric Meyer and he lists more elements on his site ). It will help you to avoid layout rendering inconsistencies among browsers. You need to set your margins, padding, and borders to 0px.

/* ——---———RESET——-———-*/

html, body, section,header, footer, div, span, aside, article, main, figure, h1, h2, h3, h4, h5, h6, hgroup, p, blockquote, a, img, dl, dt, dd, ol, ul, li,
form,table, tr, th, td
{
margin: 0;
padding: 0;
border: 0;
}

Adjust for html5


Next set-up html5 elements to display:block; for older browsers. Add other elements as needed.

/* ----------ADJUST FOR html5---——-*/
header, section, article, aside, nav, footer, figure, hgroup, main{
display: block;
}

Add other Element Changes


that you consistently use

/* ----------ADJUST HEADINGS--——-*/
h1, h2, h3, h4, h5, h6,{
font-weight: normal;
}

/* ----------ADJUST HEIGHTS--——-*/
html, body{
height: 100%;
}