Linking a style sheet

Get Started
1

I have searched the forums and have found others with linking trouble. Their answers did not solve my problem so here I am.

I’m trying to link an external style sheet to my 3 web pages. (page 80 - I’m using the tutorial book “Build your own web site the right way using HTML & CSS”. At this point the paragraphs should be in blue - mine don’t change color.

This is what I have …

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html xmlns=“http://www.w3.org/1999/xhtml”>
<head>
<title>Stuff from my head</TITLE>
<meta http-equiv=“Content-Type”
content=“text/html; charset=utf-8”/>
<link href=“style1.css” rel=“stylesheet” type=“text/css”/>
</head>

The style sheet is …

/*
CSS for Stuff from my head
*/

p {
font-weight: bold;
color: blue;
}

All 4 files (home page, gallery page, guestbook page, and style sheet) are in a folder called Website located in My Documents.

What am I doing wrong?

Thanks for any help you can give me.
Kuczek

2

Hi

daft question but your stylesheet is named style1.css isn’t it?

Mike

3

yes it is style1.css

4

I’m new to CSS as well, but where is the rest of the code in your XHTML? If the person who gives a good answer (hopefully soon) could also tell us why we use “color:” in some instances and “font-color” in others it would be appreciated. Same goes for “background:” and “background-color:”

5

Here is the rest of my XHTML … I have dabbled with style sheets before and they have worked quite nicely. But this external style sheet linking has me baffled.

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html xmlns=“http://www.w3.org/1999/xhtml”>
<head>
<title>Kathy Kuczek - Stuff from my head</TITLE>
<meta http-equiv=“Content-Type”
content=“text/html; charset=utf-8”/>
<link href=“style1.css” rel=“stylesheet” type=“text/css”/>
</head>

<body>
<div id=“header”>
<div id=“sitebranding”>
<h1>Stuff from my head …</h1>
</div>
<div id=“tagline”>

		&lt;/div&gt;
&lt;/div&gt; &lt;!-- end of header div --&gt;
&lt;div id="navigation"&gt;
	&lt;ul&gt;
	&lt;li&gt;&lt;a href="index.html"&gt;Home&lt;/a&gt;&lt;/li&gt;
	&lt;li&gt;&lt;a href="gallery.html"&gt;Gallery&lt;/a&gt;&lt;/li&gt;
	&lt;li&gt;&lt;a href="guestbook.html"&gt;Guestbook&lt;/a&gt;&lt;/li&gt;
	&lt;/ul&gt;
&lt;/div&gt; &lt;!-- end of navigation div --&gt;
&lt;div id="bodycontent"&gt;
		&lt;p&gt;This is a sampling of some of my projects.  They are done in a variety of mediums &#8211; some for college and some just for fun.  I hope you enjoy them.&lt;/p&gt;
		&lt;p&gt;&lt;img src="http://imgs.inkfrog.com/pix/klynnk1/Mask_logo_smaller_yet.jpg" border="0" alt="screaming mask with drill bits in head"&gt;&lt;/p&gt;		
&lt;/div&gt; &lt;!-- end of body content div --&gt;

</body>
</html>

6

I have no idea what I did but it is now working … back to the tutorial …

7

Well Kathy, the were only few things wrong with your XHTML such as you didn’t close the image correctly i.e. … /> and </TITLE> should be lowercase </title>.

However, I suspect you hadn’t refreshed your browser and that’s why the updated CSS was delayed or perhaps you forgot to save the modifications in the CSS file first.

Regarding eLePHANT’s question; Foreground colour uses the CSS ‘color’ property and is the foreground colour of an element’s text content. I’ll try and get back soon but I have quickly disappear off-line.

8

There is no “font-color” value but I assume you mean ‘font’ well that’s because you may want to be more specific or not with regards to what you are styling for example; H1 { color: red; } will mean all text is red with the H1 and you may not want to bother setting/altering the font styles such as ‘font-size’.

The ‘background’ doesn’t necessarily have to be a colour it could be an image e.g. body { background: url(“http://www.example.com/pink.png”); } and ‘background’ is shorthand, “background” refers to the background of the content. Whereas ‘background-color’ only sets the background colour of an element.

So you see some properties are “shorthand properties”, meaning that they allow authors to specify the values of several properties with a single property. For instance, the ‘font’ property is a shorthand property for setting ‘font-style’, ‘font-variant’, ‘font-weight’, ‘font-size’, ‘line-height’, and ‘font-family’ all at once.