# This is a known Webkit bug — any text with @font-face applied will be rendered without anti-aliasing if there is a text element without anti-aliasing applied preceding it. Usually those are fonts smaller than 5px or monospaced fonts at small sizes which are rendered without anti-aliasing.
I noticed this bug on this page — the heading “Kāzu ABC” was rendered aliased despite having the main menu in between that heading and the logo which had font-size:1px; applied. The only way to fix this is by avoiding aliased text directly before elements that use @font-face.
Here is a live demo of the bug.
# I have never used them, and here is why you shouldn’t use CSS @imports too. Via Monday By Noon.
# For illustrating anchor links in some cases you might want to use bottom-border instead of a default text-decoration:underline. In order to achieve that, one would use the following CSS rule:
a { text-decoration:none; border-bottom:2px solid; }
which also adds border to the bottom of all linked images. In order to remove it, you would think that setting
a img { border:none; }
would be enough. Read more »
# 
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 »
# 
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.
# 
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 »
