Some Useful Information for CSS

What is CSS?

Check out CSSzengraden and see how one page can be transformed using CSS. links are on right. There is also a link to view the CSS. The page has a link to good CSS resources as well.

By designing a single CSS page you can control the layout and look of your entire site. CSS is easy to modify and update and meets accessibility standards. It's also cool.

Linking to an external CSS page from your HTML page:

insert this line of code into the head of your html head. Change "mystyle.css" to reflect the name of your stylesheet.

<link rel= "stylesheet" type="text/css" href="mystyle.css" media="all" >

Creating Styled Links in your CSS page

The attributes are my own and serve only as an example. You would insert your own attributes.

a:link, a:visited {
color: #493f5f;
text-decoration:none;
}

a:hover {
color: #493f5f;
text-decoration:none;
}

Creating a .class to define an area to define in your html page. (use when you will use more than once)

Around the area within your html page include:

<div class="name">

Stuff you want to define, like a block of text or media element.

</div>

Then in your CSS page include, for example..

.name{font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
padding-right: 25px;
padding-left: 25px;
text-indent: 3em;

}

For Unique elements use the ID

In your HTML page:

<div id="name">your content here</div>

In your CSS page:

#name {
width:772px;
height:179px;
background:url(top.jpg);
}

Adding comments so you know what you did:

/* -------Tags above Classes Below this line---------------- */

inserting an image: adjust id and image path as necessary for you.

body {
background-image: url(../images/diagonal.gif);
}

Multi column layouts, thumbnail lists etc

Try using float: left or right as an id attribute.
My porfolio main page uses float left for the thumbnails to get them left of my text.

I recommend these tutuorials on various uses of float: http://css.maxdesign.com.au/floatutorial/index.htm

•Helpful CSS Links are available on my links page