Rails application stylesheet error

Question

In my application.css file I am encountering errors when I have my code inputted below. The h1.title code will execute but the h1 code will not. It may be worth mentioning that in my application the h1.title is above the h1. However, I can get it to work if I insert the h1 code directly after the h1.title code (Repeating myself with the h1 snippet). I don't want to do this as I would like to keep my code DRY. This seems trivial but I have wrestled quite a bit with it and made no progress.

h1 {
color: maroon;
font-size: 150%;
font-style: italic;
display: block;
width: 100%;
border-bottom: 1px solid DarkSlateGrey;
}
h1.title {
margin: 0 0 1em;
padding: 10px;
width: 98.5%;
background-color: orange;
color: white;
border-bottom: 4px solid gold;
font-size: 2em;
font-style: normal;
}

What exactly doesn't work? H1 code executes fine in the jsfiddle example I set up. jsfiddle.net/TRKkj/1 — afaf12
– afaf12, Commented May 24, 2012 at 23:06
I just moved the code into the scaffold.css.scss file and it runs perfectly. Is there a scoping issue that I'm not seeing? I don't understand why it will run in scaffold.css.scss but not application.css — Anconia
– Anconia, Commented May 24, 2012 at 23:07
Take a look at the element in your browser's inspector. Is the h1 element inheriting anything from another file? — badams
– badams, Commented May 24, 2012 at 23:11

afaf12 · Accepted Answer · 2012-05-24 23:12:19Z

1

If you add the code directly in application.css, it will appear at the top of the compiled file (I assume your css files are compiled into one). My guess is that other css files included in your application.css overwrite h1 css atrributes.

Use inspect option in your browser (IE, Firefox, Chrome etc. have one built in nowadays) and see where the h1 gets it's attribute values from.

answered May 24, 2012 at 23:12

afaf12

5,4469 gold badges41 silver badges60 bronze badges

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

4 Comments

Anconia Over a year ago

They both inherit from the element body but there is nothing in there that should cancel the h1 and h1.title code. Also, the only two elements in application.css are h1 and h1.title - my app is still fairly small.

Anconia Over a year ago

I moved the body, h1, and h1.title all into application.css and it runs perfectly now - which makes sense since application.css is the first file to get complied. Should app-wide code be placed in application.css from now on, or is it ok to leave it scaffold.css.scss?

afaf12 Over a year ago

I put app-wide code in a separate .css file to keep application.css tidy. Generally no css code should be in application.css, and same goes to js and application.js.

Anconia Over a year ago

that's a good idea, I'll have to implement that. Also, the jsfiddle example you showed me is quite handy. I saved it in my bookmarks for future use.

Collectives™ on Stack Overflow

Rails application stylesheet error

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related