Earthchronicle.com Home (Timelines, Ref. Shelf, Interactive)	Chronicle Subjects (Alphabetical or ECAN Codes)	I Have Something to Add!	Site Index	Reader's Guide
Have a Question? Ask Us! Have an update, suggestion, or found an error? Email Us!

CSS Reference Page

Warning. I make no claims that this page will be useful for anyone else. I've simply gotten sick of pounding the World Wide Web looking for the same usage details on a tag that I'd looked up the week before. So I've collected all the points "I" need to remember here. If you're interested in a tutorial on CSS, there are a number of good ones available on the web. I hope it proves useful for you, but I make no guarantees. With those caveats made feel free to browse away.

Embedded Styles

External Style Sheets

Inline Styles

margin-top:(-right,-bottom,-left) the size of the margin around the outside of the text.
padding-top:(-right,-bottom,-left) The size of the margin between the border and text.
color: sets foreground color (usually text in in hex codes (#00CC00)

background-color: sets background color (usually text in in hex codes (#000000)
background-image: sets an image in the background. List it's URL.
background-repeat: Tiles a background image repeat-x (horizontally), repeat-y (vertically), repeat (both), or no-repeat(default)
background-attachment: scroll or fixed.

border-style:(-bottom-style,-left-style,-top-style,-right-style) none,dotted,dashed,solid, double, groove, ridge, inset and outset.
border-color:(-bottom-color,-left-color,-top-color,-right-color) set as hexcode or transparent.
border-width:(-bottom-width,-left-width,-top-width,-right-width) thin, medium, or thick.

font-family: choose a specific type face, or one of five families (serif, sans-serif,cursive,fantasy,monospace).
font-size:
font-style: oblique, italic, or normal
font-weight: normal, bold, bolder, lighter.
font-variant: normal, small caps.

text-decoration: underline, overline, line-through
text-indent: absolute or percentage (Netscape 4 only)
text-align: right, left, center
vertical-align:baseline, top, bottom, text-top, text-bottom, middle, sub, super (IE 4 only)
line-height: 200% or 2 is double space, absolute, percentage (Netscape 4 only).
white-space: normal(like HTML), nowrap(use to wrap), pre (like <pre> tag)

Body

Sets the default CSS for the page.
SYNTAX: BODY { background-color:#FF0000; color:#FFFF00 }

TIPS: above is the syntax for the default styles for the page, but paragraphs P {...} or anything else works.

Back to Table of Contents

Class

Sets different possible styles for the same feature (like paragraphs.
SYNTAX:

TIPS: Set different styles in the external or embedded style sheet...

P { color:#FF0000; font-size:14pt }
P.largeprint { color#000000; font-size:20pt }

If you use the tag, you get the default paragraph style in 14pt. However, if you add the class= attribute, e.g. , then the paragraph will be in 20pt. You can set as many styles as you have the patience for.

Back to Table of Contents

<Link>

Used to call an external CSS.
LOCATION: Between the <head>...</head> tags.
SYNTAX: <link rel="stylesheet" title="mystyle" href="mystyle.css">

rel= Can be set to "stylesheet" or "alternate stylesheet". See Tips for an explanation.

title= Assigns a name to the style, but also controls whether visitors can use their own style settings.

href= Sets where to got to find the CSS for the webpage.

TIPS: When rel="stylesheet", it gives persistent styles. Persistent styles override your visitor's defaults. You can set rel="alternate stylesheet", it gives alternate styles. Your visitor must select the alternate style before it displays. You can set an intermediate level, default style which will be displayed automatically but the visitor can override it. Set rel="stylesheet" but add a title, like title="mytitle". Default is usually the preferred method since it displays the website like you want it but gives people the ability to adjust it. These may be people who just prefer their own style, but frequently they may be disabled and NEED special style settings to view your webpage (giant font sizes are one common change important to senior citizens). Default styles greatly increase your pages accessibility, and frequently provides the best balance between your needs as a designer and the needs of your visitors.

Back to Table of Contents

Span allows you to enclose an image, text (from a single letter or space to paragraphs), and sets a CSS style on it.
LOCATION: As desired, between the <body>...</body> tags.
SYNTAX:

style=(Warning, only latest browsers) Allows you to create inline CSS.

TIPS: Span allows you to make inline changes to the style sheet as you go. As such it is defintely the most flexible way to set CSS.

Back to Table of Contents

How They Put the "Cascading" in CSS.

Cascading describes the way style sheets are applied. The external *.css file is applied first, if present. The embedded styles are applied next, and the inline styles last. The last style sheet applied overrides the earlier ones, if there are any conflicts between what the different style sheets say to do (like applying different font colors for the same text). Therefore, inline styles trump all others and allow you to break any rules you set in an external or embedded style sheet. This is why can be such an important tag for certain webpages.

Back to Table of Contents

External Style Sheet

Sets the CSS for any webpage that calls it.
APPLICATION: BODY { background-color:#000000; color:#00CC00 font-family:Arial,
Helvetica, sans-serif } A:link { color:#0000FF }

TIPS: External Style sheets are the best choice in terms of your website mechanics, though this may not be your biggest concern. External sheets let you design one stylesheet that all your pages call, providing a consistent look. It also means your style information is all in one place, so if you want to change it later, you only have to make the change in one file, not every webpage you ever wrote. These are strong arguments for it. The other options are to set the styles inside the page. If you place the CSS information in the header, it's called an embedded style sheet, and if you set the CSS information on the fly those are inline styles.

Write the CSS as a text file (just like you do for an html file, but save it with the .css extension. Then include a <link> tag in the head of the file you want to use that stylesheet for. (EVERYTHING PICKS UP EXCEPT BODY, THE MOST IMPORTANT ONE! WHAT'S UP!?)

Back to Table of Contents

Embedded Style Sheet

Sets the default CSS for the page that contains it.
SYNTAX: ?????????????????????????????

TIPS: Embedded style sheets may have the least problems being displayed since the relevant sections which set styles are set off by comments. This means they are easily ignored by browsers that don't understand (FALSE, won't apply to IE6 if enclosed in comment tags). CSS If you place the CSS information in a file (it will have a .css extension), it's called an external style sheet, and if you set the CSS information on the fly those are inline styles.

Back to Table of Contents

Inline Style Sheet

Sets the CSS for the spanned section of text on the webpage.
SYNTAX: ?????????????????????

TIPS: Inline style sheets are the most flexible. They let you design the look of you page on the go, which is sometimes nightmare, sometimes handy. This is a strong reason for it. The other options are to set the styles in the header, which is called an embedded style sheet, and if you set the CSS information in an external file (.css), external style sheet.

Uses the tag.

Back to Table of Contents

Author:	chroniclemaster1	Date Received:	2005/11/24
Editor:	chroniclemaster1	First Date Posted:	2005/11/28
Proofreader:	chroniclemaster1	Last Date Revised:	2005/11/24
Researcher(s):	chroniclemaster1
Subjects:

Earthchronicle.com Home (Timelines, Ref. Shelf, Interactive)	Chronicle Subjects (Alphabetical or ECAN Codes)	I Have Something to Add!	Site Index	Reader's Guide
Have a Question? Ask Us! Have an update, suggestion, or found an error? Email Us!