Cascading style sheets (CSS) are a simple mechanism for adding style (e.g., fonts, colors, spacing) to Web documents.
Our development team is a group of experts who spend every day up to their elbows in CSS. The rest of our company can tap-dance their way through SQL queries, plan PPC strategies or usher a project through completion like nobody’s business… but get a little bit uncomfortable when it comes to the look and feel of a website. We put together this little “share the knowledge” primer so everyone would know how fun and powerful CSS can be.
Why CSS?
The purpose of cascading style sheets (CSS) is to separate document content from document presentation. You can do this in an external style sheet or by using inline code. Best practice is using an external style sheet. The benefit of this approach is that if you need to alter the design of all your pages, you only need to edit one file to make global changes to your entire website. Not only is this a neat and tidy way to operate, it has other payoffs as well:
- Easier maintenance
- Reduced file size
- Reduced bandwidth
- Improved flexibility
Where Is CSS?
As mentioned before, your CSS can live in a variety of places. It can be linked to from the header of your site’s pages (an external style sheet), you can have a block of code in your header, or you can have inline styles in the body of your page.
Examples in the <head></head>
<link rel=”stylesheet” type=”text/css” href=“/css/global.css” />
<style type=”text/css”>@import /css/global.css)</style>
<style type=”text/css”>
p.bigtext { font-size: 24px; }
.callout { border: 1px solid #eee; padding: 10px; }
</style>
Examples in the <body></body>
<code style=”font-size:105%; color:#969696″>
<p style=“font-size: 24px;”>Some stuff here.</p>
<div style=“border: 1px solid #eee; padding: 10px;”> Some stuff here.</div>
A block of CSS in the header or code written inline are instances where the developer makes a choice not to write reusable code. Obviously, there’s a time and place for this but the goal for the most efficient programmer should be clear, reusable styles.
More to follow
Stay tuned for Part Two of this primer, including examples of how CSS works in the code and how to write it.
Leave a Comment