Introduction to CSS

This tutorial is intended as a very basic introduction to Cascading Style Sheets (CSS) and should provide enough information to allow you to experiment with a few of your own styles. A style sheet is made up of style rules that tells a browser how to present a document. With CSS you can easily change colors, fonts, and other page properties in one place and one style sheet can change it throughout your site. There are three ways of using CSS: linked, embedded and inline.

What style will be used when there is more than one style specified for an HTML element? Styles will "cascade" into a new "virtual" style sheet by the following rules, where number four has the highest priority:
1. Browser default
2. External style sheet (linked)
3. Embedded style sheet (inside the <head> tag)
4. Inline style (inside an HTML element)

So, an inline style has the highest priority and will override a style declared in an embedded style sheet, in an external style sheet, or in a browser.

Linked Style Sheets

If you have several pages using the same CSS, you should link your style sheet to your documents. The <link> tag is placed in the document <head>.

<link rel="stylesheet" type="text/css" href="styles.css" title="mainstyles">

External (linked) style sheets should not contain any HTML tags like <head> or <style>. The style sheet should consist merely of style rules or statements. You can create a style sheet in Notepad or Simple Text, but make sure you save your document with the .css extension.

p {
  font-size: 13px;
  color: #000000;
  text-indent: 12px;
  font-family: arial, helvetica, sans-serif;
  line-height: 15px;
  text-align: justify;
  margin-top: 0px;
  margin-bottom: 6px;
}
.highlight {
  background-color: #f5f364;
}

Embedded Style Sheets

Using an embedded style sheet should be used when a single document has an unique style. This element is placed in the document <head>, and it contains the style rules for the page.

The style sheet below tells the browser that when using the <p> tag that the text will be formatted using those defined rules. Included also in the style sheet is the class "highlight".

<style type="text/css">
<!-- 
p {
  font-size: 13px;
  color: #000000;
  text-indent: 12px;
  font-family: arial, helvetica, sans-serif;
  line-height: 15px;
  text-align: justify;
  margin-top: 0px;
  margin-bottom: 6px;
}
.highlight {
  background-color: #f5f364;
}
 -->
</style>

Inline Style Sheets

A third way to use CSS is inline CSS. Inline CSS uses the style="x" attribute. The style attribute may be applied to any body element (including <body> itself). The attribute can use any number of CSS declarations, where each declaration is separated by a semicolon.

<p style="font-size: 13px; color: #000000; text-indent: 12px; font-family: arial, helvetica, sans-serif; line-height: 15px; text-align: justify;">Your copy here.</p>

The only way you should use CSS in your auctions, "me" page or store fronts, is to use inline styles. Since embedded and link style sheets should be contained in the <head> portion of the HTML document.

To Top TO TOP