HTML Post #7: CSS & Browsers

In closing up the HTML series, we’re gonna cover stylesheets and differences between browsers.


This is just a text document that holds all your style information. It is stored in a separate file so the webpages are smaller and keep traffic down on the webserver and the internet.

To set the style of all p tags, you would say:

p {
    color: green;
    text-align: center;
    background: red;

That would make everything inside a p tag green, centered, and have a red background. You could do the same with a div tag, table tag, img tag, or any other tag. You can also use a class name:

.christmas {
    color: green;
    text-align: center;
    background: red;

Any tag that has class=”christmas” would have those styles. You can combine the two: {
    color: green;
    text-align: center;
    background: red;

Now, any p tag that has class=”christmas” will have the style.

The “” in that last example is called the selector. There are plenty more types of selectors, including “ancestor descendant” and “parent > child”. Here is more information about selectors and style properties.


Putting this in the head section will link the page with a stylesheet at

<link rel="stylesheet" href="" type="text/css" />

You can even set a print css, only used when printing the page:

<link rel="stylesheet" href="" type="text/css"
 media="print" />

A document can have multiple stylesheets. The second one will supercede the first if there’s any duplication. There is one exception. If the first file says this:

p.error {
    color: red !important;

Then the second file will have to use “!important” if it is to supercede the color.

Browser Differences

From time to time, you’ll run across something that looks fine in one browser and totally funky in another. If you run into this, do a quick search or two. Odds are that someone else has run into it too.

Many times, the answer will be an IE conditional statement or some sort of CSS Hack. The IE conditional works like this:

<!--[if IE]>
<p>According to the conditional comment this is Internet Explorer</p>

It’s really one big html comment! IE will show it. Firefox and the rest will ignore it. You can even say:

<link rel="stylesheet" href="" type="text/css" />
<!--[if IE 6]>
<link rel="stylesheet" href="" type="text/css" />

That will tell only IE 6 to use an additional stylesheet.

<link rel="stylesheet" href="" type="text/css" />Linking

HTML Post #6: Forms

An HTML form is pretty much anything that requests the user for information. They can be used for just about anything from leaving a comment on a blog to uploading a picture to facebook. Even logins are very simple HTML forms.

Here’s an example login, in html:

<p>Please log in.</p>
<form action="" method="post">
Username: <input name="username" /><br />
Password: <input name="password" type="password" /><br />
<input type="submit" value="Log In" />

The form tag is where the magic happens. It has an action attribute which is where the form sends the information. The form can use one of two methods to send the information: post or get. Post is more secure, and prefered when doing logins.

There are three inputs. The name attribute of the input is sent back to the web server as the name of the data. The type is the type of input, text being the default. You can also use “password”, “submit”, “file”, “checkbox”, “hidden”, or “radio”.

Also, note that all inputs for the form are contained in the form element.

The previous code makes this form:

Please log in.



Get Vs. Post

The main difference between Get and Post is how the data is sent. Get data is encoded into the URL. For example, is the URL when searching for “compguyaug” on google. This makes get form results bookmarkable, in most cases. Therefore, get works great for searches and data lookups.

Post sends the data separate from the URL. This makes it more secure and should be used for logins and adding/editing/updating any data. That way, the end user can’t bookmark adding a certain customer and keep opening that bookmark and unintentionally adding that customer.

Note on Files

When creating a form for file uploads, make sure you use post. Also, a special encoding type must be specified:

<form enctype="multipart/form-data" method="post"

Also, some servers have a limit as to how large of a file can be uploaded.

HTML Post #5: Tables & Whitespace

Tables  are one of the fundamentals of html. At one point in time, everyone’s site was built inside a table. It was really easy to do this. Also, whitespace, including spaces, tabs, and new lines, don’t matter much in html, but there are ways to get the whitespace you desire.


Here’s a 2×2 basic table:

<table border="1">
  <td>Row 1, Cell 1</td>
  <td>Row 1, Cell 2</td>
  <td>Row 2, Cell 1</td>
  <td>Row 2, Cell 2</td>

Which looks like this:

Row 1, Cell 1 Row 1, Cell 2
Row 2, Cell 1 Row 2, Cell 2

Note that I put border=”1″. If I put border=”0″, no border would be added, like this:

Row 1, Cell 1 Row 1, Cell 2
Row 2, Cell 1 Row 2, Cell 2


Each cell in the table can span across, down, or both directions. This is very similar to the merge cell function in Excel. There are a few points to keep in mind. When you span several columns, the next cell in the html code will be the next cell on the screen. Likewise, when you span several rows, you have to skip that cell on the following row(s). Here’s an example:

<table border="1">
  <td rowspan="2">I span 2 rows.</td>
  <td colspan="2">I span 2 columns across.</td>
  <td>I am a single cell.</td>
  <td>I am a single cell.</td>
I span 2 rows. I span 2 columns across.
I am a single cell. I am a single cell.


Did you notice that the table in the last example could use some text alignment? Maybe vertically align the rowspan cell to the top? Maybe center the colspan cell? How about making the rowspan cell into two lines? Let’s take a look.

Here’s how to vertically align to the top:

<table border="1">
  <td rowspan="2" style="vertical-align: top">I span 2 rows.</td>
  <td colspan="2">I span 2 columns across.</td>
  <td>I am a single cell.</td>
  <td>I am a single cell.</td>
I span 2 rows. I span 2 columns across.
I am a single cell. I am a single cell.

You could also set vertical-align: bottom for the bottom or middle for the middle.

Centering the colspan cell:

<table border="1">
  <td rowspan="2">I span 2 rows.</td>
  <td colspan="2" style="text-align: center">I span 2 columns across.</td>
  <td>I am a single cell.</td>
  <td>I am a single cell.</td>
I span 2 rows. I span 2 columns across.
I am a single cell. I am a single cell.

Other possibilities are “left”, “right”, and “justify”.

And finally, inserting a line break:

<table border="1">
  <td rowspan="2">I span<br />2 rows.</td>
  <td colspan="2">I span 2 columns across.</td>
  <td>I am a single cell.</td>
  <td>I am a single cell.</td>
I span
2 rows.
I span 2 columns across.
I am a single cell. I am a single cell.

HTML Post #4: Divs & Classes

Div Tags

A div tag is very similar to a paragraph tag. The difference from a rendering perspective is that paragraphs have a padding at the top and bottom by default. You can use div tags just like p tags.

Float Style

A div, and other tags, can have a float style. This can float the element on the left or the right. Here’s an example:

<div style="float: right">This floats on the right</div>
<div style="float: left">This floats on the left</div>
<div style="clear: both">This displays under the floats</div>
This floats on the right
This floats on the left
This displays under the floats

Yes, “clear: both” will clear all the floats above it. You can do “clear:left” to place is below the lowest left floating element. Float styles can be used with images as well.

CSS Classes

Styles can be declared once and referred using the class attribute. These styles can be declared using a stylesheet file or a style element. A stylesheet is better because it can be used by multiple pages by adding one line inside the html header:

<link rel="stylesheet" type="text/css" href="" />

If you want to just play a little bit, you can put a style section in the html header:

<style type="text/css">
/* This is a style comment. */

Put your stylesheet here in the html header!


You can take this:

<div style="float: left; color: red;">Red Left</div>
<div style="float: left; color: red;">Red Left</div>
<div style="float: left; color: red;">Red Left</div>
<div style="float: left; color: red;">Red Left</div>

And turn it into this:

<style type="text/css">
.left-red { float: left; color: red; }
<div class="left-red">Red Left</div>
<div class="left-red">Red Left</div>
<div class="left-red">Red Left</div>
<div class="left-red">Red Left</div>

Note that the class in the style starts with a period and in the div doesn’t. This is because you are telling the browser that left-red is a class. If it started with a letter, the browser would think it was an element, like a “div” tag. Also, curly braces surround what would be in the style attribute.

Now, go play around for 30 minutes with some html. If you have a question, feel free to ask.

HTML Post #3: Images

Image Tag

<img src="" alt="Example Image" />

That will give you just an image, plain and simple. The alt tag is important for people who have images disabled and for search engines. Here’s how to center or left align an image:

<img src="" alt="Centered Image" align="center" />
<img src="" alt="Left Aligned Image" align="left" />

When using an image inside a link, there will be an automatic blue broder. To remove this:

<a href="">
<img src="" alt="Link Image" border="0" />

Background Images

We’ve all seen images used as backgrounds. It’s fairly simple. To put a background image for the whole page, change the opening body tag to this:

<body style="background: url('image.jpg');">

You can change the repeat by adding the repeat-y keyword like this:

<body style="background: url('image.jpg') repeat-y;">

The image will fill the page top to bottom, but not left to right. There are plenty of options for you background image. Here are the repeats:

  • repeat — tiled to fill completely (default)
  • repeat-y — repeats top to bottom
  • repeat-x — repeats left to right
  • no-repeat — does not repeat

You can also make it scroll with the page or fixed to the screen and does not scroll. Scroll is the default.

You can also set the background of a p, or paragraph, tag the same way.

<p style="background: url('image2.jpg');">I've got a background image!</p>

The full image will not show if there is not enough text.


You can set the background color, similarly to using an image:

<p style="background-color: red;">I've got a background color!</p>
<p style="background-color: red; color: yellow;">I've got a foreground color!</p>

In the second example, the text will be yellow on red, while the first is black on red.

HTML Post #2: Lists & Links


There are two basic types of lists in HTML: ordered and unordered. Unordered lists are bullet lists. Ordered lists are numbered. Each item in the list is housed in between opening and closing “li” tags.

Ordered Lists

A simple numbered list is surrounded by opening and closing “ol” tags. Here is a quick example:

<li>Step 1.</li>
<li>Step 2.</li>

This looks like:

  1. Step 1.
  2. Step 2.

You can use a different marker, just as lowercase letters, uppercase letters, and roman numerals.  This is done by styling the list. Here’s how to do roman numerals:

<ol style="list-style-type: upper-roman">
<li>Step I.</li>
<li>Step II.</li>
  1. Step I.
  2. Step II.

Here are the different ordered list style types:

upper-letter Uppercase Letters
lower-letter Lowercase Letters
upper-roman Uppercase Roman Numerals
lower-roman Lowercase Roman Numerals
upper-greek Uppercase Greek Letters
lower-greek Lowercase Greek Letters
decimal Regular Numbers
decimal-leading-zero Leading Zero

Unordered Lists

These are almost identical to ordered lists. Instead of “ol”, you use “ul”. The default list style type is a bullet. Here are the unordered types:

  • none
  • circle
  • disc
  • square

Here’s that unordered list in HTML:



A link is super easy to do.  It’s an “a” tag.  The tag has an “href” attribute that contains the url, just like the “style” attribute contained the styling information. Here’s a quick example:

<a href=""></a>

Which would like like:

You can also tell the browser to open the link in a new window/tab by using the “target” attribute:

<a href="" target="_blank"> in a new window/tab</a> in a new window/tab

You can even style the “a” tag to set the color and  remove the underline:

<a href="" style="color: black; text-decoration: none"></a>

Yes, you can set the color of any text with that style attribute. Also note that multiple styles are separated by a semicolon, and it does not matter the order of the styling when put in the “style” attribute, so long as there’s nothing conflicting.

Well, that’s pretty much it for lists & links. The next post is all about images, so check back!

HTML Post #1

More and more people are starting their own websites. Whether it be a blog, an e-commerce site, or a tribute to their pet, learning HTML will help tremendously. Sure, there are those nice little editors, but they cannot do everything. Plus, sometimes you’ll want to tweak that HTML so everything displays properly. In this series, I’ll cover the basics of a webpage, images, tables, lists, styles, and some other topics.

Base Document

I have setup a base HTML document to show the basics that will be covered in this series. You can find it here. It contains a lot of comments which are ignored by the web browser. An HTML comment starts with “<!–” and ends with “–>”, quotes for clarity.


Tags are special markers that tell the web browser how to display the page. Tags always start with a less than symbol “<” and  end with a greater than symbol “>”. There are three types of tags: opening, closing, and self-closing. Closing tags start with “</”. Self-closing tags end with “/>”. Every opening tag should have a closing tag. An HTML document will display everything between the “<body>” opening tag and “</body>” closing tag.


All HTML documents should start with a DOCTYPE tag. This tag tells the browser which version of HTML you are using and determines how it will render the page. There are serveral different doctypes, but for this series, we’ll be using XHTML Strict.

Basic Tags

The basic tags are:

  • html
    This should open immediately after the doctype and close at the very end of the file.
  • head
    This follows the opening html tag. It contains the title, meta data, and links to stylesheet and javascript files.
  • body
    This follows the closing head tag. Its contents will display as the webpage. Update: Javascript should be placed as close to the end of the bottom as possible.
  • title
    This contains the title of the page, it shows in the tab and/or the titlebar of the browser.
  • p
    This is a paragraph. Each paragraph will have a bit of whitespace before and after them.
  • b
    This bolds the text between the opening and closing b tag.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
<title>This is just a sample</title>
<p>This is a paragraph.</p>
<p><b>This is a bold paragraph.</b></p>
<p>There is only <b>one</b> word bold in this paragraph.</p>
<p>It is <b>important</b> to close tags in <b>reverse</b> order they were <b>opened.</b></p>

jQuery Intro

jQuery is a very useful javascript library. It provides unified methods to assign event handlers, perform ajax requests, change CSS classes, etc. All of these operations, using jQuery, are performed the exact same way no matter what web browser the end user is running.

Selecting DOM Elements
Before you can do almost anything, you’ll need to select an element to work with. Normally, this is done by by using


But jQuery has an easier way.


This  does the same thing as the previous example. When using a #, you are selecting by id. This is just like a CSS selector.

Keeping with the CSS selectors, using a period (.) at the beginning selects all elements with that class name. Also, putting an element name selectes that element. Separating selectors with a space, denotes a ancestor/descendant relationship. Separating selectors will a comma, elements matching any of the selectors will be selected.

Event Handlers
Assigning an event handler is a lot easier using jQuery. Once you have selected your element(s), run the function mousedown to add a mousedown event handler. For example,


Adds a mousedown event handler (handler) to all td elements.

In addition to the ease of assignment, the event object passed to the handler is the same across various browsers. There are a few caveats, but the jQuery crew is working to resolve these.

Manipulating Classes
There are several functions for manipulating classes, including removeClass, addClass, and toggleClass. These are fairly self-explanatory. Running removeClass with no arguments removes all classes from the selected element(s).

jQuery makes Ajax very simple. To do a post, all you need is:'/path/to/post',{data1:'hello',data2:'world'})

Gets are even easier:


That’s jQuery in a nutshell. There is much more you can do with jQuery that wasn’t covered. jQuery has a whole set of UI controls available, but these increase the amount of code & CSS that your end user has to download.

For more information, visit

Minify the Web

Most websites are built for high-speed internet connections, even though there are plenty of people still on dial-up. There are many ways to make your site work much faster for all your users, dial-up and high speed alike. When a site is optimized, users are more likely to stay on the site longer and keep coming back for more.

Utilizing the browser’s cache
The browser’s cache can kill a lot of communications between the browser and the web server. To take advantage of the cache, you should limit the amount of data & code in the HTML. When a file is in the cache, the browser asks the server to send the page if it’s been modified since a certain date/time, if the browser does that.

Step 1: Use a stylesheet
Moving the style information into a stylesheet is priority #1. If you have 1500 bytes of style info inside the HTML doc and a user, on average, views 5 pages, that’s 7.5KB (3 seconds on dialup) per visit. Moving that data into a stylesheet means that the user only downloads the stylesheet once.

Step 2: Make javascript external
Just like a stylesheet, doing this will save time by utilizing the browser’s cache. Also, remove any duplicate javascript.

Minifying the javascript file is like compressing it. You can do this by hand or use one of the many tools available for free on the web. Remeber to test the minified code. A warning: DO NOT DELETE YOUR ORIGINALS. If you do, you’ll wish you hadn’t when it comes time to upgrade or fix a bug.

Step 3: Make use of CSS sprites
If you have 15 images that are on every page, that’s 15 files to download or 15 files to check for modification. Merging those 15 images into 1 larger image is fairly easy using GIMP or Photoshop. Once that is done, setting up the CSS sprites can be easy or difficult depending on how your HTML is setup.

A CSS sprite is a CSS background image using the height, width, background and background-position CSS attributes. If the image is a link, you’ll need to make a transparent image to place inside the link.

Step 4: Compress your images
This is, perhaps, the quickest and easiest way to speed up your site. GIMP and Photoshop allow you to set the compression level when saving the jpeg/gif/png. I’d suggest using 75% to 85% quality, but every image is different. You’ll have to play around with the setting a bit.

Step 5: Rework the HTML
Removing excess white space is one way. You can also rename CSS classes and element ids to a single letter, and remove any unneeded attributes altogether. This step is the most time consuming.

Other Considerations
Use only 1, 2 max, domain name(s) ( not counting any ads/analytics you have as DNS lookups can be slow. Also, move Google Analytics and any other non-essential javascript to just before the closing body tag, that way your site shows up before the 1-5 seconds wait for that javascript.

YSlow Firefox Extension
IMO, this is the best extension for optimizing a website. It gives you a letter grade and detailed information on how to improve your score. It does require Firebug, so make sure that’s installed first.

Happy Optimizing.