Can't connect CSS to HTML

Status
Not open for further replies.
N

nikitasc

New Member
Messages
3
Reaction score
0
Points
1
I am new and just trying to make sure I am doing this correctly before diving in further. For whatever reason my CSS stylesheet will not show up even though I have linked it into my html file. Here is the current code in both, and screenshots for where and how it is saved. Help?
CSS

.body {
font type: bold;
}

.h1 {
color: purple;
}

.p {
color: red;
}


HTML

<!DOCTYPE html>
<html>

<head>
<title>Nikita Schultz</title>
<meta charset="utf-8" />
<link href="/styles/style.css" rel="stylesheet" type="text/css">
</head>

<body>

<h1>Nikita Schultz</h1>

<p>About Me</p>



</body>

</html>
 

Attachments

  • Screen Shot 2017-09-01 at 11.33.15 PM.png
    Screen Shot 2017-09-01 at 11.33.15 PM.png
    53.7 KB · Views: 7
  • Screen Shot 2017-09-01 at 11.32.34 PM.png
    Screen Shot 2017-09-01 at 11.32.34 PM.png
    62.2 KB · Views: 6
N

nikitasc

New Member
Messages
3
Reaction score
0
Points
1
Still nothing.. I read in a couple forums that that extra slash could help, so I've been experimenting but even taking it out, and still nothing.
 
Anna

Anna

I am just me
Staff member
Messages
11,750
Reaction score
581
Points
113
The error is within your stylesheet.

The dot at the start of your style declarations has to go, it is only used when you us a style class that you made, not the base element.

for instance, if you had something like this in the html, you would use a dot that way in the stylesheet:

<!DOCTYPE html>
<html>

<head>
<title>Nikita Schultz</title>
<meta charset="utf-8" />
<link href="/styles/style.css" rel="stylesheet" type="text/css">
</head>

<body>

<h1 class="headline">Nikita Schultz</h1>

<p>About Me</p>



</body>

</html>

Then the corresponding stylesheet would be like this:

body {
font type: bold;
}

h1.headline {
color: purple;
}

p {
color: red;
}

h1.headline would tell the browser to apply that style to the h1 element, only if it is set to use the class headline. You could also put that declaration in as:

.headline {
color: purple;
}

In which case it would be applied to all elements using the class headline, no matter if it would be a h1, div or other element.
 
N

nikitasc

New Member
Messages
3
Reaction score
0
Points
1
Anna said:
The error is within your stylesheet.

The dot at the start of your style declarations has to go, it is only used when you us a style class that you made, not the base element.

for instance, if you had something like this in the html, you would use a dot that way in the stylesheet:

<!DOCTYPE html>
<html>

<head>
<title>Nikita Schultz</title>
<meta charset="utf-8" />
<link href="/styles/style.css" rel="stylesheet" type="text/css">
</head>

<body>

<h1 class="headline">Nikita Schultz</h1>

<p>About Me</p>



</body>

</html>

Then the corresponding stylesheet would be like this:

body {
font type: bold;
}

h1.headline {
color: purple;
}

p {
color: red;
}

h1.headline would tell the browser to apply that style to the h1 element, only if it is set to use the class headline. You could also put that declaration in as:

.headline {
color: purple;
}

In which case it would be applied to all elements using the class headline, no matter if it would be a h1, div or other element.
Click to expand...


Thank you! I knew it had to be something so silly that I was overlooking, but that definitely worked. Now I know! Thanks :)
 
friendi4

friendi4

New Member
Messages
8
Reaction score
1
Points
1
nikitasc said:
.body {
font type: bold;
}
Click to expand...
should be:
body {
font-weight: bold;
}

Edit: # means id, . means class, HTML Tags shouldn't
have # or . because they're not ids or classes.

Example:
body {
color: #666666;
}
#id {
background-color: #5789DE;
}
.class {
font-weight: bold;
}
​
Usage:
<body>
<div id="id">
<div class="class">
This is the class.

The document body font color is #666666;

The ID #id sets div id background-color to #5789DE;

The class .class sets div class
font-weight to bold.
​
</div>​
</div>​
</body>​
Regards,
Edwin B.
 
Last edited:
Status
Not open for further replies.
Top