If 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 →

Pro 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 →