Dismiss Notice
Welcome to Our Community
Wanting to join the rest of our members? Feel free to sign up today.

How to link a CSS file to a HTML file?

Discussion in 'General Webmaster Helpdesk' started by ForumJoiner, Mar 26, 2007.

  1. ForumJoiner

    ForumJoiner New Member Webmaster

    We want to apply the CSS look, as defined in the example.css file, to the content from the example.htm file. In the example.htm file we add, in the header section, the following:
    [B]	<link 
    		rel = "stylesheet" 
    		type = "text/css" 
    		href = "example.css" 

    While there are others way to apply CSS instructions to a particular element from the HTML file, the purpose of CSS is to isolate the look from the content. That's why we'll use an external CSS file.

    It’s very important to know how to test if the CSS file is applied to the HTML file. For this, we’ll make a HTML file, called example.htm
    			Rel = "stylesheet" 
    			Type = "text/css" 
    			Href = "example.css" 
    		This is a blue text.

    The example.css file will set to blue the color of all the text from the body section.

    	color : blue;
    At first, we’ll not put the example.css in the same folder as example.htm. If we open example.htm, using a browser, the color of the text will be black (or whatever color you set by default for your browser). We’ll not receive an error message, saying that example.css is missing, but we’ll not see the blue color.

    When we copy the example.css file in the same folder as example.htm, and we’ll open again example.htm, the color of the text “This is a blue text†will be blue, indicating the effect of the CSS file over the content of the HTML file.

    You can download below a zip file containing both files.

Featured Resources (View All)

Share This Page