cubicle.piczo

CSS stands for Cascading Style Sheet and it's a really really important tool that every webdesigner should use in order to design their site. It is not easy. You have to know some basic HTML for this.

CSS is ultimately a very very long HTML code that states the properties of certain aspects of a website, like the properties of the text (general or bold, italic, underlined, striked-out, in H1, H2,...,H6), links (general, hover, active, visited), backgrounds (image,repeated or fixed), TEXTAREAs, blockquotes, xmp text and even image properties (border color and width). You'll have all these propersties, for the entire website in just one very long code. The best part about this, is that if you want to change the look of your site, all you have to do is change the CSS code where you want and all the pages will suffer that change at once. Cool, huh?

Okay... So, here's the CSS code:

a:link, a:visited, a:active {
        text-decoration: none;
	font-weight: normal;
	color: #e7799f;
}
a:hover { 
	text-decoration: none;
	font-weight: normal;
              letter-spacing:1px;
	color: #000000;
}
a:img
{
  margin: 2px;
  padding:3px;
  border: 2px dotted #363f4e;
  height: auto;
  width: auto;
  float: left;
  text-align: center;
}	
a:hover img {border: 2px dotted #000000;}
</STYLE>

Phew... We're at the end. This code has covered almost every aspect of a website.

If you're using piczo, you'll have to paste the CSS code in a HTML box on every single page. If not, paste this code on a page. Name it style.html for freewebs or style.css if you're using php. Then, in order for you to have the CSS degins on your entire site, you'll have to paste this code on every other page:
<link type="text/css" href="URL of CSS page" rel="stylesheet" />

Good...You see in the code, that the CSS is divided into sections. Each section is divided by braces. Let's take each part separately. Remember: you don't need to use all properties at the same time. For instance, if in H1, you don't want the text to have a background color, just leave that part blank or delete it.

Background. You can have the following properties:
background-color:# ; sets a background color
background-image:url(URLHERE); sets an image as a background
background-repeat:repeat OR no-repeat; sets if an image will be or not repeated
background-attachment:fixed OR scroll; sets if an image will be scroll with the rest of the page or not
When you have something like "fixed OR scroll", you have to choose one of the properties. You can't have both.

Text. Sets all possible text properties. Here are all the properties you can have for text:
text-color:# ;
text-align: left OR right
text-decoration: none OR underline OR overline OR line-through OR blink;
text-transform: none OR capitalize OR uppercase OR lowercase;
line-height: 0pt; sets the distance between rows
letter-spacing: 1px;
font-family:arial OR tahoma OR etc;
font-size: 13pt;
font-style:normal OR italic OR oblique;
font-weight:normal OR bold OR bolder OR lighter;

Borders. Defines borders around texts, links, images etc.
border-width:2px;
border-style:solid OR dotted OR double OR dashed;
border-color:#000000 ;
border-bottom: 1px,dotted, #DDDDDD;
border-left: 1px, dashed, #ffffff;
border-right: same as above;
border-top:same as above;

Margin. Defines space around elements.
margin-bottom: 2px; sets bottom margin of an element
margin-left: 2px;
margin-right: 2px;
margin-top: 2px;

Padding. Defines space between the element border and the element content.
padding: 2px; 2 px around the element
padding-bottom: 2px;
padding-left: 2px;
padding-right: 2px;
padding-top: 2px;

Lists. List markers, styles and images as markers.
list-style-image:url(URLHERE); sets an image as a marker

That's about it. In the end, you really have to play around with all these properties and you'll get the hand of it.

Finally, I'll tell you what's with the H1, H2 etc. Your pages will use these alot! H1 means header1 and is the first title of your page, H2 is the second and H6 is your sixth. Each header can have it's own personal background and text properties defined in the CSS and they look different. This is how you can make tables really really easy! You won't be needing all of them. For instance I use H1 and H2 for my sidebar and H3 and H4 for the pages. This is how you can use them: <h1>Title here</h1> <h2>Subtitle here</h2> <h3>content here</h3>
I really hope this has helped.