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;} class="CSSguide"

>This is blue.

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;}

ID="Once"

>This can only be used once.

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

Hello

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

This is blue in a regular paragraph

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.