Can't link my HTML to CSS

HTML-CSS
1

I’m new to coding and I’m doing a registration form for practice, but my CSS won’t link to my HTML. I added the link tag with rel=“stylesheet” and href=“style.css”, but it still won’t work. Also, I was having an issue with my h1 element being red for no reason, don’t know if that’s relevant. I changed it by putting my CSS in the index.html file. Thanks

2

I think your href should probably point to styles.css (as opposed to style.css).
If you have a particular issue which you’d like help with, it’s usually to click the Help button to create a forum post which contains your full code and a link to the challenge which you’re having difficulty with.

Alternatively, you could post your code here manually, using the Preformatted Text tool (</> or CTRL+e).

It’s much easier for us to help you if we have some kind of proper context to work with.

3

Sorry about that, this is my first post here. I’m not stuck on one of the challenges here, but I’m going through the course so I thought I’d post this here. Here is my code:

<!DOCTYPE html>
<html lang="en">

<head>
<link rel="stylesheet"
type="text/css"
href="style.css">
    <meta charset="UTF-8">
    <meta name="viewport" content="
    <title>Practice</title>
    <link rel="stylesheet" href="styles.css">
</head>

<body>
<h1 style="color: black">Register</h1>
<p>hi</p>
    <form action="holiday3871@gmail.com"
    method="post" inline>
    <label for="first-name">
        <input class="first-name"
        placeholder="First Name"
        type="text"
        id="first-name">
    </label>
    <label for="last-name">
        <input class="last-name"
        placeholder="Last Name"
        type="text"
        type="last-name">
        </label>
        <label for="email"
        type="email">
                <input class="email"
                placeholder="Email"
                id="email">
                <input class="number"
                        placeholder="Age"
                        id="age">
                </label>
    </form>
</body>

</html>
4

And the CSS I just started, but here it is:

p {
    color: blue
}
5

Also, I did try to change it to styles.css, but that didn’t work.

6

It looks like there are several issues in your HTML code.
HTML validator

7

Thanks, there was alot of errors. I got everything good with the validator, but it still won’t add my CSS.

8 
<meta name="viewport" content="

meta tag

<link rel="stylesheet"
type="text/css"
href="style.css">

its working…

9

In CodePen, you don’t typically need to manually link your CSS in the HTML file because CodePen provides a built-in interface for including CSS and other resources.
Many issues or unexpected behavior in a web page or application can be caused by HTML errors,

10

the semicolon is crucial in CSS do it properly …;
p { color: blue }

11

If your CSS file still isn’t linking properly, you probably need to change this from:
href="style.css"

To:
href="styles.css"

You should only have one link element to the CSS, in your document head. You appear to have two.

12 
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" type="text/css" href="styles.css" /> 
    <title>Link CSS to HTML</title>
</head>
13

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.