First, I must apologize for the use of acronyms – nobody wants programming languages spelled out, though. I’ll use some silly analogies in this so non-dorks can understand what the hell I’m talking about. (I would loose all my street cred if I didn’t make it sound just a little techy though.)
Most of the acronyms in this article will be referring to programming languages. Programming languages are just like spoken languages. If you want to order some nice wine, better learn French or Spanish. If you want to get into manufacturing, Chinese might be your best bet.
Let’s go over just a couple of these to clear the air for this article. HTML is your basic web page coding. It tells the computer that certain text is a paragraph, or a heading, or to display a linked image. We’ll leave it at that for now so as to keep this simple.
CSS and style sheet will be used synonymously in this article. We’ll explain what they are in the next part.
What is CSS?
“CSS (Cascading Style Sheet) is a style sheet language used to describe the presentation (that is, the look and formatting) of a document written in a markup language. Its most common application is to style web pages written in HTML and XHTML, but the language can be applied to any kind of XML document, including SVG and XUL.” Thank you, Wikipedia. Whew!
In other words, CSS is a language used to make web pages display a certain way. Now why is that important or interesting? Read on and find out.
What Can CSS Do?
With a style sheet, you can tell certain page elements to display how you want them to. For example, maybe we want the text to be white and the background to be black. We could do the same with HTML with font and body tags, but by linking an external style sheet, we can apply those styles to the whole website and leave our HTML coding simple and clean. Now why would we care if our HTML coding was a few lines shorter? Well, search engines read HTML coding, but they do not read the CSS.
The simpler and clean your HTML is, the better off your website will be for search engines. The fewer lines of code you have, the easier things are for those smart, yet very dumb search engines to deal with.
You can even change out a style sheet linked to a document and voilá, your whole site has a completely different design! Check out csszengarden.com to see some amazing examples of exactly this. It’s the same webpage (HTML coding) with hundreds of unique versions created by changing the style sheet and some images.
Why is this Special? (and why should I care?)
Prior to CSS, web page layout was done with tables. Yes, those same tables you use to make a chart for something like financial data. Tables were put within table cells and it quickly became a mess of code (kinda like that last sentence if you don’t know anything about programming web pages in tables! Messy…). If you’ve ever had to work on someone else’s site that had a bunch of nested tables, you would know the disaster I’m talking about. For the non-dorks out there, nested tables = messy birds nest of code.
More interesting, however, is how it can be applied to a software system like WordPress (blogging and web page management software) or an ecommerce system. Most of these have been coded in PHP so that they can interact with a database. PHP coding has tendency to scatter HTML code like a toddler having a heyday with your recently completed 1,500 piece jigsaw puzzle. If would be very difficult to track down all the pieces and put in your own various bits of code for colors and layout. Future updates would be an equal challenge. PHP code talks to the database, gets what it needs, and cooks you up an HTML page that you see on the screen. With a stylesheet, you can then tell the cooked up HTML page to display the way you want it to. No need to sort through the jigsaw puzzle. Not so sure you’ll want to let the toddler still have his heyday, though.
Life becomes simpler and the possibilities with design are endless. Think of how much more productive you would be if you actually knew where that stuff you’re looking for every day is located!
CSS coding goes beyond the skill level of your Average Joe with a website. More importantly, it lets Average Joe only have to worry about his content while some over-caffeinated-latte-addicted-loft-dweller (read: web designer) can relax knowing that Average Joe isn’t going to try and put blinking text on his beautiful design. (A design that he feels really belongs more in a museum than on the web, but seeing as the web has a larger audience, this situation is acceptable.) Most of the WordPress templates that you can purchase are built in CSS (stylesheets). That’s why YOU can go into Mr. Web Designer’s design and drop your content in without fear of screwing-up the page layout and graphical elements.
If you’re looking for a custom WordPress theme, it’s simple for a web designer to either tweak an existing theme (remember CSSZenGarden.com?) or develop a new one for you entirely. The themes Erika talked about in her last post (especially THESIS) can all have a custom CSS Stylesheet overlaid to meet your particular demands.
See? CSS is good for all of us! Mr. Web Designer can now let Mr. Site Owner update some of his content. Mr. HTML now has a more successful relationship with Ms. Search Engine. The web can be a more beautiful place. Can’t you feel all the love in the air?
Feel free to drop me questions below in the comments and I’ll check in throughout the day. You can also email me directly at firstname.lastname@example.org. Thanks for having me!