Useful Tools for validating HTML, CSS and Accessibility

Useful Tools for validating HTML, CSS and AccessibilityWho doesn’t know the situation when you release a website and within a short time you get complaints of users with browser X who say that xyz doesn’t work on the page.

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) Weiterlesen

CSS – Make your list different

CSS - Cascading Style SheetsIf you have a look at my sidebar, you see that my menu options have little dots (or images) to the left. Thanks to CSS, Cascading Style Sheets, you have many options to style your list, ranging from no style to one of the many default styles. You are even able to use an image of your choice!

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. Weiterlesen

CSS – First letter of a paragraph larger than the others

CSS - Cascading Style SheetsPro Blog Design had an article about formating blog posts for readability the other day. As we discussed further methods of styling your blog articles, we started talking about „the concept of making the first letter of a paragraph larger than the others„.

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. Weiterlesen