How to Create Beautiful and Elegant HTML Lists Using CSS

February 24th • 21 Comments • Under: Design Suggetions • Tags: code, css, design, development

HTML list have become one of the most used HTML elements for marking-up various semantic content structures — navigation, comments and even image galleries.

This article will explain and show you how to style lists inside blog posts, articles or other basic HTML documents.

Before we start, it is necessary to understand the importance of using specific HTML tags <ul> and <ol>, instead of simple numbering (like 1., 2. or •, ») for building lists. By applying content a semantic structure, we emphasize the relationships between different content elements. In case of lists we are able to imply that there is a certain relationship between all of the list members, which is possibly described by the paragraph introducing the list. It also helps screen reader users for whom the total number of items is announced before the rest of the list. Read more »

Take-away photo and image positioning CSS styles for blogs — idea for a plugin

January 28th • 5 Comments • Under: Design Suggetions, WordPress • Tags: css, WordPress

After reading Kim’s comment regarding the Morning Racer theme, I had an idea of how to achieve a consistent image and photo placement in a WordPress blog even if you decide to change the theme.

The solution would be a plugin which would provide a “standard” set of CSS classes for styling different image (and other element) positioning.

The great thing is that you could use these CSS classnames with any theme you like as long as you have the plugin enabled. It would be also possible to specify a prefared classname prefix (for example, kd-wide, mo-withborder-a or pa-image-a) so that the plugin’s CSS doesn’t mess with the theme’s CSS. It could also contain CSS styles for lists (like the “flat” and “spaced” ones used on this blog), “important” messages, etc.

A kind of a portable image positioning thing. And you wouldn’t have to learn new CSS classnames or image layout ideas offered by different theme authors.

What do you think? Maybe you have a suggestion of other items (apart from images and lists) that you would like to have special styling.

Good and Bad CSS Identifiers

October 17th • 4 Comments • Under: Design Suggetions • Tags: analysis, css, web design

Seeing a <div class="left green">...</div> block in HTML code might hurt the eyes of a lot of web designers. To identify good and bad id and class names, it is important to understand the idea of the CSS.

The World Wide Web Consortium (W3C) defines CSS2 as:

a style sheet language that allows authors and users to attach style (e.g., fonts, spacing, and aural cues) to structured documents (e.g., HTML documents and XML applications). By separating the presentation style of documents from the content of documents, CSS2 simplifies Web authoring and site maintenance.

Therefore class names left, green or largetext are theoretically good according to the first part of the CSS definition, but very very bad according to the second part, which can be illustrated with the following example. Read more »