-Cannot Link CSS page to HTML

StackOverflow https://stackoverflow.com/questions/21805131

  •  12-10-2022
  •  | 
  •  

Question

I am creating a html template for a webpage in a free HTML-kit text editing program. Both my xhtml and css files are in the same directory. I can link pictures to xhtml template but my css page is not affecting any change. 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

 <html xmln="http-"http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

 <head>

        <meta content="teggxt/html; charset=utf-8" http-equiv="Content- Type"/>
        <title>Spaghetti &#38; Cruft: Geek Pizzeria</title>
        <link rel="stylesheet" type="text/css" href="styles.css" />


</head>

<body>
        <div id="branding">

        <h1><img src="images/logo.gif" alt="Spaghetti and Cruft: Geek Pizzeria">

        <p id="address">
        Spagetti &#38; Cruft<br />
        742 Cederholm Ave.<br />
        Gotham, CA 00234<br />
        510-555-0987
        </p>

        </div>

        <div id="main-content">
                 <h2>The page title will go here.</h2>
                 <p>The page content will go here.</p>
        </div>

        <ul id="navigation">
                <li><a href="menu.html">Our Menu</a></li>
                <li><a href="about.html">About Us</a></li>
                <li><a href="reviews.html">Raves and Reviews</a></li>
                <li><a href="news.html">News and Events</a></li>
                <li><a href="contact.html">Contact Us</a></li>
        </ul>

        <div id="tagline">
                 <p>Pizza, pasta, and WiFi.</p>
                 <p>Enjoy a bite with your bytes.</p>
        </div>

        <p id="copyright">&#169; 2007 Spaghetti &#38; Cruft: Geek Pizzeria</p>
</body>

</html>

and the CSS code.

html { 
background-color: #ffffff;
background-image: url(images/background.gif) repeat-x;);
}

body {
width: 80%;
}

Is the HTML-kit having difficulty processing XHTML 1.0 Strict? I'm not sure.

Was it helpful?

Solution 2

If you are using html strict, you need to close all of your tags always. html, body, div and h1 tags is not closed right now. You miss some closing in the end of css description in meta tag also.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmln="http-"http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Spaghetti &#38; Cruft: Geek Pizzeria</title>
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<body>
<div id="branding">
<h1><img src="images/logo.gif" alt="Spaghetti and Cruft: Geek Pizzeria" /></h1>
</div>
</body>
</html>

And your css is also quite clumzy. No need to put background elements in html if you can all put in body description. And also width is probably for that div, not for all body.

body { background: #FFFFFF url(images/background.gif) repeat-x; }
div#branding { width: 80%; }

OTHER TIPS

You are missing the closing " after styles.css.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top