Question

I have two CSS files, let’s call them style1.css and style2.css for simplicity’s sake.

I include them in this order:

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

Style one is a more general file with lots of classes and attributes. Style2 overwrites these.

For example, style1 has this:

.row-fluid > .span9 {
width: 74.358974359%;
}

Whereas, style2 has:

.span9{
  width:50%;
}

I have some .row-fluid DIVs that contain .span9 elements and the first style is used for them, even though browsers should accept only the last CSS rule if duplicate selectors are found.

I discover this by going to Chrome Developer Tools and I see the span9 definition coming from style9 as crossed and the definition from style1 is at the top and is used instead.

PS: To be specific, style1 is the Twitter Bootstrap CSS and style2 is my own CSS started from scratch.

Answer 1

You’re understanding the cascading part, but perhaps not the specificity rules of CSS. The first rule more specifically selects the element than the second rule, so it is chosen instead.

Try changing that second rule to this:

.row-fluid > .span9 {
    width: 50%;
}