Share this Page URL

Chapter 14. A Beginner's Guide to Style ... > Three Sheets to the Web: Style Sheet... - Pg. 161

A Beginner's Guide to Style Sheets 161 Words from the Web Style sheet mavens call the <STYLE></STYLE> method an embedded style sheet. Note, too, that I tossed in the HTML comment tags, for good measure. This hides your style defini- tions from older browsers that don't know a style sheet from a rap sheet. This method is best when you want to apply only a particular set of style definitions to a single page. Method #2: Linking to an External Style Sheet Style sheets get insanely powerful when you use an "external" style sheet. This is a separate file that contains your style definitions. To use these definitions within any web page, you simply add a special <LINK> tag inside the page header. This tag specifies the name of the external style sheet file, and the browser then uses that file to grab the style definitions. Here are the steps you need to follow to set up an external style sheet: 1. 2. 3. Use your favorite text editor to create a shiny new text file. Add your style definitions to this file. Note that you don't need the <STYLE> tag or any other HTML tags. Save the file in the same directory as your HTML files, and use a "css" extension (for example, "mystyles.css"). This helps you remember down the road that this is a style sheet file. (The "css" stands for cascading style sheet.) For every page in which you want to use the styles, add a <LINK> tag inside the page header. Here's the general format to use (where filename.css is the name of your external style sheet file): <LINK REL="stylesheet" TYPE="text/css" HREF="filename.css"> 4. For example, suppose you create a style sheet file named mystyles.css and that file includes the following style definitions: H1 {color: red} TT {font-size: 16pt} You'd then refer to that file by using the <LINK> tag shown in the following example (see ssex- tern.htm on the CD in this book): <HTML> <HEAD> <LINK REL="stylesheet" TYPE="text/css" HREF="mystyles.css"> </HEAD> <BODY> <H1>This Heading Will Appear Red</H1> <TT>This text will be displayed in a 16-point font</TT> </BODY> </HTML>