Printable Version of Topic

Click here to view this topic in its original format

HTMLHelp Forums _ Cascading Style Sheets _ What is wrong with my style sheets?

Posted by: roccojade Nov 10 2016, 07:16 PM

So as a test, I started a new file as a test. The text is not showing as correct fonts. I think the link to teh style sheet is not working right.

File Code (index.html):

CODE

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
<link href="stylesheet.css" rel="stylesheet" type="text/css">
</head>
<h1>test</h1>
<body>
</body>
</html>

Style Sheet Code (stylesheet.css)

CODE

@charset "UTF-8";
/* CSS Document */

#banner {
text-align: center
}
#body {font-family: "Impact", Haettenschweiler, Franklin Gothic Bold, Arial Black,' sans-serif'}
#h1,h2,h3,h4,h5,h6 {
font-family: "Impact", Haettenschweiler, Franklin Gothic Bold, Arial Black,' sans-serif';
letter-spacing: 5px;
}

Please help thanks!

Posted by: pandy Nov 10 2016, 07:59 PM

If the CSS file is in the same folder as the HTML, the URL is correct, provided you've got the name of the file right.

But, you have some errors. The right font should show up for headings 2 - 6 though, but not for anything else. You've put a hash sign before body and h1 in the selectors. That makes them refer to the id 'body' and the id 'h1', not the elements BODY and H1. So remove those hashes.

You've also got the quotes wrong. The font names that need to be quoted are not. You only need to quote font names with a space in the name. So it should be "Franklin Gothic Bold" and "Arial Black". Remove the quotes you have now. sans-serif doesn't need to be quoted either, and you absolutely shouldn't have included the space.

CODE

' sans-serif'
^

Posted by: Christian J Nov 10 2016, 08:46 PM

As a sidenote, the H1 element should be in BODY, not between HEAD and BODY.

Posted by: pandy Nov 10 2016, 09:41 PM

Ha, I didn't even see the HTML was included.

Posted by: roccojade Nov 10 2016, 09:52 PM

Thanks Guys,

Now it at least shows up in my dreamweaver screen. Yet not on my website.

File code:

CODE

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
<link href="stylesheet.css" rel="stylesheet" type="text/css">
</head>
<body>
<h2>test</h2>
</body>
</html>

Style Sheet

CODE

@charset "UTF-8";
/* CSS Document */

#banner {
text-align: center
}
body {font-family: Impact, Haettenschweiler, "Franklin Gothic Bold", "Arial Black",sans-serif}
h1,h2,h3,h4,h5,h6 {
font-family: Impact, Haettenschweiler, "Franklin Gothic Bold", "Arial Black", sans-serif;
letter-spacing: 5px;
}

Posted by: pandy Nov 10 2016, 11:52 PM

It's fine now. Maybe you view a cached copy of you site. Refresh your browser and see if that helps.