Starting off simple

First off, the basic structure of CSS is

#id {
attribute: style;
}

The #id is what you’ll define in your HTML as <div id=”id”></div>, which pretty much means #id is what you’ll use to control the styles of <div id=”id”></div>. (You can also put in .id if you’re putting your HTML as <div class=”id”></div>. Everything is just about the same, I just like the # sign more than a period.) The attribute: style; is pretty much each little line that will control a different thing (i.e. background color, position, font type, etc).

Common attributes

So, the basic attributes you’ll use in most web page CSS codes are:

• background: style;The styles you can use are:
  • transparent (makes the background transparent, duh.)
  • hex codes (#ffffff, #000000, etc.)
  • colors (white, black, blue, red, etc. Remember, though, if you’re using names, you have to use the color names it can read, so doing something like SUPER GAY PINK won’t work.)
  • url(imageurl) (I hope this explains itself.)

  If you wanted a transparent background, it’d be:

  
  #id {
  background: transparent;
  }
  

• width: dimension;For the dimension you’d put the pixel width of what you want the section to be (so 200px, maybe), or you could put x-axis or not define it, which would make its width change with the content. (Not a good idea for width.)If you wanted a 200px wide section, it’d be:

  
  #id {
  width: 200px;
  }
  

• height: dimension;Again, you’d put the pixel height for this (i.e. 500px tall), or y-axis or not define it to make it’s height change with the content amount.If you wanted a 500px tall section, it’d be:

  
  #id {
  height: 500px;
  }
  

• left: ___px; (Pixels from the left of the page)
• top: ___px; (Pixels from the top of the page)
• border: _px ___ #____; (_px is the width/thickness of the border, ___ is whether you want it solid/dashed/etc, and #____; is the color you’d want the border.)
• font-family: ___; (Type of font. i.e. Times New Roman, Arial, etc.)
• font-size: __px; (Size of font. i.e. 12px, 10px, etc. You can also use pt instead of px.)
• font-color: #_____; (The color of the font you want. #_____ is the hex code, you can also do color names.)
• font-weight: ____; (Whether you want it regular, italic or bold.)
• text-align: _____; (Whether you want it aligned right, left or justified [justify].)
• overflow: ____; (Scroll bar or no scroll bar? If you want a scrollbar, set it to : scroll; and if you want the overflowing text to hide, put : hidden;)

Putting it all together…

Okay! So now that we have been over some of the basics and you’ve been pretty much force-fed all the basic attribute names and styles, here’s how you’d put it all together into one single page.

If you need to use more than one attribute for a single element, simply set out your CSS like so:

#id {
attribute1: style;
attribute2: style;
attribute3: style;
/*etc. etc.*/
}

Note that the /* */ tags in CSS are used to define block comments

So let’s say you want your <div id=”id”></div> to be a 300 pixels wide, 100 pixels tall, transparent section with a 1px black border, 9px Verdana font that’s justified and has a scrollbar. Oh, and is 23 pixels from the left of the page and 56 pixels from the top of the page. Here’s what you’ve got to compile:

#id {
background: transparent;
left: 23px;
height: 56px;
width: 300px;
height: 100px;
font-family: Verdana;
font-size: 9px;
text-align: justify;
overflow: scroll;
border: 1px solid black;
}

And there you go! That’s the basic CSS anatomy in a really big nutshell! Think that’s all there is to it? Well, we have only really touched the topic of CSS and we haven’t really done anything cool yet.

One of the more complex codes you’ll use z-index’s.

The Z-Index Tag

Z-index is, in my opinion, a completely irrelevant name for the layer of the div id. The lower the number for the z-index style, the lower position on the stack of layers it’ll be on your site. The higher the number, the higher the position. For example, imagine that you are looking down on your web page from a bird’s eye view. You can see all these layers and if you want something to be above another component then you need to use z-index attributes.

So, if you want your div to be the lowest layer, like a background image or something, you’d write:

#id {
z-index: 1;
}

If you wanted your div to be higher than the rest, like the text or a title, then you need to issue a higher z-index value:

#id {
z-index: 2;
}

If you had, say, 5 layers (background, header, random image, sidebar text, main text) and you wanted the layers to go in that order from lowest to highest on the stack, the CSS coding would like something like:

#background {
z-index: 1;
}
<p>#header {
z-index: 2;
}</p>
<p>#random image {
z-index: 3;
}</p>
<p>#sidebar text {
z-index: 4;
}</p>
<p>#main text {
z-index: 5;
}

Of course, if you wanted two div’s to be on the same layer, you’d just set the z-index to the same number. Simple, right?

Mouse hovering

Whenever you drag your mouse over a link or a button and that button becomes active, that is called hovering. A nice simple example of hovering effects, are at the top of this site. The pages to the right all have CSS hovering techniques added to them to make them more prominent when you hover over them. Typically people will use this attribute for navigation bars that have cool effects when you hover over them. For now, I’ll just tell you how the coding works.

Hovers in CSS aren’t technically an attribute, but like an add-on to the id. So for example, if you had:

#id {
attribute: style;
}

Your hover CSS would be:

#id:hover {
attribute: style;
}

As you can see, all you really do is add the :hover to the id. So, let’s say you have a little box of a div that’s blue, but you want it so that when you hover over it, it turns red. Here’s what you would write:

#id {
background: blue;
width: 50px;
height: 50px;
}

#id:hover {
background: red;
width: 50px;
height: 50px;
}

You should note that not all elements in HTML can have the hover effect applied. You can also get all fancy later and add image URLs so that a picture of a cat will hover into a picture of cake for example. Using these two CSS tricks you can really make your sites and web pages more effective! If you have some nice examples of these two CSS effects please share the URL in the comments so we can all have a look.

Related Content:

• Why use CSS? A mini tutorial and explanation
• Applying CSS to HTML forms
• Apple Style Menu Tutorial Using CSS Sprites