CSS Examples

Classes

A class is used to identify an element individually.

The code

HTML


<p class="red">Lorem ipsum dolor sit amet</p>

CSS


p.red{
	color:#FF000;
}

Example

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras tincidunt dapibus ligula. Etiam a dui. Nunc tincidunt, erat nec blandit fringilla, erat lacus euismod arcu, blandit imperdiet arcu ante vel nisi. Nunc in erat ut diam aliquam fermentum. Maecenas eu nibh in turpis mattis rhoncus. Nulla interdum lacus ac mi. In hac habitasse platea dictumst. Nam eu lectus. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus posuere neque id arcu.

Display

With display you can tells things not to display on the screen.

The code

HTML


<ol>
	<li>Apple</li>
	<li class="hide">Orange</li>
	<li>Banana</li>
	<li>Grape</li>
</ol>

CSS


	.hide{display:none;}

Basic Example

Apple
Orange
Banana
Grape

Example 2 - headings

HTML


<h1>This h1 is not hidden, but the one below it is</h1>
<h1 class="hide">This h1 is hidden</h1>

CSS


	.hide{display:none;}

This h1 is not hidden, but the one below it is

Example 3 - changing block to inline & Vice Versa

HTML


<h1 class="inline">My heading</h1>
<p class="inline">By default the h1 and p tags are block level (meaning they take up the whole line, however; you can change it if need be, like I've done here.</p>
<span class="block">In addition, by default the span tag is inline but I have changed it to block level.</span>

CSS


	.inline{display:inline;}
	.block{display:block;}

This is the default

My heading

By default the h1 and p tags are block level (meaning they take up the whole line, however; you can change it if need be, like I've done here.

In addition, by default the span tag is inline but I have changed it to block level.

This is with the CSS

My heading

By default the h1 and p tags are block level (meaning they take up the whole line, however; you can change it if need be, like I've done here.

In addition, by default the span tag is inline but I have changed it to block level.

Backgrounds

Not only background colors can be used, but also images, if you think about the background logically you can optimize your image.

Box with no background

Box with repeating background

CSS


#box{
	background:url(182.png);
}

Box with repeating background in only y direction

CSS


#box{
	background:#FF6600 url(y.png) top left repeat-y;
}

Box with repeating background in only x direction

CSS


#box{
	background:#FF6600 url(x.png) top left repeat-x;
}

Repeating fixed background

CSS


	body{
		background:url(bg.png) left center repeat-x fixed;
	}

See page background

CSS for Positioning Examples

Float

A floated box is positioned within the normal flow, then taken out of the flow and shifted to the left or right as far as possible. Content may flow along the side of a float.

See the example. Source files index.html style.css

Inherent problems with Float

The content of the underlying container is wrapped.
Forced to clear the float at least once.
Getting the bottoms of items floated and the containers they are floated on top of is a pain.
This is one of those properties that is highly dependent on the browser you are using.

Relative Position

An item positioned relatively is positioned relative to it's original position. You position it relative then choose a top, right, bottom, or left position, usually just two.

See the example. Source files index.html style.css

Inherent problems with Relative Positioning

IE 6 and prior craps out frequently with this and usually requires the container that holds the relative element to have an absolute position with a height of 1px. (browser hack)
Depending on the browser things could shift and result in your element not being where youw ant it to be.

Absolute Position

With absolute positioning, an element can be placed anywhere on a page and it stays there. You position it relative then choose a top, right, bottom, or left position, usually just two.

See the example. Source files index.html style.css

Fixed Position

An item with a fixed position stays fixed at that point in space. You position it relative then choose a top, right, bottom, or left position, usually just two.

See the example. Source files index.html style.css

Other Positioning Properties

W3Schools CSS positioning tutorials