..

Style Sheet Cheat Sheet

Topic/Code Result

Embedding a Style Sheet

<HTML>
<HEAD>
  
  <STYLE TYPE="text/css">
  <!--
  /* You can add comments in the STYLE
     section by bracketing the comment
     text with slash-asterisk and
     asterisk-slash, as shown here.
     It will not appear in the browser.
     Elsewhere in HTML, use the
     <!-- comment here --> style.
  */
  BODY, TD {
    font-size: 9pt;
    font-family: arial;
  }
  .larger1 {
    font-size: 14pt;
  }
  -->
  </STYLE>
  
</HEAD>

<BODY>

Sample text with some of it
<span class=larger1>bigger</span>.

</BODY>
</HTML>

Embedding a Style Sheet

Sample text with some of it bigger.

Linking to an External Style Sheet File

Contents of mystyles.css:
   BODY, TD {
     font-size: 9pt;
     font-family: arial;
   }
   .larger1 {
     font-size: 14pt;
   }
Link to mystyles.css:
<HTML>
<HEAD>
<LINK REL=stylesheet
    HREF="mystyles.css"
    TYPE="text/css">
</HEAD>
<BODY>
Sample text with some of it
<span class=larger1>bigger</a>.
</BODY>
</HTML>

Linking to an External Style Sheet File

Sample text with some of it bigger.

Inserting a Style Inline

<HTML>
<BODY>
<H1 STYLE="color: orange;
    font-family: impact">
A colorful heading
</H1>
<P STYLE="background: yellow;
    font-family: courier">
A colorful paragraph
</P>
</BODY>
</HTML>

Style Precedence

The basic order is this:
  1. Inline styles
  2. Embedded styles
  3. Linked styles
  4. Imported styles
  5. Default browser styles
Also, more precise rules win over broader. For example, BODY means "just about any tag found between <body> and </body>, and <P> is an example of a BODY tag. The following code says to make all of the BODY green, but P is more precise and therefore all <P> text would appear red.
  BODY { color: green; }
  P { color: red; }
Also, later repeats win over earlier versions. Therefore, P would end up red in this example:
  P { color: green; }
  P { color: red; }

Inserting a Style Inline

A colorful heading

A colorful paragraph

Creating Styles Per Unique Html Tag or for Any Tag

Whether you put a tag name before the dot determines whether the classname after the dot can only be used by a particular tag or is generally available for any tag.


Example 1: These styles would only work for <P> tags:
 P.first { color: red; }
 P.second { color: yellow; }
 P.third { color: blue; }
Sample HTML:
 <P CLASS="first">First paragraph</P>
 <P CLASS="second">Second paragraph</P>
 <P CLASS="third">Third paragraph</P>

Example 2: This class can be used on a tag or in a SPAN:
 .larger1 { font-size: 14pt; }
Sample HTML:
 <H1 class=larger1>This heading
     is 14 pt</h1>
 <P class=larger1>This paragraph
     is 14 pt.
 <P>This <span class=larger1>word</span>
     is 14 pt.

Creating Styles Per Unique Html Tag or for Any Tag


Example 1:

First paragraph.

Second paragraph.

Third paragraph.


Example 2:

This heading is 14 pt

This paragraph is 14 pt.

This word is 14 pt.

Combining Tags in Class Definitions

To make bold text red only when that bold text is in the context of a <P> paragraph:
P B { color: red; }
Sample HTML:
 <p>This is <i>italic and red</i>.
 <h3>This is just <i>italic</i>.</h3>

Combining Tags in Class Definitions

This is italic and red.

This is just italic.

font-family

List several font family names, starting with more exact and ending with more generic choices. The first match found for the user's computer is the one used.

If there are several style attributes including font-family, place font-family last so that IE3 processes the overall style correctly.

Common names across computers:

  serif (probably Times)
  sans-serif (probably Arial or Helvetica)
  monospace (probably Courier)

Inline example:

<!-- If the user's browser does not
     have Gill Sans, just show the
     computer's standard serif font.
-->
<P STYLE="font-size: 14pt;
    font-family: 'Gill Sans', serif">
Text here.</P>

font-family

Inline example:

Text here.

font-size

Options:

  pt, em, px, in, cm, mm;
  xx-small, x-small, small, medium, large,
      x-large, xx-large;
  smaller, larger;
  %
as in:
  font-size: 10pt;
  font-size: x-small;
  font-size: 300%;
Inline example:
  <p style="font-size: 8pt;">Test 8
  <p style="font-size: 15pt;">Test 15

font-size

Test 8

Test 15

font-style

Options:

  italic
  oblique
  normal
as in:
  P { font-style: italic; }
<p style="font-style: italic;">All italics

font-weight

All italics

font-weight

Options:

  bold, normal;
  /* lightest through boldest */
  100 through 900;
  bolder, lighter
as in:
  P { font-weight: bold; }
  P { font-weight: 700; }
  <p style="font-size: 15pt;
      font-weight: bold;">All bold
  <p style="font-size: 15pt;
      font-weight: 700;">Semi-bold

font-weight

All bold

Semi-bold

text-transform

Options:

  /* forces entire text to be cap'd */
  uppercase
  /* forces entire text to be low'd */
  lowercase
  /* forces starts of words to be cap'd */
  capitalize

text-transform

text-decoration

Options:

  underline
  line-through
  none
Example:
<p style="text-decoration:
      line-through;">Crossed out</p>

You can control the three separate aspects of an HREF, as in:

  /* If not yet visited,
     show no underline. */
  A:link {
    text-decoration: none;
  }
  A:active {
    text-decoration: none;
  }
  /* Once visited, cross out the link. */
  A:visited {
    text-decoration: line-through;
  }

Think of these as predefined class names, where A:link is for normal, unvisited links; A:active is for link appearance while you're clicking and A:visited is for previously visited links.

Inline example (style applies to all aspects of HREF):

  <A STYLE="text-decoration: none"
       HREF="http://www.yahoo.com/"
       target="_new">A link with
       no underline</A>

text-decoration

Crossed out

font

The font property is a kind of shorthand for a few of the other properties. It's a way of assigning font-size, line-height, and font-family all at once.

Example:

  LI { font: 12pt/16pt courier }

This rule defines <LI> text as 12 points in size, 16 points in line height, and Courier. If you use font, you must always set the font size and font face, but the line height is optional. Make sure the values are in the exact order you see above.

font

result

word-spacing

For adding additional space between words. Distance/size units are same as for font-size.

word-spacing

result

letter-spacing

For adding additional space between letters. Distance/size units are same as for font-size.

letter-spacing

result

line-height

For setting spacing between baselines of adjacent lines.

line-height

result

text-align

Options: left, right, center, justify

text-align

result

vertical-align

Options: top bottom text-top text-bottom baseline middle sub /* subscript */ super /* superscript */

vertical-align

result

text-indent

For indenting the start of a paragraph, for example.

text-indent

result

Padding then Border then Margin (PB&Margin)

Around an element is padding, then a border, then a margin.

margin-top, margin-left, margin-bottom, margin-right

padding-top, padding-left, padding-bottom, padding-right

border-width


All sides same amount.

border:thickness style color

border:1px dotted #bb9;

border-top-width, border-left-width, border-bottom-width, border-right-width

border-color

Use plain words like green or #RGB like #FFDD44.

border-style

Options: solid double dotted dashed groove ridge inset outset

float

Ability to flow text around the specified element. Options: left, right (both?) Example: <h1 style="float: left; margin-right: 30px">Test</h1> In a narrow column, Test appears big, and this long text is 30 px to its right, wrapping and indenting as needed until it can slip under the tall H1. Note: If the element is an image, align=left will have the same result on the text after it: <img src=blah.gif align=left>

clear

Use this on an element following a 'float' element to force it to move down after the float element, i.e. to not be floated by the prior element; Example: P { clear: left }

Margins, Padding, Borders

result

Colors and Images

color

This colors the element (its 'foreground'). Options: #RGB (e.g. #FFDD22) or aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow.

See http://users.rcn.com/
giant.interport/COLOR/1ColorSpecifier.html

for sample colors plus their #RGB equivalents.

background-color

This colors the background of the element. Another option: transparent.

background-image

An image to be repeated as the background of the element; recommendation: combine with background-color in case there are transparent parts of the image

Option: url(<urlOfImage>)

Example: P { background-image: url(background.gif)

background-repeat

Options: no-repeat (just show once), repeat-x (repeat only horizontally along the top), repeat-y (repeat only along the left), repeat (repeat both horizontally and vertically)

background-attachment

Options: fixed, scroll

fixed: fixes an image behind the element so that scrolling has no impact on the image

scroll: normal, expected scrolling behavior

background-position

The upper left corner location of the background image. Options: top, bottom, left, right, center (can be combined) x and y distances from upper left corner of element (e.g. background-position: 70px 10px) % from upper left (like x and y)

background

A means of combining several of the background options. Example: You can define background color, image, tiling method, scrolling versus fixed status, and position: P { background: url(/webmonkey/98/15/stuff3a/background.gif) #CCFFCC repeat-y top right } Result: text with CCFFCC background color and with gif repeating vertically, aligned at top right.

Colors and Images

result

Positioning Elements

General advice (to deal with IE3 problems): apply position styles to <DIV>s wrapped around the elements you wish to position.

position

Option: absolute plus left and top (relative to upper left corner of browser) Can use any of the font-size measurements, incl percentage. Example: H4 { position: absolute; left: 100px; top: 43px; } relative plus left and top (relative to natural position of element in document)

width

Limits how wide the element can be; can only be used with absolute-positioned elements.

height

Like width, but vertical; buggy in browsers.

overflow

How to present text that does not fit within the width/height you specified. Options: visible (display all...ignore height limit) auto (clip and provide scrollbar only if needed) scroll (always display a scrollbar, even if not needed) hidden (clip off whatever goes "over the line"...info lost!)

visibility

Whether to show element, while preserving the space for it; IE only? Options: visible, hidden

z-index

Combine with position to specify the which overlapped element is on top. Higher z-indexed elements (e.g. z-index: 10) appear on top of lower z-indexed elements.

Positioning Elements

This is illustrated in every case on the right. Each h2 heading in the left column is in the code of the right column...just with 'style="visibility:hidden"', thus beginning this text at the same level as the text underneath the left column's heading.

Advice Regarding Browsers

Trick No. 1: Use Styles on Similar HTML Tags

If you want to control the level of boldness using font-weight, why not use the <B> tag for applying the style? That way, the text will be bold in older browsers as well.

Try to find corresponding HTML tags for your CSS declarations, so that you'll end up getting at least some of the same effects in older browsers that you're getting in the newer ones.

Trick No. 2: Double Up Styles with HTML Tags

If you want to make absolutely sure a paragraph is blue, use both CSS and HTML to make it so. Double up with both color: blue and <FONT COLOR="blue">. If you want something centered, use both text-align: center and <CENTER>. You get the idea.

Trick No. 3: Make Unwanted Elements "Invisible"

If you've got a huge decorative font symbol, for example, that looks tiny and silly in an older browser, use <FONT COLOR> to give it the same color as the background, thus making it vanish in older browsers. But the CSS rule will still color it red (or whatever) for newer browsers, so people with newer browsers will still see your cool effect.

Making your pages degrade well isn't just something to spend five minutes on at the end. It's something to keep in mind during the entire design process, as you initially create your CSS rules and plan out your goals. And, as always, the most important three words are: test, test, test.

See also M u l d e r's S t y l e s h e e t s T u t o r i a l.