CSS In A Nutshell

Here's where we put everything together. This is a list of what "CSS - Madness or Magic?" and "History On-Line" cover. It is, by no means, a complete list, but it will get you started in using CSS.

There are times when I will have [information] enclosed in square brackets. Neither the brackets nor the contents of the brackets are to be included in the CSS information. I use that format to show that there is more than one choice for a particular CSS property. I will also use the # symbol for the same purpose. If you're unsure of how a property is supposed to be written, section title will take you to the appropriate place in either "CSS - Madness or Magic?" or "History On-Line".

Adding Styles To Your Page

<meta http-equiv="Content-Style-Type" content-"text/css">: This tag tells the browser that the content is styled using CSS.
<link href="mystyles.css" rel="stylesheet" type="text/css">: This tag tells the browser to look for CSS information in the "mystyles" CSS page. This is the main source of style information for the page.
<style type="text/css"> </style>: This is where the style information is added. You'll find it inside the <head> tag. If there is a conflict of information, such as two different colours specified for the same thing, between a linked stylesheet and the style information added here, this style will be the one that works. It's handy if you have one page that is slightly different from all the others on your site. However, any styles you change here will not be affected by changes you make to the main CSS page.
<tag style="css information">Text or Image</tag>: This is called 'inline style' information. It makes one-time-only changes to a section. When the tag is closed, the style goes back to either the style listed in the <head> tag or on a linked CSS page.

Text Information

{ text-align: [left/right/center/justify]}

This aligns the page elements or the page itself to one of the four possibilities - left (default), right, center, or justify. The last value, "justify", spreads or condenses elements and/or text so that both the left and the right margins are equal.

{ color: [name/hex/rgb]}

This defines the colour of the foreground elements, such as text, and acts as the default colours for borders. It can be defined in one of four ways:

{ color: red; } Predefined names - red, blue, green, black, white, etc.
{ color: rgb( 255, 0, 0);} RGB possible values are from 0 to 255
{ color: #A1B2C3; } Standard hexidecimal values, preceeded by the # sign.
{ color: #0FF; } Websafe shorthand hexidecimal values, preceeded by the # sign. A list of websafe colours can be found here.

{ text-decoration: [none/underline/overline/line-through/blink ]; }

This replaces the HTML tags <u></u>, <strike></strike> and <blink></blink>. "Overline" is similar to "underline", but draws the line above the text.

{ text-indent: value/%; }

This sets the indentation of the first line of a block of text. It can be done by setting the indentation to a percentage of the block's width or by specifying a value, either in points, pixels, or em widths (the width of the letter "m" in the current text size and font).

Font Information

{ font-family: [font name/generic name]; }

This replaces the <font face=> tag of HTML. Families may be single word fonts like Arial or Helvetica, multiple word fonts enclosed in quotes, such as "Times New Roman" or "Trebuchet MS", or as one of five generic font families - serif, sans-serif, cursive, fantasy, or monospace. These last are considered 'last resort' families as they may not contain all the characters a page requires. Also, as they are all one-word families, they are never put inside quotes.

{ font-size: [absolute/relative/specific/%]; }

The four ways to define font sizes are as follows:

Absolute sizes are predefined and depend on your browser and its settings - xx-small, x-small, small, medium, large, x-large, and xx-large.
There are only two relative sizes. They change the font size up or down one value from the main font size. They are "smaller" and "larger".<
Specific font sizes are the most common. They are written as 10px (10 pixels) or 10pt (10 points, mimicking print sizes).
Percentage sizes increase or decrease the main font size by the specified amount. For example, a font size of 150% on a page with a 10px font results in a font size of 15%. Conversely, a font size of 50% on a page with a 20px font size results in a font size of 10px.

{ font-weight: [normal/bold/lighter/bolder/value]; }

Font weights are described as "normal" or "bold", with "lighter" or "bolder" increasing or decreasing the font weight by one value. Fonts are also weighted as a numeric value between 100 and 900, counted by hundreds. A value of "400" is equal to "normal" and "700" is equal to "bold".

{ font-style: [normal/italic/oblique]; }

This element replaces the <i></i> HTML tag. Fonts are styled as "normal", "italic" or "oblique". The last two are similar in appearance and interchangeable.

Background Information

{ background-color: [name/rgb/hex]; }

Colour is added to a background, whether it be a page background or a section of the page, using the same methods as for text colour:

{ background-color: red; } Predefined name - red, green, blue, black, white, etc.
{ background-color: #A1B2C3; } Hexidecimal values
{ background-color: rgb(104, 255, 16); } RGB values. A conversion from websafe colours to RGB is found here.
{ background-color: #F00; } Websafe hexidecimal shorthand values. The longhand version of #F00 is #FF0000.

{ background-image: [none/url]; }

Background images can be set to "none" {background-image: none; } or the specific image is called up {background-image: url("image.jpg"; } or { background-image: url("http://www.mysite.com/myimages/image.jpg"); }

{ background-repeat: [repeat/repeat-x/repeat-y/no-repeat]; }

Background images are displayed in one of four ways:

{ background-repeat: repeat; } repeats the image both horizontally and vertically.
{ background-repeat: repeat-x; } repeats the image in a horizontal row only.
{ background-repeat: repeat-y; } repeats the image in a vertical column only.
{ background-repeat: no-repeat; } creates only one image.

{ background-attachment: [fixed/scroll]; }

Background images are set on a page in one of two ways. "Fixed" images are held in one place relative to the page, disappearing if the page is scrolled down beyond the edge of the image. "Scroll" allows the image to remain in a constant position relative to the window rather than the page.

{ background-position: [%/value/keyword]; }

Background images are positioned in one of three ways:

{ background-position: 15% 10%; } - The image is positioned 15% of the page or element's width from the left and 10% of the page or element's height from the top.
{ background-position: 15px 10px; } - The image is positioned 15px from the left edge and 10px from the top edge of a page or element.
{ background-position: keyword keyword; } - There are three keywords for each of the horizontal (left, center, right) and vertical (top, center, bottom) positions. They can be combined in the following ways:
- top left; left top - as if both horizontal and vertical values were set to 0%.
- top; top center; center top - as if the horizontal value was 50% and the vertical 0%
- right top; top right - as if the horizontal value was 100% and the vertical 0%
- left; left center; center left - as if the horizontal value was 0% and the vertical 50%
- center; center center - as if both horizontal and vertical values were set to 50%
- right; right center; center right - as if the horizontal value was 100% and the vertical 50%
- bottom left; left bottom - as if the horizontal value was 0% and the vertical 100%
- bottom; bottom center; center bottom - as if the horizontal value was 50% and the vertical 100%
- bottom right; right bottom - as if both the horizontal and vertical values were set to 100%

Horizontal values are calculated first, then vertical values. If only one value is given, it is applied to the horizontal position. Vertical positioning is assumed to be 50% or "center". Numerical values may be combined. { background-position: 75% 126px; } will put the image three-quarters of the way across the page and 126 px from the top of the screen. Negative values are permitted for positioning, and keywords cannot be combined with any of the numerical values.

Margins and Padding

Table In CSS

The "Content" (red area) is the area of the text (including the space between the rows of text) or image. "Content" can be an entire page or a section of the page.

The "Padding" (light green area) is the space between the content and the border.

The "Border" (dark green line) is a line or set of lines, drawn around the padding and may be visible or invisible.

The "Margin" (blue area) in an invisible line enclosing the entire element or block.

Margins, padding and borders are always set in the following order: top, right, bottom, left. Only margins may be set to negative widths.

{ margin-top: #; }, { margin-right: #; }, { margin-bottom: #; }, and { margin-left: #; }

Margins can be set individually by using one of the above properties. Margins are measured in either percentages or specific distances.

{ margin: # # # #; }

This is the shorthand version of the margin property. You can set the four margins as follows:

{ margin: 10% } - sets all four margins at 10% of the page or block width.
{ margin: 10% 15%; } - sets the top and bottom margins to 10% of the page or block and the left and right margins to 15% from the edge.
{ margin: 5px 10px 3px; } - sets the top margin to 5px, the left and right margins to 10px and the bottom margin to 3px.
{ margin: 1px 2px 3px 4px; } - sets the margins in the following order - top (1px), right (2px), bottom (3px), and left (4px).

{ padding-top: #; }, { padding-right: #; }, { padding-bottom: #; }, and { padding-left: #; }

Padding can be set individually by using one of the above properties, and, like margins, can be set as either percentages or specific distances.

{ padding: #; }

The shorthand version of the padding property can set up to four sides at once. See {margin: ####; } for more details.

Borders

{ border-top-width; #; }, { border-right-width: #; }, { border-bottom-width: #; }, and { border-left-width: #; }

Border widths can be set individually by using one of the above properties. They can only be set by using:

Specific values - such as 3px or 1cm<
Thin - creates a thin border.
Medium - creates a medium-width border.
Thick - creates a thick border.

The thickness of the borders using the keyword method (thin, medium, thick) depends on the browser and resolution settings.

{ border-width: ####; }

Like margins and padding, borders can be set in a shorthand property. Unlike margins and padding, however, you cannot mix keywords and specific width values on the same page.

{ border-top-color: [value]; }, { border-right-color: [value]; }, { border-bottom-color: [value]; }, { border-left-color: [value]; }, and { border-color: ####; }

Setting border colours is identical to both setting the margins and setting text or background information. If a border colour is not specified, then the colour named in the "color" property will be used.

{border-top-style: [style];}, { border-right-style: [style]; }, { border-bottom-style: [style]; }, { border-left-style: [style]; }, and { border-style: ####; }

There are 10 possible styles for a border.

None - No border is created. This style also forces any border-widths to 0. All browsers recognize this value.
Hidden - No border shows, but the border-width value doesn't change.
Dotted - The border appears as a series of dots. This line must be at least 2 pixels wide.
Dashed - The border appears as a series of line segments. This line must be at least 2 pixels wide.
Solid - The border appears as a solid line. All browsers recognize this value.
Double - The border appears as two parallel lines, with the total line-space-line width equalling the border-width value. A minimum width of 3 pixels is required.
Groove - The border appears to be carved into the page.
Ridge - The border appears to be raised from the page.
Inset - The area the border surrounds appears to be embedded in the page.
Outset - The area the border surrounds appears to be raised from the page.

If no border-style is selected, the style is assumed to be "none", and the border-width value will be forced to 0. Not all browsers recognize all these border styles. Some only recognize "none" and "solid". The shorthand version { border-style: [style]; } works in the same manner as the { margin: ####;} property.

{ border-top: [width/style/color]; }, { border-right: [width/style/color]; }, { border-bottom: [width/style/color]; }, and { border-left: [width/style/color]; }

It is possible to set all the information for a particular border in one property. For example, { border-top: medium dashed #0F0; } would create a green, dashed, medium-thickness top border. I have used this property shorthand to create the lines above and below the section headings in History On-Line.

{ border: [width/style/color]; }

If all of your borders are to be the same width, style, and colour, you can use this shorthand property to set all four sides at once. {border: 2px dotted #F00; } will put a 1 pixel, dotted, red border around the element. You cannot specify the individual border widths, styles or colours using this property. This is how I created the box model image at the start of the "Margins And Padding" section.

More Information

The information I've given you here is only a small portion of what CSS can do. Further information can be found in a multitude of places on the Internet, but my favourite places are: