join: new@juude

get alerts for new articles


join: new@juude

get alerts for new articles

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.


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.


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%;