HTML + CSS + JavaScript » CSS

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

Rob Larsen — Wed, 11 Aug 2010 18:18:43 +0000

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:


#main article strong {
	font-weight:bold;
}
#text #main article blockquote {
	background:#efefef url(http://d1eucpngoftcha.cloudfront.net/_assets/styles/images/bq-bg.png) no-repeat;
	color:#600;
	font-style: italic;
	margin: 15px auto 30px auto;
	padding: 30px 30px 15px 75px;
}
#text #main article blockquote cite {
	color:#333;
	font-size:90%;
	font-style:normal;
}
#text #main article ul {
	font-size:14px;
	margin: auto auto 30px 15px;
}

Some people take that approach and indent related or child styles and additional 2 or 4 spaces. That allows for hierarchical scanning and organization and makes (for some people) an easier-to-read style sheet. That looks like this:


.post-list li a{
	color:#A8A8A8;
}
    .post-list li a:hover{
        color:#000;
        text-decoration:none;
     }
     .post-list li .author a, .post-list li .author a:hover{
         color:#F30;
       	 text-transform:uppercase;
     }

Other people like to scan the file for selectors, so they produce CSS with selectors and declarations on one line. I personally have a hard time with this style, but some people I know swear by it, so I present it here:


  #wrapper                        {width:800px; margin:0 auto;}
  #header                         {height:100px; position:relative;}
  #feature .post                  {width:490px; float:left;}
  #feature .link                  {width:195px; display:inline; margin:0 10px 0 0; float:right;}
  #footer                         {clear:both; font-size:93%; float:none;}
  #footer .wrapper                {float:none;}

Whatever style you use, it’s good practice to minify your CSS before pushing to production so that all the extra characters you pump into your sheets for ease-of-use as a developer don’t slow down the experience of your users.

Shorthand

There are two ways to approach many families of CSS properties: verbose and shorthand. Verbose properties look like this:


.verbose {
    font-family: "Times New Roman", Times, serif;
    font-size: 12px;
    font-style: italic;
    line-height: normal;
    font-weight: bold;
    color: #003333;
    background-color: #FFFFCC;
    padding-top: 5px;
    padding-right: 10px;
    padding-bottom: 15px;
    padding-left: 20px;
}

Shorthand looks like this:


.shorthand {
    color: #003333;
    font: italic bold 12px/normal "Times New Roman", Times, serif;
    background: #ffffcc;
    padding: 5px 10px 15px 20px;
}

Once you’re used to it, shorthand is much faster to write and it takes up a lot less space. So… use shorthand. To get you started, here’s a fancy guide Dustin Diaz put together a few years ago. It’s out of date for newer properties, but it’s useful for the stuff you’re going to use every day.

One thing that’s super-useful to remember is the TRBL acronym which give the order of values in properties like margin and padding.

Reset Style Sheets

Much has been written about reset style sheets. I’m not going to add to the noise here. The point of them, simply, is to level the playing field across browsers so that you start from a common point when creating styles for your site or application.

I use one, and suggest you do too. As to which one, for a while I used a variation of Eric Meyer’s reset reloaded with the later addition of the following line in place for HTML5 sites to set proper display types for the new elements:


article,aside,canvas,figure,footer,header,hgroup,menu,nav,section,summary {
    display:block;
}

For my latest project we’re using this HTML5 Reset, which is based on Meyer’s sheet and adds several HTML5 enhancements.

I like it.

Organization

I organize my style sheets by area of the page, seriously influenced by the order in which I work on things.

The basic structure might look something like this:

_____________________
|   Copyright                |
------------------------
|   Common colors         |
------------------------
|   Reset Section          |
------------------------
|   Basic Typography     |
------------------------
|   #Header                 |
------------------------
|   #Content                |
------------------------
|   #SideBar                |
------------------------
|   #Footer                 |
------------------------
|   #Random Widgets    |
------------------------

I try to comment each section clearly and comment where appropriate outside of the sections to illustrate strange and wondrous constructions.

A small (production) snippet might look like this:


/* -------- COLORS ---------
lightest gray: efefef
light gray: ccc
medium gray: 999
darker gray: 666
darkest gray: 333
light blue links: 69F
body light blue links : 4B87C2
dark blue links : 036
visited: 306
red 930
--------------------------*/
/*reset section*/

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-weight: inherit;
	font-style: inherit;
	font-size: 100%;
	font-family: inherit;
	vertical-align: baseline;
}
ol, ul {
	list-style: none;
}
caption, th, td {
	text-align: left;
	font-weight: normal;
}
table {
	border-collapse: separate;
	border-spacing: 0;
}
caption, th, td {
	text-align: left;
	font-weight: normal;
}
blockquote:before, blockquote:after, q:before, q:after {
	content: "";
}
blockquote, q {
	quotes: "" "";
}
footer, section, article, nav, header, aside, figure, dialog {
	display:block;
}
body {
	font: 13px Verdana, Arial, Helvetica, sans-serif;
	color: #666;
	background-color:#ccc;
	padding-bottom:50px !important;
}
strong {
	font-weight:bold;
}
em {
	font-style:italic;
}
/*main div- holds the rest of the site*/
#container {
	margin: auto;
	width: 992px;
	background-color:#fff;
}
/*************header*****************/
#header {
	padding-top:20px auto auto 0;
	border-right:10px solid #fff;
	border-left:10px solid #fff;
	position:relative;
}
/*the anchor inside the h1*/
#container #header h1 a {
	text-decoration:none;
	color:#999;
	font: bold 30px Consolas, Inconsolata, "Lucida Console", Monaco, "Lucida Sans Typewriter", monospace;
}
#header h1 strong {
	color:#333;
	margin-right:-16px;
}
#header h1 em {
	color:#666;
	margin-right:-16px;
}
#header h1 a:hover {
	text-decoration:underline;
}
/*tagline*/
#respond, #container #header .title {
	font-size: 18px;
	color: #999;
	margin-top:10px auto 20px auto;
	font-style:italic;
}
/*end header*/
/************************main content area*****************/
/*overflow:auto clears floats like magic*/
#content {
	overflow:auto;
	border-right:10px solid #fff;
	border-left:10px solid #fff;
}
/*main copy area*/
#container #copy {
	width:600px;
	border:1px solid #999;
	padding: 16px 10px 16px 12px;
	float:left;
	-moz-border-radius: 12px; /* FF1+ */
	-webkit-border-radius: 12px; /* Saf3+, Chrome */
	border-radius: 12px; /* Opera 10.5, IE 9 */
	-moz-box-shadow: 0px 0px 8px #999; /* FF3.5+ */
	-webkit-box-shadow: 0px 0px 8px #999; /* Saf3.0+, Chrome */
	box-shadow: 0px 0px 8px #999; /* Opera 10.5, IE 9.0 */
	margin-bottom:20px;
}
/******************************/
/* AND SO ON                                   */
/******************************/

Again, it’s useful to minify your CSS to strip out all of those comments and all of that whitespace. Comments are good for development though, so be sure to use them.

and there you have it. some info on some very basic, but very important CSS practices. Next time we’ll start to look at common techniques.

Should be fun.

I’m Going to be Presenting at Design Camp Boston

Rob Larsen — Sun, 08 Aug 2010 14:04:59 +0000

I’m going to be presenting my Intro to CSS talk at Design Camp Boston on November 6, 2010. It’s at NERD. If you can’t make my Boston PHP Meetup version of the presentation, here’s your chance. Failing that, make sure to say hi if you’re there, because I’ll be around all day taking in the goodness.

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

Rob Larsen — Mon, 26 Jul 2010 14:37:14 +0000

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:

First, find all rules that apply to the target element/property. This will be some combination of browser default > style sheet default > targeted rules. One easy way to visualize this is to look at the “styles” tab in Firebug.

That view encompasses the latter two parts (style sheet default > targeted rules.) The first part (the browser default), is in effect an ancestor of the (otherwise, root) HTML element.

Once all the rules are gathered calculations are made to decide which ones are to be followed and which ones are to be discarded.That works like this:

Sort by explicit weight- ‘!important’ rules carry more weight than normal declarations.
Sort by origin: the author’s style sheets trump the browser default values.

Sort by specificity of selector. More specific selectors trump more general ones. The formula is as follows:

factor in any inline styles
count the number of ID attributes in the selector
the number of CLASS attributes in the selector
the number of tag names in the selector

Some examples:

Selector	# of INLINE RULES	# of IDS	#of CLASSES	# of TAGS	Specificity
LI	0	0	0	1	0,0,0,1
UL LI	0	0	0	2	0,0,0,2
DIV UL LI	0	0	0	3	0,0,0,3
DIV UL .red	0	0	1	2	0,0,1,2
#myLI	0	1	0	0	0,1,0,0
	1	0	0	0	1,0,0,0

Sort by order specified: if two rules have the same weight, the latter specified wins. Rules in imported style sheets are considered to be before any rules in the style sheet itself.

If two rules only impact one column, the higher number wins. If the selector cuts across more than one column, the biggest numbers in the farthest most left column wins. So, inline styles (which you should avoid) are more specific than an ID, which, in turn is more specific than a class, which itself will trump a tag. If you can wrap your head around these concepts, you’ll go a long way towards making sense of CSS and how the rules are applied.

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

Rob Larsen — Tue, 20 Jul 2010 17:42:59 +0000

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.

Getting the style sheet onto the page

Taking advantage of all that starts with getting the style sheet onto the page. The code for that looks like this:

xHTML

HTML5

That's very straightforward. the only difference between the two is the drop of the rel=stylesheet attribute in the HTML5 version. Otherwise, it's just an href, which points toward the file containing all your rules and the type, which indicates that it's a text file containing CSS instructions. There's one alternative attribute you can add if you're doing style sheets for different media. A typical example of that would look like this:

The media attribute indicates that the first style sheet should be used for screen display and the second style sheet should be used when the document is printed. It might surprise you, but many thousands of dollars are commonly spent getting print style sheets just right. It surprises me because I print web pages maybe two or three times a year. Some people think they're very important. You've been warned. No, I'm not bitter. I love spending days on print style sheets.

A Simple CSS Style Sheet

We'll use this simple example to give you a short tour of the inner workings of CSS.


/* A single tag */
/* Many elements will inherit from this tag, since it's high up in the document */
body {
	background: #CCC url(/_assets/styles/images/page-bg.png) repeat-x;
	font: normal .825em/1.65 Verdana, Arial, Helvetica, sans-serif;
	color: #333;
}
/*an ID */
#container {
	background:#fff;
	height:auto;
	margin:auto;
	overflow:auto;
	position:relative;
	width:980px;
}
/* A single tag */
h1 {
	color: #999;
    font-size: 200%;
    text-transform: uppercase;
    font-weight:normal;
}
/* A series of ID/tag combinations, with the same rules applied */
#main h2, #main h3, #main h4, #main h5 {
	font-weight:normal;
    line-height:1.4;
    margin-bottom:7px;
    margin-top:7px;
}
/* A class */
.more-link {
	font-weight:bold;
    text-transform:uppercase;
    font-size:110%;
    text-decoration:none !important;
}
/* An ID/class combo */
#main .share {
	margin-top:7px;
}
/* An ID/class/tag combo */
#main .share strong {
	background: url(/_assets/styles/images/share.png) 0px 3px no-repeat;
	color:#393;
	padding-left: 19px;
	text-transform:uppercase;
}

There are two things to pay attention to, one is the ID/Class/Tag combination. That's called a selector. A selector gives context to the browser and tells it what elements it wants to style. Selectors can be combined in a comma separated list if you want to apply the same styling to several different elements.

Inside the curly braces you'll find the declaration, which are property/value pairs that define the specific rules the browser should apply to matching elements.

Take a look and familiarize yourself a little bit with the structure of a style sheet. Next time out we'll go through one of the most important concepts in CSS, the way rules are calculated. After that, we'll get into some of the different properties, what they're for and how they should be used.

I’m Presenting on CSS in October

Rob Larsen — Thu, 08 Jul 2010 14:34:21 +0000

I haven’t posted about this yet. I’m an incredible idiot. I’m presenting at the Boston PHP group in October. My presentation is a couple of weeks before Steve Krug. No pressure.

I hope to see you there

Learn CSS (with me)

Is CSS still a mystery to you? Do you find yourself editing your styles over and over justo get them to display correctly in IE and Firefox? Have you created a powerful application, and want it to look nice and clean? Do you want to take your knowledge of CSS and Design to the next level?

In this presentation Rob Larsen will step through the basics of Cascading Style Sheets (CSS,) the visual language of the Web. Starting with the most fundamental concepts and finishing with concrete examples illustrating common patterns, this presentation will serve as a launching point for those new to CSS and will strengthen the understanding of the core principles for developer or designer more experienced with CSS.

In this event you will learn:

Basics of CSS

Design & Layout

Web Standards

Rich Visual Behaviors

CSS1, CSS2, CSS3

Frameworks, Abstractions, etc.

Dealing with cross browser support

Separation of style, content and behavior

Testing

Tips & Tricks

If you still fumble with CSS and want to take your experience to the next level, then this event is for you.

About the presenter:
Rob Larsen has more than 11 years of experience building and designing web sites and web applications. Currently he’s a Consultant at Isobar, working for some of the world’s largest brands.

Prior to joining Isobar, Rob was the Principal Presentation Engineer at Cramer. At Cramer, Rob and his team produced standards-based, accessible and SEO-friendly sites and rich media applications. Before that, Rob worked for several years as a consultant for clients like Compete, Duracell, Gillette, Boston’s Museum of Science, PC Connection, RSA Security, State Street Corporation and Webex.