CSS quirk

CSS stands for ‘Cascading Style Sheets’ and once you grasp the concept, it makes a lot of sense. So if you define a style for your paragraph text, say


.normal-paragraph {
    font-family: Helvetica;
    color: #333;

and later want to have a paragraph in the body be a different font, you can define and apply a new style.

.different-font {
    font-family: Times;

and apply it to the paragraph.

I was trying to do this with padding and it wasn’t working. Specifically I was adding a style to the heading to remove padding.


<h3 class='linkSection pad-no-bottom'>

What I thought should happen was that the browser would get the padding information from the linkSection CSS and then adjust it based on the padding information in the pad-no-bottom class. However, what it does is read the style information in the order in which it appears in the CSS file—not the order in which you call the classes. So I pulled all of my padding classes out of the main CSS file and put them into a separate file that is called last. I did the same thing for all of the other override classes as well. e.g. .indent, .italic, .centered, etc.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.