Etna Interactive

Cascading Style Sheet Basics Part One: Why & Where

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; }

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.

Sign up for our newsletter to have these articles emailed to you.

Leave a Comment

Fields marked with * are required.

What happens when the best photo gallery in the business meets AI? First Draft for Curator B&A generates SEO-optimized case descriptions for next-level gallery visibility and performance.