Archive for the ‘Web Standards’ Category

Book Review – CSS Mastery

CSS Mastery (Advanced Web Standards Solutions)” by Andy Budd, Cameron Moll, and Simon Collison, is a good resource for how to use web standards and CSS in designing and laying out web sites. Although it’s by different authors, it is a good followup to the book “Web Standards Solutions“.

This book takes a task, and explains in detail how you might handle it. For example, chapter 5 is on creating navigation bars and chapter 7 is about site layout using CSS. We use many of these techniques in most of the web sites we develop.

Other useful chapters are on troubleshooting problems with your CSS, and hacks to deal with browser incompatibilities. We have Microsoft to thank for many of these hacks. IE 7 is much improved over previous versions. It is still good to be aware of these techniques.

Here is a link to the publisher’s web page for the book.
Advanced Web Standards Solutions Cover Image

The two Web Standards Solutions books give a good starting point for people that want to learn more about CSS. In addition, there are thousands of web sites that offer help with CSS. I also recommend having an expert you can ask questions, thanks again Matt.

Recently, I was asked if I know of any training on using CSS, so I’m looking for recommendations. If you know of any professional development opportunities on learning CSS, either online or traditional, please post a comment.

Which to Use – div or span?

When I’m writing code for web pages, I normally have to stop to think when to use a <div> tag, and when to use a <span> tag. The big difference is that <div> is a block-level element while <span> is an inline element.

Block-level elements usually contain other elements, including text, inline elements, and other block-level elements. You can think of them as boxes. They are normally displayed with space before and after this box, unless you modify this behavior with CSS.

Inline elements usually contain text or other inline elements, and are displayed where they occur. They are usually used to give your document more semantic meaning.

Here is a simple example:

<div id="message">
  <p>The current date is <span class="date">August 28, 2007</span>.
  Labor Day is just around the corner.</p>
</div>

Notice how the <div> tag surrounds a chunk of content that contains a <p> tag, which is another block-level element. The <span> tag simply surrounds text within the content.

With these tags in place, we have plenty of hooks for CSS to use to format this content. By having the date in the <span> tag, we can do special formatting on the date if we choose.

Forms with CSS (3 of 3) – Checkboxes

The first two posts in this series showed a way to markup an HTML form, and apply styles to it. This works well for any field where the label comes before the field.

Typically for checkboxes, we put the checkbox field first, with the label after it. The HTML code is similar to the other form fields. The differences are that the <label> is now after the <input> tag, and we’ve wrapped this pair in a <div> section with a class attribute.

<div class="alignMe">
  <input id="employee" type="checkbox" name="employee" />
  <label for="employee">ISU Employee</label>
</div>

Now we add a couple styles that hook into this new class:

fieldset .alignMe {
display:block;
margin-left:6.9em;
}
fieldset .alignMe input {
width:20px;
}

With these added, we end up with a form that looks like:

Form with Checkbox Included
The extra <div> tags and the corresponding styles allow you to shift the checkbox so it’s in line with the other form fields. You can use this technique on other form elements such as radio buttons as well.

Related Articles:
Forms with CSS (1 of 3) – HTML Markup
Forms with CSS (2 of 3) – Styles

Forms with CSS (2 of 3) – Styles

After doing the semantic HTML code for a form, as shown in “Forms with CSS (1 of 3) – HTML Markup“, your form will look like something like:

Form without Styles Applied

While this is usable, we can improve it by adding some styles. Here are the styles I added:

fieldset
{
display: block;
margin: 0 0 1em 0;
border: 0 solid #FFFFFF;
border-top: 1px solid #000000;
padding: 0 1em 1em 1em;
width:275px;
}

fieldset legend {
font-weight:bold;
}

fieldset label, fieldset input, fieldset select {
display: block;
width: 150px;
float: left;
margin-top: 8px;
}

fieldset label {
width: 6em;
padding-right: 20px;
}

fieldset br {
clear: left;
}

The resulting page looks like:

Form with Styles Applied

As you can see, you can drastically change the look of the form with just a few styles. If you wanted, you could add still more styles for additional formatting.

The styles for this example were adapted from the web pages “CSS2 – Tableless Forms” and “The Man in Blue > Experiments > Form Layout“. I only made a few modifications from these examples.

Related Articles:
Forms with CSS (1 of 3) – HTML Markup
Forms with CSS (3 of 3) – Checkboxes

Forms with CSS (1 of 3) – HTML Markup

When I develop web pages, I try to use web standards complaint HTML code and CSS for layout and design. This gives a lot of flexibility in the design while being usable for people using screen readers and other browsers that don’t use CSS.

This has worked fine with regular web pages, however I’ve always struggled with how to mark up forms to be semantically correct. After doing a little research on the subject, I’ve switched the way I typically write forms. I’m still learning so am open to suggestions to improve my skills.

Some of the forms I used to write would have elements that looked like:

<p>
  First Name:
  <input id="txtFirstName" name="txtFirstName" />
</p>
<p>
  Last Name:
  <input id="txtLastName" name="txtLastName" />
</p>

When I wanted the input boxes to line up vertically with each other, I’d either add the necessary spacing using “ “or build a table with labels in the first column and input fields in the second.

I’ve come to realize that there are better ways to do this markup. The way I typically do this now is:

<fieldset>
  <legend>Name</legend>
  <label for="txtFirstName">First Name:</Label>
  <input id="txtFirstName" name="txtFirstName" />

  <label for="txtLastName">Last Name:</Label>
  <input id="txtLastName" name="txtLastName" />
</fieldset>

This adds a little more HTML code, however provides more semantic information. Once you get used to coding the form like this, it’s pretty easy. A huge advantage of using the <fieldset> and <label> tags, you have a lot of hooks to use with your CSS. This makes it easy to format the form. More information in “Forms with CSS (2 of 3) – Styles

Note for ASP.NET programmers: The third tip in this article from Standards Schmandards shows how to tie your <label> tags to the tags that is generated from <asp:TextBox>.

Related Articles:
Forms with CSS (2 of 3) – Styles
Forms with CSS (3 of 3) – Checkboxes

Book Review – Web Standards Solutions

About two years ago, we were just getting going with web standards and cascading style sheet (CSS) based layout. We were struggling to make some of our pages look and feel the way we wanted them to, and with inconsistencies between different client machines and browsers. It seemed like we were spending a lot of time with the CSS, and I was questioning to myself whether it was worth the trouble. I just didn’t “get it”.

Matt Heerema, our web designer at the time, sensed that I was struggling, so he loaned me his copy of “Web Standards Solutions” by Dan Cederholm. He told me it was an easy read, and that it would help me in understanding why complying with web standards was something we should strive to accomplish. He was right.

Sometimes technical books are somewhat dry, with a lot of theory, and you need to force yourself to read though the tough parts. Not this book. After starting reading, it was hard to put down. The chapters are short, informative, and interesting. I read the book in about 3 sittings.

Each chapter in the book takes a topic, and shows 3 or 4 methods of implementing that functionality in your web page. For example, the chapter on headings shows how you can make text stand out as headings on your page using a span tag with embedded styles, paragraph tags with bold text, or heading (<h1>, <h2>, etc.) tags. It explains the advantages of using the the heading tags, which is the web standards compliant method. It then goes on with some “Extra Credit” of how to apply some styles to your heading tags to make them really stand out.

This book will give you an appreciation for why web standards are important, and will give you an introduction to CSS. It will not give you a complete understanding of CSS, but will hopefully leave you hungry for more. You can then pick up another book that does more advanced CSS techniques, such as the followup book “CSS Mastery, Advanced Web Standards Solutions”.

I liked this book so much, I purchased a copy to have on my book shelf. Whenever someone says they are interested in learning more about web standards or CSS, it’s the first book I recommend. It is a must read for anyone doing web development. More information can be found from the publisher’s web page.

The Markup and Style Handbook Cover Image