We continue with our examination of CSS with some real basics- formatting, writing rules, organization and the like. Nothing groundbreaking, but the basics are important in any endeavor, so here they are.
Formatting
During development I format my CSS with selectors on one line and then each property on its own line. The declarations are indented 4 spaces. I like this style because my interest is always in the properties, not the selectors. I can find any selector I need with CTRL+F and then I can easily scan down the list of properties to do my business.
One of the most important things in CSS is understanding the way rules are inherited and applied in the browser. This is one of those things that many developers “get” intuitively but don’t necessarily understand at a granular level.
There’s actually an algorithm, so if you’re stumped, you can actually count it out. It works like this:
After a long break, I’m finally back with the long-awaited CSS portion of this little series.
In this article I’ll go over some core concepts. Next post I’ll outline one poorly understood, but vital part of CSS. More posts full (yes, full) of tips, tricks and best practices will follow.
Core concepts
CSS is a style sheet language used to determine the formatting of an HTML document (although it could be used to style other XML documents like SVG and XUL.) Before we had CSS (and before it was widely adopted) all of this presentation information was embedded in the document, either in the form of attributes like width or bgcolor or in the form of purely presentational tags like font. Combined with the abuse of the table tag to create complicated layouts, the landscape for layout and design on the web was an unmanageable mess.
CSS fixed all that. Using separate style sheets for an entire site and leveraging semantic markup, and identifiers like ids (for unique page elements) and classes (for multiple, like elements) a developer can apply styles to an entire site while updating a single, cacheable file. Read the rest of this entry »
I promised one last post on HTML elements. This is it. This one will be a quick tour through some of the new semantic HTML5 elements. I’ve been using them regularly for a while now and I’m still trying to wrap my head around the best way to use some of them (in this, I’m not alone.) Hopefully sharing what I’ve learned will help jump start your own work with the new stuff and will help my clarify my own thoughts on the new elements.
This should really be fun.
header
This is one of the most straightforward of the new elements. <div id="header"> becomes <header>. Done. When I’ve presented on HTML5 people just nod when I point this element out. Hopefully this one just makes sense.
One experimental note
One thing we’ve been experimenting with at work is using multiple headers on a page. The pattern looks like this: Read the rest of this entry »
This sample is based on the default WordPress theme. It’s maybe not as complicated as a sign-up form, but it does show the basics. On to it then. Read the rest of this entry »
In case you were wondering, I’ve got two more posts after this one and then I’m moving onto CSS and JavaScript. I’ve got a post on forms (which I’ve been avoiding because forms feel like work) and then a post on the new HTML5 elements and then that’s it.
Writing about CSS and JavaScript will be fun. I’m excited. More excited than I am to write about forms at least. Which isn’t to say I won’t kick ass when writing about forms. It’ll be great.
Ignore me.
On with the show:
B, Strong, Em, I
From the just in case you were wondering what’s up with strong and em and why people use them over b and i department:
The b (bold) and i (italic) tags have been in HTML forever. I haven’t figured out when they first appeared, but they were promised as part of the documentation to the fist web site in August 1991 and later codified as part of the unofficial HTML1 spec in 1993, so 1992 is as good a bet as any.
Later on the concept of “phrase elements” was introduced. They were meant to add “structural information to text fragments” Two of those, strong and em are basically new versions of good old b and i minus the typographic baggage.
* 3.3 Use style sheets to control layout and presentation. [Priority 2]
The proper HTML elements should be used to mark up emphasis: EM and STRONG. The B and I elements should not be used; they are used to create a visual presentation effect. The EM and STRONG elements were designed to indicate structural emphasis that may be rendered in a variety of ways (font style changes, speech inflection changes, etc.)
This recommendation stuck. A lot of code has been written with strong andem and all good IDEs use them when you press the b and i buttons on the toolbar. They’re pretty standard now.
And that’s how we got to strong and em.
And now you know.
Interestingly, b and i are making a comeback in HTML5, having been given a new semantic lease on life. More on that in a couple of weeks. Read the rest of this entry »
Before I jump into the proper way to use tables, I’m going to share an anecdote that should bring a smile to the face of anyone who’s done this stuff for a while.
A few months ago I was both pleased and surprised to discover a web developer who didn’t really know how to lay out a page using tables. He had a sense of how it might work, but had never really done it. I was having him help out with an HTML email (where tables are still the safest bet) and the whole thing was a novelty for him. Looking at it, this makes sense as he’d been at the job for only a few years so he learned entirely in the modern era and he was lucky enough to only learn from good sources. Still, it was a new phenomena for me- encountering a developer who was purely from a CSS-based layout world.
Yes! We’re winning.
If you don’t know what I’m talking about when I talk about tables for layout, move along. There’s nothing to see here.
Lists! They might seem boring, but if you look at a lot of site source code (good sites at least,) you’ll see a lot of lists. A lot of obvious content on the net is in the form of lists (which is why there are three separate constructions for them) and a few years ago we started using them for less-obvious, but still valid reasons.
Using Lists as Menus
The biggest, non-obvious, use of lists is for menus. Someone, somewhere, pointed out that menus were just lists of links. Couple that insight with the power of CSS to bend boring old lists to the designer/developer’s will and we had a de-facto standard on our hands.
Here’s what the menu system for DrunkenFist.com looks like. It’s a lot of code, but it’s a fully-realized version of the pattern, so it’s useful to look at in whole. As a note, this is an HTML5 site, so the nav element is in place signifying to browsers that “the following block represents site navigation.” I’ll be covering the new HTML5 elements as the very last post on the body. Read the rest of this entry »
We’ll finish up our tour of the body tag with several posts featuring general notes about common content elements. I’ll be taking my time with these as getting this stuff right will go a long way towards getting the most out of your site.
Comfy?
On with it then.
Links <a>
The link is the engine of the web. The concept of Hypertext (the H in HTML) itself is expressed in the power of the link. Google is Google because of the power of links. There is no better place to start.
Basic usage
<a href="http://www.drunkenfist.com/"
class="contact"
title="my personal site"
rel="me">DrunkenFist.com</a>
Write Good Link Text
For body copy you want to write link text that is descriptive of the link destination. generally this means a short phrase (5-10 words, depending on who you ask) that clearly describes the link. For that reason “click here” is generally not the greatest link text. For a live example and more on this topic take a look at link chapter of the the US Government’s Research-Based Web Design & Usability Guidelines. It’s full of really interesting tips on handling links.
For the SEO-minded, the above advice has the added bonus of generally including keywords which flow link juice and context to the targeted page. Read the rest of this entry »
Five posts in and finally we get to the heart of the matter- getting your content onto the page for your users to enjoy. This will be done in two parts. This, the first part, will deal with how to structure your HTML so it makes sense from and organizational standpoint and so that you can easily style it with CSS. Let’s look at a stripped down example of what I’m talking about.