CODEWITHSUNDEEP
htmlcss
user4197202
user4197202

Reputation:

simple html file not loading css : tried eveyrthing

I have this very simple file index.html

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

<head>
  <title>We're learning selectors!</title>
  <link rel="stylesheet" type="text/css" href="style.css"/>
</head>

<body>
  <h1 id="yay">Yay</h1>
<body>
</html>

While the stylesheet is style.css

h1 {
    .color: blue;
    .font-style: italic;
}

Both the files are in same directory but still it doesnt work. Tried all browsers. But when I open dev-tools in chrome , i can change the color to blue shade under the "style-section"

h1 {
color: rgb(0, 15, 173);
}

But then why isnt the style.css getting loaded, while Im using the same correct code as above. Already referred to CSS not working in stylesheet didnt help either

Upvotes: 0

Views: 135

Answers (3)

dane.
dane.

Reputation: 13

You are defining css attributes as class names.

Ur code: 

h1 {
    .color: blue;
    .font-style: italic;
}

How it should be:

h1{
    color:blue;
    font-style: italic;
}

The dott, which you used infront of the css attributes does just get used with classnames. For example:

Html:

<div class="ClassName"></div>
<div id="ClassName"></div>

CSS:

.ClassName{
    font-size:12px;
}

#ClassName{
    font-size:12px;
}

<!-- #className = div id -->   
<!-- .className = div class -->

Upvotes: 1

RydbirkJr
RydbirkJr

Reputation: 1

I'll give a tip how to divide and conquer problems like this:

First, you need to validate if the script is loaded at all. Trust me, if you're gonna do JavaScript, you'll need to narrow down your possible errors. A great tool for narrowing down could be Chrome's developer-tap, and check the console. It will tell, if a file was not loaded (if the path was incorrect or alike).

Second, validate your CSS! If you know the stylesheet is loaded, validate if the CSS is typed correctly. You could use a tool like CSSlint.

And.. That's about it - now you know that you're CSS is loaded AND that it's typed correctly. Displayed correctly is a whole other concern which I won't touch upon here.

Upvotes: 0

user4069366
user4069366

Reputation:

Just remove the "." from your style style.css ie

h1 {
    color: blue;
    font-style: italic;
}

Upvotes: 6

Related Questions