CSS: Start Generic before going Specific

The first thing I do is (typically working with my designer) decide on several important factors like:

• What is my default font?
• What is my default font size?
• What are some of my base colors, e.g. for a link, for a header, body text, etc…?
• What are my default font sizes for headers, and are there any special effects across them?

With these defined, I can now create my base style sheet (for more information on how to use the @font-face CSS3 tag):

@urlimages: "../img/";
@main-color:#333;
@link-color:#1B75A9;
@menu-link-color:#A19D9A;
* {margin:0; padding:0;}
body {background:#fff; font-family:Arial, Helvetica, sans-serif; font-size:14px; color:@main-color;}
img {border:none;}
ul {list-style-type:none;}
h1, h2, h3 {font-weight:normal;line-height: 1.25}
a {
text-decoration:none; color:@link-color; border:none;
&:hover {text-decoration:underline;}
}

I’m kind of cheating in the above style sheet because I’m leveraging the Less CSS Framework which allows me to define and use variables in my CSS files.  However, even if you’re not using this, the concept is still a good idea meaning that you can define these colors in a CSS comment (/* */) that if/when you decide that you ever need to change them; you can easily perform a search and replace!

After these variables are defined the next things done are creating base styles for the list of items I defined above.  By default all text will use Arial, the font size base is 14 pixels and the color is gray.  Next all images will have no borders, headers 1 through 3 will not be bold and a line height of 1.25.  And finally, all links will have no underline text and a color of #1B75A9; when hovered, the link will then be underlined.

These are all extremely powerful base styles that I’ve defined.  Now, let’s look at an example of how and why I would want to override a base style.  In this scenario, let’s pretend that the navigation links should be underlined by default and turned bold when hover, I can simply override the default link style as follows:

nav a { text-decoration: underline;}
nav a:hover { font-weight: bold; }

It’s important to note that I didn’t redefine any of the styles I didn’t want to change because if I don’t provide them, it will go up the hierarchy and use what I had previously defined!

Before wrapping this up, let’s look at a few bad examples, pretend this was a fresh style sheet:

#title-bar h1{
font-family: Arial Black, Arial, Sans Serif;
font-size: 40px;
}
.subtitle {
color: #000;
font-family: Arial Black, Arial, Sans Serif;
font-size: 25px;
}
p.content {
font-family: Arial Black, Arial, Sans Serif;
font-size: 13px;
}
.post-read-more a{
font-family: Arial Black, Arial, Sans Serif;
font-size: 13px;
text-decoration: none;
color: #000;
}
li a.table-link, li a.table-link:visited {
color: #333333;
font-family: Arial Black, Arial, Sans Serif;
text-decoration: underline;
font-size: 16px;
}

Lots of bad things happening in this example starting with the fact that the same font is defined over-and-over again.  This can easily be resolved with our base body font – more importantly, any text defined outside of these specific styles will use the browser default font (I can hear the designers screaming at me for lack of consistency)!  Secondly, throughout the style sheet a specific font is being defined in pixels.  This is another no-no (unless you want exact font sizes regardless of the user’s zoom preference).  Instead, it’s best to define a base font size and attempt to use and leverage em sizing throughout the rest of the document.

So remember, ensure that you have properly defined your entire base styling as thoroughly as possible because it will eliminate constant tinkering and redefining of your styles in future classes!

Published on Oct 23, 2012

Tags: The Ultimate CSS Tutorial for Beginner Programmers | organization