Linking your CSS to your HTML - A Smarter Way To Learn HTML & CSS (2015)

A Smarter Way To Learn HTML & CSS(2015)

5
Linking your CSS to your HTML

Since the CSS file is separate from the HTML file, the browser has to be told where to find it. This is how you do it.

<html>
<head>
<title>Practice</title>
<link rel="stylesheet" type="text/css" href="css/styles.css"> </head>
<body>
<p>Mark Myers</p>
<p>That’s my name.</p>
</body>
</html>

This is a mouthful, so let’s break it down.

First, notice that the link information goes between the <head> and </head> tags, rather than between the <body> and </body> tags, where you wrote your two paragraphs. The difference between the head and body sections is that the head section deals with a few technical matters—like telling the browser where to find the CSS file—while the body section contains the content of the page.

Next, notice that the link information itself is a tag. It’s placed inside an opening < and a closing >. But unlike all the other tags you see in the code above, it isn’t paired with a closing tag. It stands alone.

The link tag consists of three “equations:” Each equation says that something equals something else. The second something is in quotation marks.

1st “equation”: link rel="stylesheet" tells the browser that the link relationship is with a stylesheet.

2nd “equation”: This is a useless, vestigial part of the tag, like your appendix. We’ve already told the browser the link is to a stylesheet. All stylesheets end with the extension “css,” and they’re all text documents, so this just repeats what the browser should already know. But we still have to include it (but maybe not for long).

3rd “equation”: href stands for hypertext reference. This part of the tag tells the browser where to find the CSS file to link to. We’ve put it in the css subfolder of the folder where this HTML document resides, the my-smarter-site folder. The file name is “styles.css.”

Something to notice about formatting here: There are no spaces in the tag, except those separating the three “equations.”

Enter the link tag in your practice.html document. Save it, and have your browser display the webpage it creates. Expect the paragraphs to be in a serif font and the heading in a sans-serif font, as you specified in the CSS file. Find sample HTML code at:
http://asmarterwaytolearn.com/htmlcss/practice-5-1.html.

Find the interactive coding exercises for this chapter at:
http://www.ASmarterWayToLearn.com/htmlcss/5.html