CSS Resources

How to Use HTML and XHTML: Visually in Full Color
This is a reference for beginners, the bright colored graphics and humorous content makes the information a lot more interesting and is a departure from the standard black and white of programming books.

An exerpt from page 28 on background images.

How-To / Code Examples

There are three types of style sheets: external, embedded, and inline. External style sheets override embedded style sheets and inline styles override both external and embedded style sheets.

• External style sheets are their own separate file (the .css file) which is linked to in the header of each page of the site. The link looks like this:
  <link rel="stylesheet" href="htmlcss.css" type="text/css">
  An example of an external style sheet (the one for this site, view the source)

• Embedded style sheets go between the <style> and </style> tags in the header. An example of an embedded style sheet is in the source for the style play example also used below for the links examples (view the source).

• An example of an inline style is:
    <p style="font-family: Courier; color:blue; "> This text is Courier and it's color is blue. </p>

  Which looks like this on the page:

  This text is Courier and it's color is blue.

• Lets say you had the CSS style p.Stylea (using either an external or embedded style sheet) for:
  <p class="Stylea">This text is Arial 12 point, red color and underlined.</p>

  If you were to do this in HTML you would have to type this every time (instead of just <p class="Stylea"> </p> with CSS):

  <font face="Arial" size="12px" color="red"><u>This text is Arial 12 point, red color and underlined.</u></font>

  To get this same result:

  This text is 12 point, red color and underlined.

Classes & Styles

• selectors
• properties
• values
• classes
• styles

Together, selectors, properties, and values make up a rule. Rules look like this: selector   { property: value} Rules are what tell how the element will be affected.

{background-color: #FFFF80}
Other values you may use include: background-image, background-repeat, background-position

{background-color: url("trees.gif")}
Put the image name in quotes, url stays as url, don't change it to the url you're using. You may also use repeat and norepeat to indicate tiling (image repeats over the entire background) or no tiling (only displays once). For example: {background-color: url("trees.gif") ; repeat}

{border: thick dotted blue}
Other values you may use include: none, thin, medium, thick, solid, double, groove, ridge, dotted, dashed

{color: blue}
Color name or hexidecimal. Click here for a list of colors you can refer to by name.

{font-family: "Arial"}
Put font name in quotes, use semicolons to separate font names when giving more than one choice. I'd reccomend giving more than one choice incase a user does not have the font you choose to ensure users can see your page like you want them to.

{font-size: 200%}
Other values you may use include: xx-small, x-small, medium, large, pecentage of default text size, px (pixel), pt (point)

{font-style: italic}
Other values you may use include: italic, oblique, normal

{font-weight: bold}
Other values you may use include: normal, bold, bolder, lighter, 100-900 with 400 as normal intensity

{margin-left: 20px}
Other values you may use include: margin-right, margin-top, margin-bottom

{padding: 15px}
Other values you may use include: padding-left, padding-right, padding-top, padding-bottom

{text-align: center}
Other values you may use include: center, left, right, justify

{text-decoration: underline}
Other values you may use include: none, underline, overline, line-through, blink

{text-indent: 25px}
Other values you may use include: pixels, positive, or negative values

{text-transform: uppercase}
Other values you may use include: none, uppercase, lowercase, capitalize

A Tag

• A:active {color:red}
• A:hover Affects how a link looks when the mouse is placed over it.
• A:link Affects how a link looks
• A:visited Affects how a visited link displays on the webpage.

IMG Tag

{width: 300px; height: 200px; float: left/right}
Other values you may use include: baseline, text-top, text-bottom, middle, top, bottom