Setting-Up Your CSS

Getting Organized

First decide how to write the CSS. Some web designers prefer to write their CSS in a straight line. I find it easier to read if I write it as a list. Either way is fine, whichever works best for you. But be consistent.

Include comments for all the major sections. Comments are shown above the reset Css. You will not need the dotted line that I have included but this helps to highlight the sections.

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.

Reset

First you need to reset some defaults. This will help you to avoid the inconsistencies among browsers. You need to set your margins, padding, and borders to 0px.

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

html, body, div, span, object,
h1, h2, h3, h4, h5, h6, p, blockquote,
a, img, dl, dt, dd, ol, ul, li,
form,table, tr, th, td
{
margin: 0;
padding: 0;
border: 0;
}
A complete list is at the bottom of this page

Next you can set-up the default styles for your list.

ul li, ol li {
list-style: none;
list-style-position: outside;
}
ol ol, ul ul, ol ul, ul ol
{
margin-left: 15px;
margin-bottom: 0;
}

Next take out the dotted line that appears when the user rolls over a link.
Submitted by Patrick Cole www.patrickcole.com

a:focus {
outline: 0;
}

The Height

For heights using a percentage, place the following at the top of your css. You may not find it necessary to include this.
html, body {
height: 100%;
}

The Body

You need to begin by setting up the styles for the body. Decide on the font styles, which you will use for the majority of your content and place them in the selector for the body tag. You might want to use either the percentage or em for the font size.
body{
font-family: Arial, Helvetica, sans serif;
font-size: .9em;
font-weight: normal;
color: #333;
background: #fff;
line-height: 110%;
text-algn: left;
}

Customize Headers

You need to have headers for 508.

You can customize your headers and give them different styles. A lot of designers try to avoid using the header tags because of the large gap that appears between the text with the header tags and the next line of text.

On this page the main page title has the header tag “h1″ and the subtitles all have “h2″ . The size for both have been changed and for the subtitles the margin bottom has a negative number this gets rid of the large gap. Both have been given a color so that they there is a contrast between the titles and the content in addition to the size.

h1{
font-size: 18px;
color: #680;
}
h2{
font-size: 16px;
color: #680;
margin-bottom: -3px;
}

You can also change the header tag from a block which it is by default to an inline. Now the header can appear on the same line as the rest of the text.

h1{
display:inline;
}

Styles on Linked Text

You need to set-up the styles for the linked text that will appear within the content. Content linked text should always be underlined but the visited should be a different color so that the user knows that they have already activated that link. And you can add a hover if you want. There is also “active” but this only shows for a split second and I never feel the need to include it. It is also interesting if the underline changes color along with the text when the user rolls over the link and it is a different color than the text. It is not possible to have it a different color than the text unless you remove the underline and replace it with a border. The style for the underline is text decoration.

For the links on the menu it will probably work better for your design if they are not underlined and the “link” and the “visited” are the same color. Create a different set of links for the menu and give them a class.

a:link{
font family: Trebuchet MS, Helvetica, Arial, Geneva, sans-serif;
font-size: 14px;
color: #f60;
text-decoration: none;
border-bottom-style: solid;
border-bottom-color:#690;
border-bottom-width:1px;
}
a:visited {
font family: Trebuchet MS, Helvetica, Arial, Geneva, sans-serif;
font-size: 14px;
color: #f60;
text-decoration: none;
border-bottom-style: solid;
border-bottom-color:#690;
border-bottom-width:1px;
}
a:hover {
font-family: Trebuchet MS, Helvetica, Arial, Geneva, sans-serif;
font-size: 14px;
color: ##690;
text-decoration: none;
border-bottom-style: solid;
border-bottom-color:#f60;
border-bottom-width:1px;
}

When you have two sets of styles for links on a page you need to create a class for one of the styles.

a.name:link{
font family: Trebuchet MS, Helvetica, Arial, Geneva, sans-serif;
font-size: 14px;
color: #f60;
text-decoration: none;
border-bottom-style: solid;
border-bottom-color:#690;
border-bottom-width:1px;
}

Place the class in the link <a href ="page.htm" class="name">PAGE</a>

Images

You can set-up the css so that your images can float either left or right. You can include margins and a border for the image. Below is the Css for an image on the left. You should also set one up for float right.

Have the selector be a class and then you can use it over and over again throughout the page. The margin at the bottom should be less than the one on the side (right in this case) because you need to allow for sentences wrapping around the image. Most of the time it is better to have a border on an image that is just a little darker than the page background this will make the image pop without the border being really noticeable.

.left{
float: left;
margin-right: 12px;
margin-bottom: 8px;
border-style: solid;
border-color:#ccc;
border-width:1px;

The Order

Although your styles will be applied to the web page regardless of their order in the CSS it will help you to stay organized if you try to place the styles in the order that they will appear in the browser. For instance if you have a global that controls the movement of a Jello Design then place that first, next the banner, menu, wrapper for content etc.

#global{
}

#banner{
}

#menu{
}
#wrapper{
}

Below is the rest of the information for the reset.

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, 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-weight:
inherit; font-style:
inherit;
font-size: 100%;
font-family:
inherit;
vertical-align: baseline;

}

Let us know if I have left anything out or if you have any ideas that will help to improve how we set-up the CSS. –juude