<Home> | <HTML Tutorials> | <CSS Tutorials> | <Color Charts> | <Practice Area>

Basic Exercises
· Introduction
· ex. 1 - Inline CSS
· ex. 2 - Embedded
· ex. 3 - External



Join our mailing list to receive tips and tricks.
Name:

E-Mail:


  
CSS TUTORIALS: Ex. 3 - External Style Sheets

EXERCISE 3: CREATING EXTERNAL STYLE SHEETS :

External Style Sheets are the most efficient use of styles. All we need to do is create a file with our style properties, save the file with the .css extension, and put some coding into the html pages that will use the file.

I have creates an external style sheet called "external_style.css" and placed it into the same directory as the page you are reading now. To reference the style, we won't need to worry about anything else besides spelling the name of the file correctly.

The external style sheet file has the following properties:

.heading {font-family: arial; font-size: 16px;color:006699;font-weight:bold;}

.redheading {font-family: arial; font-size: 16px;color:ff0000;font-weight:bold;}

.bold{font-weight:bold;background-color:cccccc}

.italic{font-style:italic;color:006699;}

We will place coding into our page to link to the external style sheet, then use inline style references to that file whenever we want to use it's properties.

<!---Type or copy the following code below---> (To copy the highlighted coding below, just highlight it with your mouse, go up to the top of your browser and click on Edit, then click on copy. Finally, highlight the text inside of the textarea box below and choose, edit, then paste.)
I suggest you type the tags out instead of copying them. Trust me; you will learn more if you do!

<html>
<head>
<title>Fromthepen.com: Online Web Site Tutorials</title>
<link rel="stylesheet" type="text/css" href="external_style.css">
</head>
<body>
<h1 class="heading">Headline created with External Styles</h1>
<span class="bold">Now</span> is the time for all good <span class="italic">men/women</span> to come to the aid of their country. </body>
</html>




( After you submit, close the window that will pop up, and read below )
NOTE: CONGRATULATIONS! YOU NOW KNOW HOW TO USE EXTERNAL STYLE SHEETS!

Notice the link tag used to to reference our external style sheet. Once that tag is in place, the process of using the individual styles is like that of inline styles or embedded styles.

That is the gist of CSS folks! It truly is simple, and fun, to learn and use. To find out much more about styles, I suggest you read the book called "DHTML For The World Wide Web" by Jason Cranford Teague.



END OF EX. 3 - CREATING EXTERNAL STYLE SHEETS

<-- Back to Exercise 2: Creating Embedded Styles Fundamentals



Home | HTML Tutorials | CSS Tutorials | Color Charts | Practice Area
Copyright 2003 FromThePen.com All Rights Reserved