Issue with css placement in rails (using bootstrap)

Question

Suppose we have the following in stylesheets/myFilename.css.scss:

...

.carousel-control.left, .carousel-control.right {
    background-image: none;
}

...

This will not perform as intended unless I modify it to:

...

.carousel-control.left, .carousel-control.right {
    background-image: none !important;
}

...

However, if instead of having the css in the stylesheets folder, I put it directly into myfile.html.erb, I don't need !important. How do I resolve this issue?

I assume that it has something to do with the ordering/combination of the css from stylesheets, but I'm not certain. If anyone could shed some light, that would be great.

You need to make rule more specific. css-tricks.com/specifics-on-css-specificity — dfsq
– dfsq, Commented Nov 1, 2014 at 23:19

Pau · Accepted Answer · 2014-11-01 23:31:41Z

This is because CSS has a cascading hierarchy that it follows. In your case:

Inline styles
Internal stylesheet
External stylesheet

Internal stylesheet is prioritized more than External stylesheets, so if you declare it directly in your html, you won't need !important anymore to override any other external stylesheets that cause this conflict.

Further reading on css hierarchy and specifity:

http://www.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/ http://www.w3schools.com/css/css_howto.asp

If you need a !important in your external stylesheet, that means you have a css conflict somewhere else. Being more specific in your selector is always better than using !important, so you can do it like so:

/*Use an ID in your html*/
#my_id .carousel-control.left, #my_id .carousel-control.right {
   background-image: none;
}

Md Nurullah · Accepted Answer · 2014-11-01 23:27:10Z

0

You should add your stylesheets/myFilename.css.scss file after the main stylesheet. Suppose, your all css style getting from styleshees/style.css

Now your should write (stylesheets/myFilename.css.scss) it after that ( styleshees/style.css) in your index or associate header file.

Example,

<link rel="stylesheet" type="text/css" href="/styleshees/style.css">
<link rel="stylesheet" type="text/css" href="/stylesheets/myFilename.css.scss">

not

<link rel="stylesheet" type="text/css" href="/stylesheets/myFilename.css.scss">
<link rel="stylesheet" type="text/css" href="/styleshees/style.css">

answered Nov 1, 2014 at 23:27

Md Nurullah

5321 gold badge8 silver badges21 bronze badges

Collectives™ on Stack Overflow

Issue with css placement in rails (using bootstrap)

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related