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%;
}
Get Organized
The more organized your CSS, the more organized you will be. When you start your CSS it will be easy to navigate between all of your styles because you will not have many, but pretty soon your unorganized CSS will become too unwieldy and it will be time consuming trying to find everything especially if you cannot remember what you named it and/or start using more detailed specificity . Include comments for all the major sections.
The Order
To stay organized try to place the element styles in the order that they appear on the page. Start with the body and work your way down. If by mistake you give the same selector conflicting properties the styles that are place lower down on the style sheet will be the ones that are used by the browser.
Body
Choose a font size of at least 16px for the body, and use ems for the rest of the font sizes. With higher and higher screen resolutions 16px might even be too small.
/* ---------BODY--——-*/
body{
font-family: names and generic;
font-size: 16px;
line-height: 120%;
background-color: #fff;
}
Headings and Lists
Set-up at least h1 - h3
/* ---------HEADINGS--——-*/
h1{
font-size: 1.3em;
}
h2{
font-size: 1.2em;
}
h3{
font-size: 1.1em;
}
/* ----------LISTS---——-*/
ul li, ol li {
list-style-image: url(bullet.png);
list-style-position: outside;
}
Main Content Elements
Next the wrapper (main container) and continue down the page with the different elements
/* ----------CONTENT---——-*/
#wrapper{
}
header{
}
nav{
}
section{
}
aside{
}
footer{
}
Links
First I set the outline to 0 so that a dotted line does not show when the user hovers over the linked area. I normally set-up two sets of links one for the main menu, and the other links that appear within the main content. For the content links I get rid of the underline but add a border so that the border color is different from the text and can change with the hover.The same declaration will appIy to the main navigation but I do not want the border for the nav so I get rid of it in another rule.
/* ----------LINKS---——-*/
a:focus {
outline: 0;
}
a:link {
text-decoration: none;
color: #963351;
border-bottom-color: #5a606b;
border-bottom-width: 1px;
border-bottom-style: solid;
}
a:visited {
text-decoration: none;
color: #963351;
border-bottom-color: #5a606b;
border-bottom-width: 1px;
border-bottom-style: solid;
}
a:hover {
text-decoration: none;
color: #5a606b;
border-bottom-color: #963351;
border-bottom-width: 1px;
border-bottom-style: solid;
}
nav a{
border-bottom-width: 0px;
}
Floats and Clear
I add a left and right float which is easy to add as a class to any element. I add a Clear, so its there when I need it.
.left{
float: left;
.right{
float: left;
.clearFloat{ clear: both; }
Once you get started on a page there will probably be a lot more styles to add but this is a good start and with just a few minor changes can be used for any site.