CSS is not loading

Question

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.

Are the imported CSS files in a directory called CSS relative to the style.css file? — rink.attendant.6
– rink.attendant.6, Commented Aug 23, 2013 at 14:24
Are those CSS files really in a CSS directory? Is the directory titled all uppercase like your links are? Try all lowercase "css". Your server may be set up as case sensitive. — Scott
– Scott, Commented Aug 23, 2013 at 14:25

rink.attendant.6 · Accepted Answer · 2013-08-23 14:25:46Z

3

Remove .css from your selector:

#title {
  font-size: 5em;
}

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

edited Aug 23, 2013 at 14:25

rink.attendant.6

46.7k64 gold badges111 silver badges161 bronze badges

answered Aug 23, 2013 at 14:21

Pavlo

45.2k14 gold badges84 silver badges114 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Jesse Dijkstra Over a year ago

Ah, that was stupid of me to put in. But even after removing it it is not changing. I've pressed F5, closed the browser, everything. This is also not the real CSS3 code I'm speaking of, I've written a much larger piece. But since that didn't apply I tried to use the little title.css to see if it was something in the other script (modal.css) or something else.

thirtydot Over a year ago

@JesseDijkstra: Are your folder paths correct? You have href="style.css" and @import('CSS/title.css');.

Jesse Dijkstra Over a year ago

@thirtydot: Yes, this is valid, and has always been. Since you're refering to a folder that is called CSS and within that folder you search for the (in this example) 'title.css' file.

thirtydot · Accepted Answer · 2013-08-23 14:29:33Z

1

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.

answered Aug 23, 2013 at 14:29

thirtydot

229k51 gold badges393 silver badges354 bronze badges

Comments

myput · Accepted Answer · 2013-08-23 14:23:46Z

0

Try:

#title {
 font-size: 5em;
}

The Jsfiddle here works: link

answered Aug 23, 2013 at 14:23

myput

4221 gold badge10 silver badges27 bronze badges

1 Comment

Jesse Dijkstra Over a year ago

Somehow it now perfectly enlarges the text to 5em. But why is the '@import('');' not working any more? It worked before.

Collectives™ on Stack Overflow

CSS is not loading

3 Answers 3

3 Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related