Anchor tag’s behaviours can be manipulated by using pseudo-classes. Let’s say we want a link to go bold when we hover over it, we can use the pseudo class to do this. Look at the syntax:
selector:pseudo{ foo:bar; }

Now let’s do our bold hover example. I’ll also pop in the original anchor declaration:
a { color:red; }
a:hover { font-weight:bold; }
When the user hovers their mouse over the anchor it will appear bolded. I’ve done this on the link below:

Example.

Easy.

Other pseudo classes for anchor text include:

• link
• visited
• hover
• active

All of these refer to the state and behaviour of the anchor itself. It’s pretty self-explanatory what each is for.

It is also possible to use a class on your pseudo-classes:
a.red:hover { font-weight:bold; }
You can then use class="red" to all the class.

Another useful pseudo-element is the first-child pseudo-class. This allows you to add a style to an element that is the first child of another element. This is handy for styling the first list element out of an (un)ordered list.

Setting a margin to auto will try and force the element to the opposite side. So, if you set both left and right margins to auto, the browser will put the browser in center.

Let’s take a look at the follow example CSS code, to be applied to a block element like a div:

.centerme{
  width:100px;
  margin-left:auto;
  margin-right:auto;
}

It is very important you set a width on the element. You cannot center align something that takes up the full width of it’s container. Imagine a room full of water, you cannot make the water go into the center of the room without forcing its sides in. Bit of an odd analogy, but you get the meaning.

The best example to use for CSS floats is floating an image to the left or right and having text wrap around it. Take the following example:

CSS Float

If you use floats on block elements you can quite easily make very effective columned layouts. Floating two divs to the left and setting widths will give you two adjacent elements. Handy.

CSS Positioning consists of 4 main declarations:

• Static
• Fixed
• Relative
• Absolute

The static position (position:static;) is the default for HTML elements. It basically means that the element will follow the flow of the page and act as you’d expect them to.

position:fixed; is a little different. The element with this declaration will be placed exactly where you specify and will not move even when the browser window is scrolled. See the example:
.fixed_div {
  position:fixed;
  top:0px;
right:10px;
}

Next we have relative positioning. A relatively positioned HTML element is positioned relative to where it would normally be. Let’s see the example:
.relative_div {
  position:relative;
  left:20px;
}
This div would be 20 pixels to the right of where it would normally be. Setting left:-20px; would move it to the left.

An absolutely positioned element is quite different to the others. The absolutely positioned elements will be placed exactly where you specify on the page, but all other elements on the page will totally ignore it. Take the following example:
.abs_div{
  position:absolute;
  top:10px;
}
That element will now appear at the top of the page and will (probably) overlap the rest of your content.

Using position:absolute; it is possible to overlap elements over one another. Let’s have a look at the following:
.abs_div{
  position:absolute;
  top:10px;
  width:200px;
  height:200px;
  background-color:red;
}

.abs_div_over{
  position:absolute;
  top:20px;
  width:200px;
  height:200px;
  background-color:blue;
  z-index:1;
}

The above will create 2 boxes at the top of the page, one is red and one is blue. We have introduced the z-index declaration. Previously we have used the x and y coordinates (left and top), z-index defines the position of the elements on the page on the z-axis. The higher the z-index, the further up the pile it is. The default for z-index is 0, so setting 1 means it will overlap default elements.

When using z-index I suggest always using number in the thousands. So if you only have one element you want to be placed on top then give it a z-index of 1000. Doing it this way gives you lots of scope for the future. In 6 months time you might want to add an element inbetween the two original ones, which if you used z-index:1; would mean recoding, with z-index:1000; you simply add one inbetween.

visibility:hidden; this declaration will hide the element from the users screen, but the page still acts as if it was there. So, if you have a div that is 500×500px, and you use visibility:hidden; the contents (and background) of that div will not show, but there will be a large whitespace instead.

display:none; is similar to visibility:hidden; in that the element cannot be seen, but instead of just showing a whitespace the element is totally removed. It is as though the element is not even there.

There are three modes of displaying elements on-screen. The first is display:inline;, this makes the element continue with the flow of the page. A good way of explaining this is with a flow of text. Let’s a assume you have a paragraph of 3,000 lines, on line 500 you have an inline element that just makes it’s content text red, this text will flow with the rest of the content. Now let’s imagine that same element was display:block;, the red text would begin on it’s own line, and the remainder of the original div would then start on it’s own line. Some good examples of block elements are divs, h1 (h2, h3, …), p. Some examples of inline elements are span and a.

There is an in-between declaration of display:inline-block;, which allows a block element to appear in the flow of the text. Block elements can be styled more solidly than inline elements; so let’s say you have styled your a tag with display:block; with some other attributes to make it look like a button. If you want this button to follow the flow of text then display:inline-block; is the ideal solution.

There are 6 different dimension declarations:

• height
• max-height
• min-height
• width
• max-width
• min-width

Height and width state the height and width of an element. Not all elements can have specific widths or heights defined, and some will shrink depending on the size of their content. You can usually avoid this by using display:block;. We’ll be using a default block displayed element, a div.

Max-height and max-width specifies the maximum dimensions of the given element, not allowing it to go any larger. If, however, the content is larger that the maximum most browser will increase the dimensions over your declarations. You can use overflow declarations to try and over come this.

Min-height and min-widths are very useful when creating columned layouts. Let’s imagine you have a web page with two columns, one for your navigation, and one for your content, with a footer div at the bottom. Sometimes your content will only be one line long, meaning that the footer will become part of the content pane (assuming you haven’t cleared floats). You can force the content div to be a specific height, unless the content forces it to be larger.
.content { min-height: 300px; }

The easiest way to explain CSS grouping and nesting is by using examples.

Let’s say I want to have all my h tags (h1-h6) in a green font colour, rather than the rest which are all black. All I need to do is list the tags I want to use as selectors one after another, just before the declaration:
h1,h2,h3,h4,h5,h6{
  color:green;
}

This works for classes too:
.bold,.bolded,.bolder{
  font-weight:bold;
}

You can also nest selectors. Let’s say I have a div, in which content resides, but I want that content to be styled differently to the rest of the page, without having to declare a style for everything.
.my_div{
  background-color:green;
}
.my_div p{
  color:white;
}
That code will make all paragraph tags WITHIN the .my_div element to be styled that way. You will find this a massive time saver and of great use when dealing with larger web pages.

Adding padding to an element will make the contents of that element move away from the outside of the element.

Take the following example:
The below div has absolutely no padding on it.

If we add 10 pixels padding:

You can use shorthand of: padding: north east south west;, as an example: padding:5px 10px 5px 10px;, or just padding:10px; to apply to all sides.

The below div have absolutely no margin on it.

If we add 10 pixels margin:

As you can see, the CSS: .my_div { margin:10px; } adds 10 pixels of margin on ALL sides of the element. This includes the top AND bottom, left AND right, so be careful when positioning elements and calculating widths. A 10px margin on an element makes it 20 pixels wider, and 20 pixels higher.

.my_div { outline:1px solid #000; }
Would produce:

Now let’s include this with a border.
.my_div {
  outline:1px solid #000;
  border:1px dashed #000;
}
Would produce:

The CSS Outline syntax is pretty much the same as CSS Borders.