CODEWITHSUNDEEP
htmlcss
Jesse Dijkstra
Jesse Dijkstra

Reputation: 130

CSS is not loading

I've written a piece of CSS, while it does not affect the way my page(s) are displayed. I use in my HTML tag:

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

And my style.css file looks like this:

@import('CSS/modal.css');
@import('CSS/menu.css');
@import('CSS/content.css');
@import('CSS/footer.css');
@import('CSS/title.css');

Yet when I use this:

#title {
  font-size: 5em;
}

To test if it really doesn't load the CSS.

On this part of HTML:

 <body>
    <div id="title">
      AMP
    </div>
 </body>

It still doesn't display the text in 5em.

EDIT: It seems that when I put the CSS3 code directly into style.css and do not let it run over the @import() function, it does load correctly, but why is it not working anymore? It worked fine yesterday, it has always worked perfectly.

Upvotes: 0

Views: 350

Answers (3)

thirtydot
thirtydot

Reputation: 228142

You have at least two mistakes.

This:

#title.css {
  font-size: 5em;
}

should be:

#title {
  font-size: 5em;
}

And this:

@import('CSS/modal.css');
@import('CSS/menu.css');
@import('CSS/content.css');
@import('CSS/footer.css');
@import('CSS/title.css');

should be:

@import 'CSS/modal.css';
@import 'CSS/menu.css';
@import 'CSS/content.css';
@import 'CSS/footer.css';
@import 'CSS/title.css';

@import url('CSS/title.css'); and @import 'CSS/title.css'; are both valid forms. What you have is not valid.

Upvotes: 1

Pavlo
Pavlo

Reputation: 44889

Remove .css from your selector:

#title {
  font-size: 5em;
}

#text.css selector means "select an element that has both title id and css class".

Upvotes: 3

myput
myput

Reputation: 422

Try:

#title {
 font-size: 5em;
}

The Jsfiddle here works: link

Upvotes: 0

Related Questions