My css not working why

21

but you said you have only one file, if you have only one file then the html file should contain your css

1 Like
22

keeping them one file recently worked so i was trying something different so decided to keep them on different file

23

If your css and html is on the same page you should apply css in <style></style> tags which will locate in head. Okay let me show an example.

<!DOCTYPE html>
<html>
<head>
<style>
body {background-color: powderblue;}
h1   {color: blue;}
p    {color: red;}
</style>
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

In other case if your css and html is on separate pages so you should try this step to link css in html. Let me show an example.

“My css file name is styles.css so linked it in html”

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="styles.css">
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>
1 Like
24

I’ve edited your post for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

See this post to find the backtick on your keyboard. The “preformatted text” tool in the editor (</>) will also add backticks around text.

Note: Backticks are not single quotes.

markdown_Forums

25

Thank you for this. I got it.

26

separating css and html means on different folder or on the some folder / different windows
on vs code

27

If your HTML is the same locally as in the Codepen you posted then.

  1. The integrity and crossorigin are not elements, they are attributes on the link element.

  2. The rel value should be stylesheet not stylesheets (extra “s”).

  3. Not sure where you got the fontawesome link from but it seems like the integrity value isn’t valid.

You have:

<link rel="stylesheets"href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
<integrity="sha384-0S3vJzBfQzYUhtDYW+Pj2yciDJxpsK10YPAYjqTO85Qq/1cq5FLXAZQ7Ay">
<crossorigin="anonymous">
<link rel="stylesheets"href="css/netflixclone.css">

Should be (with new fontawesome link):

<link
  rel="stylesheet"
  href="https://use.fontawesome.com/releases/v5.12.0/css/all.css"
  integrity="sha384-REHJTs1r2ErKBuJB0fCK99gCYsVjwxHrSU0N7I1zl9vZbggVJXRMsv/sLlOAGb4M"
  crossorigin="anonymous"
/>
<link rel="stylesheet" href="css/netflixclone.css" />
28

what about this

type or paste code here (html)
```<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8"/>
        <link
         rel="stylesheets"
         href="style.css"/>
    </head>
    <body>
        <div class="Login-div">
            <div class="logo"></div>
            <div class="Title">Kidhh Craig</div>
            <div class="sub-title">beta</div>
            <div class="fields">
                <div class="username"><Input type="username"class="user-input"placeholder="username"/></div>
                <div class="password"><Input type="password"class="user-input"placeholder="password"/></div>
            </div>
            <button class="signin-button">LOG IN</button>
            <div class="link"><a href="#">Forgot Password</a></div>
        </div>
    </body>
</html>

(css)
*{
    box-sizing: border-box;
}
body{
    margin: 0pc;
    height: 100vh;
    width: 100vw;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgb(248, 246, 246);
    font-family: 'lato',sans-serif;
    font-weight: 300;
}
29

Again, the rel value is not stylesheets it is stylesheet (remove the “s” at the end).

1 Like
30

thanks for all the help salute

31

No problem. Happy coding.