CSS Examples

Fonts

Arial, Helvetica, sans-serif

"Times New Roman", Georgia, Times, serif

This paragraph has a larger font size

This paragraph is bold

This paragraph is italic

This paragraph is uppercase

This paragraph is underlined

This paragraph is additional line spacing Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores, odit? Expedita beatae iure, corporis ipsa non. Nostrum minus commodi praesentium alias officiis natus facilis illo non, animi voluptatem minima reiciendis. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit nisi labore quasi officia, excepturi hic corporis maiores doloremque cum repellendus. Iusto sit est, eaque nemo, impedit provident perspiciatis facilis qui.

This paragraph has extra letter spacing.

This paragraph has extra word spacing.

This text is aligned left.

This text is aligned right.

This text is centered.

This text is justified. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero perferendis voluptas, nesciunt sapiente repudiandae facere harum iusto, porro totam deleniti, corporis pariatur vel rem omnis hic exercitationem illum necessitatibus et. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error perspiciatis velit unde sint non amet, minus numquam excepturi illo dignissimos earum nihil ipsa accusantium ab repudiandae molestias temporibus recusandae vero?

Margins and Padding

Borders

This paragraph has a solid border.

This paragraph has a dotted border.

This paragraph has a dashed border.

This paragraph has a double border.

This paragraph has a groove border.

This paragraph has a ridge border.

This paragraph has a inset border.

This paragraph has a outset border.

Backgrounds

This paragraph has a blue background.

Background Image Replacement

The Iron Yard

Display

This is an anchor tag, which usually is display: inline. I have set it to display: inline-block. It still acts as an inline element, but now I can add margins, padding, width and height.

You can't see this paragraph, because it is set to display:none.

Gradients

http://www.colorzilla.com/gradient-editor/

Positioning

Floats

Pseudo Classes

This link is supercharged