Home
Delicious
Digg
Facebook
Reddit
Stumble Upon
Technorati
Mixx
Sphinn
Twitter
SphereIt
Propeller
Gmarks
Newsvine
Yahoo! My Web
Live Journal
Blinklist
E-mailIntroduction
Part 1
It’s finally time for my Part 2 of the 3 Part CSS Series. We are one step removed from knowing the basics of CSS. In this part I will be giving you a dummy version, and some integration again. I’ll do my best to keep it simple and easy read.
Dummy Application
First I will begin by starting with a dummy application and move on from there.
{
margin: 0px;
padding: 0px;
}
a:link
{
color: #73A462;
}
a:hover
{
text-decoration: none;
color: #FF0000;
}
a:visited
{
color: #FF0022;
}
#Main
{
float: center;
font: 13px Arial, Helvetica, sans-serif;
background: #ffffff url(images/white.gif);
width: 811px;
min-height: 900px;
margin: 0 auto;
}
Alright, that is some pretty complicated code for beginners. Note, you might break this up to make editing simpler but for this exercise I’m keeping it all together so we aren’t all over the place. We will begin with the margin and padding.
{
margin: 0px;
padding: 0px;
}
The Margin and Padding are applied to the whole document stating that there won’t be any margin width or padding between tables, or items unless specified otherwise.
a:link
{
color: #73A462;
}
a:hover
{
text-decoration: none;
color: #FF0000;
}
a:visited
{
color: #FF0022;
}
a:link, a:hover, and a:visted are all colors your links will be when hovering over the link, after you click the link and before you click the link. I have specified separate colors for each so the colors will change when you apply an action such as clicking them. Also please note that the number symbols are absent from the applications. This is because we won’t be referencing them anywhere in our HTML document and thus won’t be applying them other than to the whole document by default.
#Main
{
float: center;
font: 13px Arial, Helvetica, sans-serif;
background: #ffffff url(images/white.gif);
width: 811px;
min-height: 900px;
margin: 0 auto;
}
Now note this section does have a number symbol by it. This is because we are going to reference it in our HTML document. I will show a real time use for this later. Now let us move onto the content between the brackets. I’m going to split this up into a list rather than in paragraph form.
Float - this is just floating all the content within the id to the center of your website
font - this is just telling what font type, size, or color it will be
background - just color of your background of this specific area
width - width, size, of this area
min-height - the minimum height that this area will be. It won’t go below this number
margin - Just margin between areas on the side or bottom.
px - pixels, size of measurement
Now that I’ve explained their use, there is no other way to show you other than go and make a website and show you the changes they make after each one is applied. Honestly, I don’t want to post 30 some pictures. It slows down, and makes it annoying to read. If you want to test it yourself, just make a simple HTML page and apply what I’ve taught you so far and it should be pretty easy. Don’t forget this next part either.
Integration Part 2
<html>
<head>
<title>First Webpage</title>
<link href=”style.css” rel=”stylesheet” type=”text/css” media=”screen” />
</head>
<body>Here is my first webpage.
<div id=”header”>
<div id=”navigation”>
<a href=”home.htm”>Home</a>
<a href=”about.htm”>About Us</a>
<a href=”http://www.sampleforums.com”>Forums</a>
<a href=”contact.htm”>Contact</a>
</div>
<div id=”mainback”>
<div id=”main”>
<h1>Site Update!</h1>
<p>Hey loyal users! We have just updated our site and would like to let everyone know we just added some awesome new features that we would like you all to know about. Here are the new features;</p>
<ol>
<li>New Forums</li>
<li>Updated Support</li>
<li>New Premium Service</li>
<li>New Layout</li>
</ol>
<p>Thanks for all your support over the years. With any problems, contact <a href=”mailto:TaylorJFlatt@gmail.com”>TaylorJFlatt@gmail.com</a></p>
</div></div>
<div id=”footer”>
<p>Copyright © 2008. Administrator: <a href=”contactme” title=”Contact the Administrator”>Taylor Flatt</a></p>
<p><a href=”#”>Staff</a> | <a href=”about.htm”>About Us</a> | <a href=”http://validator.w3.org/check/referer” title=”This page validates as XHTML 1.0 Transitional”><abbr title=”eXtensible HyperText Markup Language”>XHTML</abbr></a> | <a href=”http://jigsaw.w3.org/css-validator/check/referer” title=”This page validates as CSS”><abbr title=”Cascading Style Sheets”>CSS</abbr></a></p>
</body>
</html>
That is a very simple webpage with external CSS integration. The footer is just displaying some copyright and validations to validate that you don’t have any bad links, missing end tags or bad code. If you wanted to make a CSS page that corresponded with the HTML preview above, you could do something like this -
*
#header
{
background: #ffffff;
height: 244px;
text-align: right;
padding-left: 10px
}
#content
{
background: #ffffff;
width: 811px;
min-height: 900px;
}
#mainback
{
background: #ffffff url(images/white.gif);
}
#main
{
float: center;
width: 500px;
min-height: 800px;
font: arial, 13px;
}
#footer
{
height: 47px;
padding-top: 20px;
background: url(images/footer.gif) repeat-x;
}
That is what a sample CSS document would look like if it corresponded with the above example. You can go ahead and try this in your notepad. The only change when making and saving a CSS file is you end with the extension .css. Everything I listed about we have worked with in either HTML or CSS. But for a recap I will go through the stuff we haven’t worked with in CSS.
text-align - Aligns your text to a specific section of the webpage
padding - this just specifies where the padding will occur and how much padding there will be.
repeat-x - That means that picture listed there will continue to repeat on the x-axis..over and over and over until it reaches the specified “end of the page”. In this case it is 811px width.
Now that you have basic integration and some examples, the next part will be all the basic commands you will need, in-depth positioning and some other miscellaneous stuff. If anyone has any suggestions on what else I ought to add in the final installment of my CSS tutorial, please give a comment. Hope you are enjoying it as much as me, thanks.
RSS 
This shouldn’t be to the center.
I will go in-depth with this in my Part 3, but for now...
Float - Move material within the id right or left.
