How to Create an External Style Sheet Using Cascading Style Sheets (CSS)

Cascading Style Sheets (CSS) instructions are applied to HTML coding in web pages to format style. One method of applying CSS to web pages is by applying eternal style sheets.

Difficulty: Moderately Challenging

Instructions

Things You'll Need:

• A basic knowledge of HTML coding

1. 
   Basic web page displayed

   Create a basic web page. A basic web page includes HTML, HEAD, TITLE, BODY tags. These tags need ending tags.

2. 
   Basic web page with content

   Add content to your basic web page. In our example we will be using a paragraph tag to add content. The paragraph tag is used to provide a block of text on a web page.

3. 
   Empty external style sheet

   Create an external style sheet named 'style.css'. The example provided is an empty text file with a comment statement at the top of the page. A text editor can be used to modify this file.

4. 
   External style sheet with a sample style declaration

   Create a style declaration in your external style sheet that assigns the color green to text using a class named 'mycolor'. A dot is placed in front of the class declaration name to activate the class. A class declaration permits style to be assigned to one or more text element. Assign class names that are meaningful to use but do not use underscores (e.g., my_color).

5. 
   External style sheet applied to web page

   Using LINK apply the external style sheet to your web page.

6. 
   A green color is applied to text in the web page

   Apply class mycolor to a word in the paragraph on the web page. The color 'green' will be applied to the word 'example'.

Tips & Warnings

• The SPAN tag is used to provide font formatting attributes from CSS instructions. The SPAN tag has been applied to the word 'example'. Only this text will appear 'blue' in color. The SPAN tag also has an ending tag.
• Other font style declarations also include font-size, font-weight, font-style, and text-decoration. To find out about these and other aspects of CSS styling, review tutorials provided through http://www.w3.org/Style/CSS/.
• Using external style sheets on web pages provides the capability for web developers to change styles across more than one page simultaneously permitting easier and quicker website maintenance.
• This document only provides information regarding one aspect of CSS using a specific example. Begin experimenting with different CSS instructions by using examples provided by tutorials.
• Using CSS is a powerful method to transform the appearance of text and objects on web pages. Web page display may vary depending on which web browser is used to display the results of CSS instructions.

Resources

• Working with in-line CSS styles
• Working with embedded CSS styles
• CSS on W3C

[tylamac]

on 1/9/2009 I'm bookmarking this one. I'm just learning to build web pages and I'm going to need this.