These days there are many browsers out there and of course you can test your page on them if you have the time. Even then there is the chance you missed one or two and then you are back at zero. Also, it is possible that a design doesn’t allow users with a disability to use the page.

So what to do?

First of all it is a good advise to use valid HTML and CSS. Also make sure you don’t abuse JavaScript, Flash and Gifs. If you are reading this article, I assume I don’t have to tell you about these things…

But how can you validate your HTML, CSS and Accessibility?

Well, I will tell you which tools I’m using to validate my websites. These tools are not perfect, but if you use them properly you make sure that they cover each others weakness and leaving you with a valid website at the end. Also, there are some things you can’t validate by using a tool. You need to know the guidelines for HTML, CSS and Accessibility (WCAG)

HTML Validation

My major validator is the official W3C validator. It is always up-to-date to the latest spec’s and allows you to either test a page directly if said page is online or you upload/copy the page to the validator. You can reach the validator from any location as long as you are online, which can be very handy.

Additionally I’m using my Firefox for testing my websites. I have two very powerful extensions installed:

• HTML Validator by Marc Gueury
• Web Developer by Chris Pederick

The HTML Validator by Marc Gueury allows you to validate the page inside the browser without the need to visit a validator page like the W3C validator. The extension has 3 algorithm to validate the page.

• The “HTML Tidy” algorithm is based on the HTML Tidy from W3C
• The “SGML Parser” is based on the SGML reference information for HTML
• The “Serial” uses both validator algorithms one after the other.

The first algorithm is recommended for all while the other two are recommended for professionals. I myself prefer the Serial algorithm, but I believe you need to test which one works best for you.

The Web Developer tool by Chris Pederick does not have a built in validator, but it allows you to easily check a page with the W3C validator. Also it allows you to easily disable scripting or it outlines your HTML elements. It has many more options and is also useful for validating your CSS or W3C.

CSS Validation

I‘m using the official W3C validator for validating my CSS code. It is always up-to-date to the latest spec’s and allows you to either test a page directly if said page is online or you upload/copy the page to the validator. You can reach the validator from any location as long as you are online, which can be very handy.

Additionally I’m using the Web Developer toolbar. It allows you to disable CSS if you want to. You can edit the CSS code and see the result without having to edit the original file and upload it again. You can even resize your browser window to test your layout for different resolutions.

Accessibility Validation

When writing a website I always rely on the HTML Validator extension. It tells you almost everything you need to know.

There are also online validators available, one of them you can easily access with the Web Developer toolbar. If it is not enough, you can always Google for other accessibility validators.

Wrap Up

Now you know which tools I’m using. I hope these tools will also help you. Or are you using them already? Do you know other tools you can recommend?

So how do you edit and style your list?

Of course you are able to use almost any of the available CSS properties, like borders, background, font and so on.

A list without icons

Let’s assume you want to use the list to create a menu, but you don’t want to have the default list icons added by the browser, because it would break with the design. How do you remove the icons? With a tiny bit of CSS of course:

ul, ol {
list-style:none;
}

This code will remove any list style, leaving you a list without the list icons. It works for both types of lists, order and unordered. If you prefer using in-line editing, just add a style="list-style:none;" to the “ul” or “ol” tag and you are set.

A list with one of the default icons

Now let’s have a look at how we can use one of the many default icons. Please keep in mind that some of those icons are show different in different browsers. I recommend testing them before you use them.

Before we can set an icon, we need to know which icons exist. I took the time and compiled you a list:

• disc
• circle
• square
• decimal
• decimal-leading-zero
• lower-roman
• upper-roman
• lower-alpha
• upper-alpha
• lower-greek
• lower-latin
• upper-latin
• hebrew
• armenian
• georgian
• cjk-ideographic
• hiragana
• katakana
• hiragana-iroha
• katakana-iroha

And before you start yelling at me “How does those icons look like” just have a look at my example and try them all.

To add one of the icons you can use this code:

ul, ol {
list-style-type:liststyle;
}

Replace the liststyle with the name of the icon you want to use. Of course you can also use the in-line style style="list-style-type:liststyle".

Easy so far, isn’t it?

A list with an icon/image of your choice

Now let’s go a step further. I believe you can imagine that the default icons limit you in your design efforts. Fortunately CSS enables you to use an own image by using the code:

list-style-image:url(path-to-image);

Replace the path-to-image with the url to your image. For the image I use in my example the path would be:
http://www.ruelicke.net/wp-content/themes/ruelicke/images/feed-icon.png

You can use any kind of image, but depending on it’s size you need to play with the padding and font size to make it fit with the list.

Wrap up

Congratulation, you are now able to adjust the list style icon to your needs. You no longer need to use the default icon.

If you like it fancy, you could style the list as I did although I would never use that design. Of course I would never use that one on a site, but I think it is always good to play around with the CSS to get an idea about how it works.

Any questions left?

I then decided to give this technique a try on my blog and we continued talking about it, which helped me to tweak my CSS code to make this “magic” happen. The code for this “magic trick” was posted as comment, but I think it is better to put it into an extra tutorial article although it is nothing special if you know how to use Cascading Style Sheets.

There are two methods to achieve the goal, I will tell you how to do it and mention the advantages and disadvantages.

First method

div.entry p:first-letter {
font-size:1.5em;
font-weight:700;
text-transform:capitalize;
}

This one will auto-add the “first letter of a paragraph larger than the others” effect, which saves you a lot of time. Unfortunately you are not able to not use it in an article. The effect will be always created. If you only write articles and it works for your design and style of writing, great!

In my case I have a problem when I post a story like my Soldiers vs. Jedi. So I had to look for an alternate way.

Second method

div.entry p span.c_letter {
font-size:1.5em;
font-weight:700;
text-transform:uppercase;
}

How do you enable the effect now?
You just have to wrap a <span class=”c_letter”> around the letter you want to capitalize and you get that effect. This will only work if the span is inside a paragraph:

e.g.:
<p><span class="c_letter">T</span>he first letter is huge[…]</p>

This method allows you to decide if you want to have a capital letter or not. However, it requires you to spend some time on wrapping the code around the letter.

So you need to see which method works best for you.

#1 Note: The first method will also edit your older blog posts, so if you don’t want to “auto-edit” them, you should use the second method.

#2 Note: Maybe you noticed the text-transform:uppercase; piece in the second method. It means that even a non-capital character will be shown as capital character. I added in case you could use it for highlighting a word without actually writing it in capitals. You may remove it if you don’t want it

I hope this tutorial was helpful for you. If you have any questions or need help with this, feel free to leave a comment.