Comp25: External Style Sheets

What's an External Style Sheet?

CSS Examples

HTML Dog's Guide Beginning CSS: More reading

Cascading Style Sheets: An interactive tutorial for beginners - More Reading

An external style sheet lets you create a single style sheet for use throughout the entire website.

Advantages to External Style Sheets

Using external style sheets has a number of advantages:

A consistent look and feel from page to page throughout the entire site
Changing your mind about a style is easy to implement -- only change it once!
Pages load faster

What Can Be Changed?

One of the greatest things about using style sheets is that almost every element can be changed. Here's a few just to get you thinking creatively:

The <body> element affects everything on the entire page. You can apply a border to the page, a background color or image, a margin. If you specify a font for the <body> element it will affect everything on your page unless otherwise specified.
The <h> elements can all be changed and you can achieve a great layout by making your headings stand out. Try applying a background color to the <h1> element to really get attention.
The <p> element will easily let you specify line spacing and margins.
You can change the <hr> element to improve the way your horizontal rules appear on the page.
If you are using list elements like <ul>, <ol>, and <li> you can change their appearance such as the spacing between lines, the indenting, and the graphic used for bullets.
Table elements such as <table> and <td> can be designed using style sheets.

Creating a External Style Sheet

Just like an HTML page, external style sheets are plain text. The syntax is exactly like an internal style sheet without any HTML in the way. The entire text file might look like this:

body {
background-color: green;
font-face: 'Trebuchet MS';
}

h1 {
font-weight: bold;
font-size: 150%;
}

p {
line-height: 125%;
}

And that's it. External style sheets do not have a <style> element, as with inline HTML styles.

Style sheets are always named with the "css" extension. A common filename is "styles.css". CSS stands for Cascading Style Sheets

Linking to a External Style Sheet

In order to take advantage of your new style sheet, you must link every page in your website to it. This may sound tedious at first, but remember by doing this once you are saving yourself a great deal of time in the future.

You will need to enter the following code into the <head> element of your pages (be sure the .css filename matches your style sheet filename.

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

Just like images, the CSS file must be in the same folder as the website pages. You must also be sure to reference it by its exact filename and extension.

Font and Text Styles

One of the easiest things to change using style sheets is the way that text appears. Here are a few properties that you'll want to familiarize yourself with. Try them all and really get the hang of styles.

color

This changes the color of text. It also changes the color of a <hr> element. You generally use it in the following ways:

p { color: blue }

hr { color: rgb(15,58,124) }

text-decoration

This deals with how the text is "decorated" with lines:

p { text-decoration: underline }

p { text-decoration: overline }

p { text-decoration: line-through }

Decorations can also be combined like this:

p { text-decoration: underline overline }

letter-spacing

If you want to space out the letters in your text, use this property. It's great for headings!

h1 { letter-spacing: 2em }

p { letter-spacing: -0.25em }

font-family

Changing the font couldn't be easier. You just need to know the font's name.

p { font-family: Arial }

h2 { font-family 'Comic Sans MS' }

WEB SAFE FONTS!!

There is one major caveat regarding fonts: you must use fonts that are common on everyone's computer. If you use a font that someone does not have it will show as Times New Roman (or some other generic font). View a list of "web safe" fonts. You can specify an "order of preference" in your font-family that basically says if the first font doesn't exist, try the second, or the third, and so on. Here's how that is done:

p { font-family: 'My Bizarre Font', 'Century Gothic', Arial }

Note that font names which span multiple words must be enclosed within apostrophes.

If you absolutely have to use a particular font, consider making a graphic in an image editor with the words you want and embed the graphic as an <img>. This too has its side effects, though, such as poor accessibility and slower page load time.

font-size

You will no doubt want to change the size of letters on the screen. This is especially true for headings.

h1 { font-size: 150% }

h2 { font-size: 125% }

a { font-size: 90% }

By specifying font size as a percentage, you allow the user to adjust their display through their browser preferences (on Internet Explorer, under View and Text Size). This is important to having an accessible website for those who may have difficulty reading small text.

font-style

Basically this lets you specify italic text.

h1 { font-style: italic }

font-weight

This lets you specify how bold text appears.

p { font-weight: bold }

For more help on fonts check out this fantastic website.

Paragraph and Margin Styles

text-align

If you want to change the alignment of text within its container, use this property. When combined with other properties like background-color or border, it can create a great effect on headings.

h1 { text-align: right }

hr { text-align: center }

margin

Specifying the margin of an element creates empty space around that element. This takes some trial and error.

h1 { margin: 5em }

The above example creates the same space on all four sides of the element you are modifying.

margin-left (-right, -top, and -bottom)

This allows you more control over the four sides of an element:

p { margin-left: 1em }

h1 { margin-top: 2em }

In this example we have specified that all paragraphs will be indented on the left by 1em, and all <h1> elements will have a 2em gap separating them from whatever might be above them..

padding

Padding is very similar to margins, but there is a very important distinction. When you use margin, you are providing space on the outside of the element. Padding, on the other hand, specifies space in the inside of the element. This is best demonstrated when you have an element with a background color and/or border.

p { padding: 1em;
    margin: 1em;
    border-color: red;
    border-style: solid;
    background-color: blue }

padding-left (-right, -top, and -bottom)

Much like the margin property, you can specify the padding on all four sides individually.

td { padding-left : 0.5em;
padding-right: 0.5em }

The <td> element is used when creating tables.

list-style-type

By default, ordered lists count in cardinal numbers (1, 2, 3...) and unordered lists display round bullets. You can change this behavior using the list-style-type property.

ol { list-style-type: lower-roman }

ul { list-style-type: square }

Choices for an ordered list include: lower-roman (i, ii, iii...), upper-roman (I, II, III...), lower-alpha (a, b, c...), upper-alpha (A, B, C...), and decimal (1, 2, 3...).

Choices for an unordered list include: circle, square, and none.

list-style-image

If you really want to make things more exciting, consider adding images as bullets instead of the choices above.

li { list-style-image: url(bullet.gif) }

Just like an <img> tag, make sure that the file you are referencing is in the same folder as your HTML file and that you are using exact same filename with extension.

Want to find a great bullet image? Try Google Image Search and change the search query for something specific to what your site is about.

line-height

This property changes the spacing between lines of a paragraph. You might want to double-space your <p> elements, for example.

p { line-height: 150% }

p { line-height: 75% }

100% is the default. 200% would be double-spaced. A number smaller than 100% can make the text difficult to read but will create an interesting layout.

This property has very little effect if the element does not wrap to multiple lines.

Remember that this property controls the spacing within a paragraph. For spacing between neighboring paragraphs use the margin property (or margin-top and/or margin-bottom).

Border Styles

border-style

Every element can have a border applied to it, and you can specify the style of that border through this property.

p { border-style: solid }

Values for border-style include: dotted, dashed, solid, double, groove, ridge, inset, and outset.

Borders are black unless otherwise specified.

border-color

As we have already covered, you can change the color of the border of any element.

body {
border-color: green;
border-style: solid
}

h1 { border-color: rgb(123,45,67); border-style: dashed }

For some interesting effects, apply this property to the <body> tag, <hx> tags, or <table> and <td> tags.

Remember that for border-color to work, you must also specify a border-style.

border-width

Want your border to be thicker? Use this property.

hr {
border-color: orange;
border-style: groove;
border-width: 5px
}

Background Styles

background-color

You can change the background color of any element, including <hx> and <body>.

p { background-color: lavender }

This also works with <table> and <td> and <blockquote>. In fact, each of the examples you see here have the <blockquote> background-color specified to a light gray.

background-image

If there is a picture you would rather use as a background instead of a color, you can load it with this parameter.

body { background-image: url(back.jpg) }

This isn't limited to the <body> element. It can create a great effect to give a <td> or <table> a particular background image, or a <h1>.

By default, the image will "tile" horizontally and vertically throughout the entire element you attached it to.

Generally you should specify both a background-image and a background-color. This will help the appearance of the page while the image is still loading, and give you a backup in case the image does not load or if the user has images turned off.

background-attachment

Normally a background image stays in place with the page when the user scrolls up and down. You can change this behavior and make the background "float" behind the element.

body {
background-image: url('marble.jpg');
background-attachment: scroll;
}

You will typically apply this only to the <body> element.

background-repeat

Normally a background will "tile" both horizontally and vertically. You might want the image to only tile one way or the other, or not tile at all.

body {
background-image: url('sunset.jpg');
background-repeat: no-repeat;
}

The above example will disable tiling for the background image. As an alternative you can specify repeat-x or repeat-y to only let the image tile horizontally or vertically, respectively.

cursor

One of the more catchy properties you can change is the cursor property, which displays the specified cursor when the user's mouse is hovering over that particular element.

img { cursor: help }

Applying this property to the body will affect the entire web page. It might be interesting to apply it to just the <img> or <a> elements. Some cursor choices are: crosshair, default, pointer, move, wait, progress, all-scroll, no-drop, not-allowed, and help.

Tables

Styles can control the appearance of tables, table headers, rows, and cells (td):

table {

background-color: blue;

border:5px yellow solid;

}

table th{

background-color: red;
color: white;
font-family: 'Comic Sans MS';
}

table td{

padding: 0.5em;
border-top: '1 solid red';
font-family: 'Comic Sans MS';
font-size:14px;
color:red;
font-weight:bold;
text-transform:capitalize;
cursor: crosshair;
}

Anchor tags - Special Note about Links

We haven't talked much about the <a> tag throughout this reading until now. You can use all of the described style properties in conjunction with the <a> tag, however this tag has something that makes it very special.

Because the <a> tag can change appearances when it is hovered over or clicked on, each of those states (called psuedo classes) should be defined in your style sheet. Consider this example:

a:link {
color: red
}

a:visited {
color: gray
}

a:hover {
color: blue;
text-decoration: underline overline;
text-weight: bold;
}

With this in your style sheet, all links will appear with white lettering. If the user has already visited the page that the anchor links to, then it will appear in grey. And, when the user hovers the pointer over the link it will change to bold, blue text with lines above and below the words.

You can even change the background color or border of the <a> element to react when it is hovered-over.

This order of priority is said to cascade from external to internal to inline. Thus, we call the entire concept Cascading Style Sheets (CSS).

Sample Style Sheets

Style Sheet Sample 1

Style Sheet Sample 2