While designing UA News, Dialog, and Research Magazine, it quickly became apparent that the similarities between the three sites lent itself well to using a common style sheet. Because these sites share content and are related in some way, it was important that the design elements should be similar across the board to create that feeling that they were all connected—a suite of sites. Creating this sense of connection is something that the Admissions sites have done very well.
In order to make this common style sheet work, I needed two files:
- common.css
- style.css
The common.css file held 95% of all basic styles, margins, paddings, colors, and whatever else is needed. Ideally, I wanted each site to pull as much from this CSS as possible and, where needed, overwrite the common styles with specific directives from style.css.
A very simple, but great, example of how this is useful can be seen with each site’s text headings.
common.css
h1, h2, h3, h4, h5, h6{
font-family:Georgia, Verdana, sans-serif;
font-weight:normal;
color:#2e363a;
margin-bottom:10px;
padding-bottom:5px;
}
Research Magazine style.css
h1, h2, h3, h4, h5, h6{
font-family:Arial, Verdana, sans-serif;
}
h1{
color:#333333;
border-bottom:#333333 solid 4px;
}
As you can see, the common font is set at Georgia plus a few other such as color and padding. To create a unique look on Research, all I do is declare a new font and other styles on my site specific style sheet.
The main advantages of using multiple style sheets is that it makes it easier to make changes to generic styles across all sites quickly. The disadvantage is that it can sometimes be hard to manage. Some may cite performance issues, but the style.css files are so small I can’t see that being a problem.
With all of that being said, I think the advantages of being able to control 95% of the styles for three sites in one file far outweighs the disadvantages.
