HTML/CSS Help - How do I set up a Linked Style Sheet?

This year I've decided to take an HTML class, but I'm having trouble with one of the assignments... I need to make a linked style sheet, but it doesn't seem to be working. I'm using TextWrangler and I set up the CSS sheet using the format ".CSS"... So that isn't the problem. Any advice? Thanks!!

HTML/CSS Help - How do I set up a Linked Style Sheet?
There are two ways to link your external CSS with your HTML document. Link the CSS Style Sheet with href attribute or use import method within the style tag. You should also know the word cascading means flow. So, link method and import method has different flow precedence. Fallow this recipe:





1. Create a HTML document.





2. Understand media types. Example: screen - computer screen and print - HTML page in print. You could include both or more. If you include both media types. The user who uses computer screen to view your HTML page with a browser will receive information of your media type and display only the style of media type with screen. However, when the user click on print the browser will choose the media type of print. So when users print your page the page is display in another style. It might be style suitable for print documents. Example:





%26lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-...


%26lt;html xmlns="http://www.w3.org/1999/xhtml"%26gt;





%26lt;head%26gt;


%26lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /%26gt;


%26lt;title%26gt;CSS%26lt;/title%26gt;





%26lt;!-- CSS for Computer Screen --%26gt;


%26lt;link href="sitecss.css" rel="stylesheet" type="text/css" media="screen" /%26gt;








%26lt;!-- CSS for Print --%26gt;


%26lt;link href="printecss.css" rel="stylesheet" type="text/css" media="print" /%26gt;








%26lt;!-- Import CSS --%26gt;


%26lt;style type="text/css"%26gt;


%26lt;!--


@import url("additionalcss.css");


--%26gt;


%26lt;/style%26gt;


%26lt;/head%26gt;





%26lt;body%26gt;


%26lt;/body%26gt;


%26lt;/html%26gt;





Remember, if your print CSS has the same style with your screen CSS. You won't be able to see the difference when you click on print. For now you could make a simple change by making the background color of your print CSS red and your screen CSS background color to blue. So when you click print the background color of your page should be red instead of blue.
Reply:Put this in the %26lt;head%26gt; area of the web pages you want the stylesheet linked to:





%26lt;link href="mystylesheet.css" rel="stylesheet" type="text/css"%26gt;





bear in mind that the path to "mystylesheet.css" will change if your HTML files are in different folders than your css file.
Reply:Link the style sheet in the %26lt;head%26gt; tag... put it after the %26lt;title%26gt;...%26lt;/title%26gt; and before the closing %26lt;/head%26gt;. I wrote an example below.








%26lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"%26gt;


%26lt;html%26gt;


%26lt;head%26gt;


%26lt;meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"%26gt;


%26lt;title%26gt;Linked Styles%26lt;/title%26gt;


%26lt;link href="styles.css" rel="stylesheet" type="text/css"%26gt;


%26lt;/head%26gt;





%26lt;body%26gt;


%26lt;/body%26gt;


%26lt;/html%26gt;
Reply:No idea about TextWrangler, but you need this line:





%26lt;link rel="stylesheet" type="text/css" href="yourstylefile.css"%26gt;





It needs to be in the %26lt;head%26gt; part of the code, I usually tuck it right under the %26lt;title%26gt;. The path can be local, relative or fully qualified, i.e.


yourstylefile.css


/styles/yourstylefile.css


http:// www.yoursite.com/yourstylefile.css


^ space added after the http to stop advertising a web hosting company
Reply:In the %26lt;head%26gt; section of your html document:





%26lt;link rel="stylesheet" type="text/css" href="style.css" /%26gt;
Reply:try this








%26lt;html%26gt;


%26lt;head%26gt;


%26lt;link rel="stylesheet" type="text/css" href="styles.css" /%26gt;


%26lt;/head%26gt;





%26lt;body%26gt;


%26lt;h1%26gt;I am formatted with a linked style sheet%26lt;/h1%26gt;


%26lt;p%26gt;Me too!%26lt;/p%26gt;


%26lt;/body%26gt;





%26lt;/html%26gt;