CODEWITHSUNDEEP
htmlcss
AlwaysStudent
AlwaysStudent

Reputation: 1374

CSS codes doesn't work correctly after moving in head to style.css

I have created CSS styles in head tags like 

<head>
<style type="text/css">
  .... Here
</style>
</head>

After I moved my all CSS codes from the style.css

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

... then some CSS codes don't worked.

for example some @media all and() {....}

What I am doing wrong?

Upvotes: 0

Views: 63

Answers (1)

Johannes
Johannes

Reputation: 67778

I'd have to see all rules and stylesheets in both states (before and after moving them to separate files). But the CSS rules also depend on their order of appearance: Most likely now you have them in a different order. What comes last overwrites what comes before, unless the latter one does not apply because it's in a media query. But if for example originally you had this:

@media screen and (max-width: 768px) {
  .my_div { width: 400px; }
}

and somewhere later 

.my_div { width: 750px; }

, then .my_div will have a width of 750px, also on smaller screens - the second rule is valid for all screen sizes and therefore overwrites the first rule.

So if you had something like this and put those two rules into different external stylesheets, with the media queries coming after the general rules, their order is different, so now the media query will be effective, since it's not overwritten anymore by another rule for the same element.

(This is a very simple example, but the principle is the same for everything, also for example for display: block vs. display: inline-block for the li items in a nav list)

Upvotes: 1

Related Questions