The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> What is wrong with my style sheets?
roccojade
post Nov 10 2016, 07:16 PM
Post #1


Novice
**

Group: Members
Posts: 29
Joined: 6-November 16
Member No.: 24,917



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!
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Nov 10 2016, 07:59 PM
Post #2


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,730
Joined: 9-August 06
Member No.: 6



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. wink.gif

CODE

  ' sans-serif'
   ^
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Nov 10 2016, 08:46 PM
Post #3


.
********

Group: WDG Moderators
Posts: 9,653
Joined: 10-August 06
Member No.: 7



As a sidenote, the H1 element should be in BODY, not between HEAD and BODY.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Nov 10 2016, 09:41 PM
Post #4


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,730
Joined: 9-August 06
Member No.: 6



Ha, I didn't even see the HTML was included. blush.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
roccojade
post Nov 10 2016, 09:52 PM
Post #5


Novice
**

Group: Members
Posts: 29
Joined: 6-November 16
Member No.: 24,917



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;
}
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Nov 10 2016, 11:52 PM
Post #6


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,730
Joined: 9-August 06
Member No.: 6



It's fine now. Maybe you view a cached copy of you site. Refresh your browser and see if that helps.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 19th April 2024 - 04:19 PM