The Ultimate Quick CSS Guide

CSS – Cascading Style Sheets, the hidden heroes of the world wide web. These unsung heroes take a plain page of text and turn it into visually stimulating, aesthetically pleasing works of textual art. But what exactly is CSS and how do you use it?

You needn't head off to Amazon or your local bookstore to drop $50 on a massive tome that will give you back problems. There's a very structured logic behind CSS and you can learn some of the basics in just a matter of minutes. While the scope of this guide will not give you magical powers over the layouts of your pages and allow you to make the most intricate and complex pages available today, it will certainly get you on your way.

The cascading part of the CSS is one of the most important. It means that instead of editing each and every page on your website manually to give them flair and style, you simply point them all to the style sheet and have them incorporate the styles. It has been one of the most important additions to HTML over recent years.

CSS Structure

First let's look at a very quick CSS section to get a feel for the structure of CSS and to see how it looks and what it means:

p
{
text-align:center;
color:black;
font-family:arial
}

CSS is made of 3 pieces a selector, in the example p for paragraph, the logical grouping on the HTML page. The second piece is property in the example text-align, color and font-family are all properties of the selector. The final piece is the value which is center, black and arial in the example. The standard format is Selector {property:value;} Each property must be paired with a value and closed with a semi colon. Each group of properties must be enclosed in curly brackets and the selector must be placed directly before the properties.

Every element on a web page can generally be styled in some way, whether it's where it shows up on the page, what color the text or the background is or what size. Here is a list of the most common and useful CSS elements that generally show up in every page of text:

Basic Concepts

Property

Description

Grouping

Multiple selectors separated by commas. Allows for assignment of properties to elements (selectors). H1, H2, H3, H5 { color: blue;}

Contextual selectors

One or more selectors H1 B {text-decoration: underline;} Bold Header 1 will be underlined as well.

Class
(tag attribute)

A class selector is a name preceded by a period. Do not use the period when referencing the class. Called by using the class= attribute. Do not begin a class name with a number

.CSSguide {color: blue;} <P class="CSSguide">This is blue.</P>

ID
(tag attribute)

An ID selector is preceded by a hash mark (#), and is called using the ID= attribute. The hash mark does not appear in the value of ID. Works like the class selector except that the ID can be used only once in the document.

#Once {color: red;} <P ID="Once">This can only be used once.</P>

Comments

Anything between /* and */ will be a comment and have no effect on the page. Used to document changes etc. /* This is a comment. */

DIV and SPAN tags

A Div is a block where the content within can all be styled at once

<DIV style="color:blue;"><H1>Hello</H1></DIV>

SPAN is used for inline formatting inside of another styled element like a paragraph

<P>This is <SPAN class="CSSGuide">blue</SPAN> in a regular paragraph</P>

Shorthand

Many properties can accept a shorthand list of values. Values are read from the top clockwise.

Example:

DIV { padding: 5px 10px 5px 10px }

is the same as:

DIV { padding-top:5px; padding-right:10px;

padding-bottom:5px; padding-left:10px }

Background Properties

Property

Description

background

Sets any background properties in one selector.

background-attachment

Sets whether a background image is stationary or scrolls with the page.

background-color

Sets the background color of a selector. Accepts HTML color names and Hex Color code i.e. #ffffff

background-image

Sets the background image for a selector

background-position

Sets the starting position of a background image in pixels

background-repeat

Sets if a background image will repeat horizontally, vertically or not at all.

Border and Outline Properties

Property

Description

border

Sets all the border values in one property declaration

border-bottom

Sets all the bottom border values in one property declaration

border-bottom-color

Sets the color of the bottom border

border-bottom-style

Sets the style of the bottom border

border-bottom-width

Sets the width of the bottom border

border-color

Sets the color of the four borders

border-left

Sets all the left border values in one property declaration

border-left-color

Sets the color of the left border

border-left-style

Sets the style of the left border

border-left-width

Sets the width of the left border

border-right

Sets all the right border properties in one property declaration

border-right-color

Sets the color of the right border

border-right-style

Sets the style of the right border

border-right-width

Sets the width of the right border

border-style

Sets the style of the four borders

border-top

Sets all the top border properties in one property declaration

border-top-color

Sets the color of the top border

border-top-style

Sets the style of the top border

border-top-width

Sets the width of the top border

border-width

Sets the width of the four borders

outline

Sets all the outline properties in one property declaration

outline-color

Sets the color of an outline

outline-style

Sets the style of an outline

outline-width

Sets the width of an outline

Font Properties

Property

Description

font-family

Property to choose specific fonts from generic families: serif, sans-serif, monospace, cursive and fantasy. Selector {font-family: "Courier New”, serif;} Can be applied to any text Selector.

font-style

Selects between italic and normal. Selector {font-style: italic;}

font-variant

Choice of two values: small-caps and normal. Allows for special formatting, will probably expand eventually beyond just 2 choices. Selector {font-variant: small-caps;}

font-weight

Values are: bold, normal, lighter, bolder and numeric values 100-900. Selector {font-weight: 700;}

font-size

Sets the absolute size (pt, in, cm, px), relative size (em, ex), or percentage of normal size.
Can be size: xx-large, x-large, large, medium, small, x-small, xx-small, larger, smaller or numeric value. Selector {font-size: 200%;} Selector {font-size: 36pt;} Selector {font-size: x-large;}

font

Sets all font values in one property declaration. Best order of values is
font {font-style font-variant font-weight font-size/line-height font-family;}. Not all are necessary Selector {font: bold 16pt “Times New Roman”;}

Dimension Properties

Property

Description

height

Sets the height of a selector

max-height

Sets the maximum height of a selector

max-width

Sets the maximum width of a selector

min-height

Sets the minimum height of a selector

min-width

Sets the minimum width of a selector

width

Sets the width of a selector

List Properties

Property

Description

list-style

Sets all the properties for a list in one property declaration

list-style-image

Specifies an image as the list-item marker

list-style-position

Specifies where to place the list-item marker

list-style-type

Specifies the type of list-item marker

Margin Properties

Property

Description

margin

Sets all the margin properties in one property declaration

margin-bottom

Sets the bottom margin of a selector

margin-left

Sets the left margin of a selector

margin-right

Sets the right margin of a selector

margin-top

Sets the top margin of a selector

Padding Properties

Property

Description

padding

Sets all the padding properties in one property declaration

padding-bottom

Sets the bottom padding of a selector

padding-left

Sets the left padding of a selector

padding-right

Sets the right padding of a selector

padding-top

Sets the top padding of a selector

Positioning Properties

Property

Description

bottom

Sets the bottom margin edge for a positioned selector

clear

Whether a selector allows floating elements on the sides or not.

cursor

Specifies the type of cursor to be displayed i.e. crosshair, help, wait

display

Specifies the type of box a selector should generate

float

Specifies whether or not a box should float

left

Sets the left margin edge for a positioned box

overflow

Specifies what happens if content overflows a selector's box

position

Specifies the type of positioning for a selector

right

Sets the right margin edge for a positioned box

top

Sets the top margin edge for a positioned box

visibility

Specifies whether or not a selector is visible

z-index

Sets the stack order of a selector like layers above or below others.

For further information there are a great amount of resources online including those that were drawn upon for this article including:

W3Schools.com CSS Tutorial

SitePoint CSS Reference Guide