CSS: Specificity

First rule of Specificity: The last one in, wins!

While working on the new web template for Case Western Reserve University, I ran into an issue that the space allocated for the title of our department was too small. The title of our department is Information Technology and Academic Computing.

This Title placement was flush right on the far right side of the page. It would butt up against our schools logo which was on the far left.

Using a line break would not work because it would drop the second line of the title down into a white portion of the page. Since the text is white you could not see it.

So I wanted to drop the font size of this text. The name of this CSS code for h1 id header is called "subsite". I decided to use to over come this issue. Our web template uses a web based CSS code plus a local CSS called "mysite".

First I found the "subsite" code and duplicated it. I then renamed it "newsubsite". I added a font size property to it of 18 pixels. I then dragged this code to the bottom of "mysite". This is where Specificity takes over.

I then renamed the code for the Title "newsubsite". Now my font size is a tad smaller and the title now fits in the allotted space.

DJ