How To Make a Web Site the Modern Way. Part 14: Formatting, Shorthand, Resets and Organization

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.

It looks like this:
Continue reading “How To Make a Web Site the Modern Way. Part 14: Formatting, Shorthand, Resets and Organization”

How To Make a Web Site the Modern Way. Part 13: The Cascade/CSS Specificity

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:

Continue reading “How To Make a Web Site the Modern Way. Part 13: The Cascade/CSS Specificity”

How To Make a Web Site the Modern Way. Part 12: Cascading Style Sheets

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.
Continue reading “How To Make a Web Site the Modern Way. Part 12: Cascading Style Sheets”

How To Make a Web Site the Modern Way. Part 11: The New HTML5 Elements

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:
Continue reading “How To Make a Web Site the Modern Way. Part 11: The New HTML5 Elements”

How To Make a Web Site the Modern Way. Part 10: Forms

Forms. Forms are boring. 75% of all work you do with forms is exactly like all the rest of the work you do with forms. BO-RING.

But, they’re the gateway to making real money on the web, so they’re kind of important.

Hopefully, after today you’ll know all about forms and will love them.

Let’s take a look at our example form:


<form action="http://www.drunkenfist.com/304/wp-comments-post.php" method="post" id="commentform">
<fieldset>
<legend>Contact Info:</legend> <p>
<label for="author">Name (required)</label>
<input type="text" name="author" id="author" value="" tabindex="1" /> </p> <p>
<label for="email">Mail (will not be published)(required)</label>
<input type="email" name="email" id="email" value="" tabindex="2" /> </p> <p>
<label for="url">Website</label>
<input type="url" name="url" id="url" value="" tabindex="3" /> </p>
</fieldset> <p>
<label for="comment">Comments</label>
<textarea name="comment" tabindex="4"></textarea> </p> <div class="button">
<input name="submit" type="submit" id="submit" tabindex="5" value="Submit" /> </div>
</form>

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.
Continue reading “How To Make a Web Site the Modern Way. Part 10: Forms”