Question

I’m new to html and CSS but through the recent work I’ve been doing I thought I was getting a hold of how CSS works.. And it seemed to work kind of like scope in a language like Java.

My understanding was that, like Java, the declaration with the narrowest scope wins.. aka the most specific declaration would override its inherited versions, allowing you to, like I am trying to do, declare a set pattern for a group of objects and then if one of those needs a slightly different setting you can simply override the general rule for that one item.

However, I’m getting the feeling this is not the case, here I have a tabbed content box I’m working on;

The html:

<div id="feature-tabs">
    <ul id="tabs">
        <li><a href="#What We Do">What We Do</a></li>
        <li><a id="large" href="#What Makes Us Different">What Makes Us Different</a></li>
        <li><a href="#Our Background">Our Background</a></li>
        <li><a href="#Why We Do It">Why We Do It</a></li>
    </ul>
</div>

And of course I labelled the one list-item as “large” so that I could force its width to be a little wider so it can fit on one line.

The CSS:

ul#tabs li a {
    width: 144px;           //TRYING TO OVERRIDE THIS DECLARATION
    height: 33px;
    color: #42454a; 
    background-color: #fff; 
    border-left: 1px solid #000;
    border-right: 1px solid #000; 
    text-decoration: none;
    display: block;
    text-align: center;
    border-radius: 3px;
}
    a#large {
        width: 155px;          //WITH THIS ONE
        display: block;
    }

What is happening is that the width of a"large" is being overwritten by a. (144px not 155px)

So, two questions:

1. Is it possible to do what I am trying to do here-override an inherited trait?
2. Is it possible to simply vertically align each of the 4 tab’s text to be centered? (This would make up for the ugly look I’m getting from the one button being two lines, where the rest are just one)

Answer 1

See Cascading. The order in which the CSS is encountered is only used as a final resort.

Both selectors have the same media type.

Both selectors have the same importance and origin.

The specificity of your selectors are different

ul#tabs li a         a=0 b=1 c=0 d=3
a#large              a=0 b=1 c=0 d=1

The top one is more specific, so it’s the one that will get used.

But if you used ul#tabs li a#large, it would get selected because it has the highest specificity.

ul#tabs li a#large   a=0 b=2 c=0 d=3