CSS shorthand properties exist to save typing, and make code easier to read. This tutorial will look at a few examples of shorthand property values that might see in a style sheet, so you can understand how to edit them to your liking.

View tutorial

At the time of writing, I’m aware that the CSS Coding Standards to which I refer are known to be out of date, but I raise my points anyway.

The discussion on the ordering of CSS properties arose after I found the WordPress CSS Coding Standards Codex page and suggested on the Genesis Theme forums that they might like to standardise their CSS files to follow the WP standard.

View the rest of the discussion

Some people like to use definition lists to markup Question and Answer content:

<dl class="q-a">
<dt>What is the question?</dt>
<dd>Depends on the answer.</dd>
</dl>

While you could style the definition term (question) to appear visually different, another suggestion is to include a Q: or A:, or someone’s initials if it’s an interview, before each line. You could enter this into the markup, or instead use CSS:

dl.q-a dt:before {
	content: 'Q: ';
}
dl.q-a dd:before {
	content: 'A: ';
}

Some non-modern browsers may not support this, but for that do, no pollution of content is needed. This is how your browser shows it (live demo):

What is the question?

Depends on the answer.

Found these commented out in an old project – not tested again to see if they are still valid.

/* Full width fluid sidebar-Main-sidebar */
.custom .full_width .page {width: auto;}
.custom .full_width #column_wrap {width: 75%; margin: 0 25% 0 0;background: transparent url(images/dot-004000.gif) repeat-y scroll 20% 0;}
.custom .full_width #content {width: 80%; margin: 0 0 0 20%;float:left;}
.custom .full_width #sidebar_1 {width: 20%; margin: 0 0 0 -100%;}
.custom .full_width #sidebars {width: 25%; margin: 0 0 0 -25%;}
.custom .full_width #sidebar_2 {width: auto;}
.custom .teasers_box {width: 100%;margin: 0;}
.custom .teaser {width: 50%;}
.custom .teaser h2 {margin: 0 0.9em;}
.custom .teaser .teaser_date {margin: 0 1.5em;}
.custom .teaser .format_teaser {margin: 0 1.2em;}
.custom .teaser .teaser_link {margin: 1em 1.5em;}
.custom .no_sidebars {background: #FFF !important;}
.custom .no_sidebars #content {margin: 0;}

/* Full width fluid sidebar-Main */
.custom .full_width .page {width: auto;}
.custom .full_width #content {width: 80%;}
.custom .full_width #sidebars {width: 20%;}
.custom .teasers_box {width: 100%;margin: 0;}
.custom .teaser {width: 50%;}
.custom .teaser h2 {margin: 0 0.9em;}
.custom .teaser .teaser_date {margin: 0 1.5em;}
.custom .teaser .format_teaser {margin: 0 1.2em;}
.custom .teaser .teaser_link {margin: 1em 1.5em;}
.custom .no_sidebars {background: #FFF !important;}
.custom .no_sidebars #content {margin: 0;}

Cross-browser way to clear floats. Some may prefer a more semantic name, but the code still works the same.

/* Float clearing for IE6: */
* html .clearfix
{
  height: 1%;
  overflow: visible;
}
/* Float clearing for IE7: */
*+html .clearfix
{
  min-height: 1%;
}
/* Float clearing for everyone else: */
.clearfix:after
{
  clear: both;
  content: ".";
  display: block;
  height: 0;
  visibility: hidden;
}