In this article I'll discuss some possible uses of generated content. Generated content is a powerful feature of CSS. Before going on, I'd like to explain what generated content is not.

Read more »

CSS resets are wrongly considered as a necessary part of any CSS template. After fixing a long series of WordPress themes that relied massively on this feature, I have to say that CSS resets are evil. More precisely, they're overused even when they're not necessary. Let me put it in this way: are we absolutely sure that all HTML elements must be reset? Are we absolutely sure that, in any circumstances and templates, we have to normalize the default rendering of all elements? Are we absolutely sure that all the default styles used by browsers on all elements need to be reduced to a lowest common denominator? Or, more properly, should we start rethinking the whole process behind normalization and realize that perhaps some default styles might be useful in some cases?

Read more »

The so-called "CSS hacks" are particular patterns used by authors to deliver style rules only to one browser or to prevent a browser from reading certain rules that might cause rendering problems. These patterns may rely on parsing bugs, wrong DOM implementations or syntactical constructs supported only by the targeted browser. Hacks may validate or not. In this article I'll review the most popular hacks used by authors, explaining why such patterns should be avoided and how one can actually target a browser by deploying other techniques.

Read more »

In this article I'll introduce Cascading Style Sheets (CSS) through a brief historical overview on its origin and some remarks about standards and their usage. I'll explain what is CSS, why it's been created, why we should know CSS and, overall, why CSS can be regarded as the present and the future of web documents.

Read more »

Counters are a powerful feature of generated content. Through counters we can add an automatic numbering to the elements of a web document. Thanks to the :before and :after pseudo-elements, the numbering will appear before or after the actual content of an element, respectively. In this article I'll explain how to use counters by providing some useful examples.

Read more »

In this article I'll explain how to use CSS for styling code blocks. Code blocks are generally formatted by using the pre element. Roger Johansson has proposed another way to accomplish this task and I'll follow his example with further improvements.

Read more »

We can easily create the effect of post titles used as overlays over post thumbnails by combining a little WordPress coding and some CSS techniques. Let's see the details.

Read more »

In this article I'll explain how to use the table values of the CSS display property to format certain sections of a simple three-columns layout.

Read more »

In this article I'll explain how to format form elements by using CSS. Finally, I'll provide a series of screenshots taken from the various browsers.

Read more »

The Book of CSS3 is the most comprehensive and detailed guide ever written on the subject practically since the creation of this standard. I bought this book myself a couple of days ago and I have to say that I'm actually learning new things on CSS3. The author is Peter Gasston, one of the people behind CSS3.info. I'd like to explain why you should get this book.

Read more »

My friend Francesca has recently started her web site which features a nice content slider on the home page. I decided to create a similar slider using jQuery, but I soon realized that the main effect could be actually achieved using only CSS3 transitions. Let's see how.

Read more »

I always take inspiration from desktop applications to create new jQuery demos. In this post I'd like to show you how to create an image slideshow which features a vertical thumbnail-based menu on its left side. This menu is initially hidden and it will be shown by clicking on a tab. Let's see the details.

Read more »

I'm currently testing some of the recent and new possibilities offered by CSS grids and I have to say that I still haven't found what I'm looking for. Most of these grids are based on fixed sizes, meaning that the current base grid is made up of lengths measured in pixels. Pixels are a bad approach to CSS design because this approach actually doesn't take into account the problem of screen resolution. In fact, a 960 pixels grid system fails spectacularly on the most recent versions of PC and Mac monitors: simply put, it doesn't fill well the screen. A better approach is to use percentages. Let's see how.

Read more »

The recommended way of customizing your default WordPress theme is to create a child theme. However, sometimes we only need to add just a few style rules to override some default styles of our theme, so what we really need is to create a custom style sheet for our theme. Let's see how.

Read more »

Most CSS developers are simply afraid of jQuery and JavaScript in general. They think they have not enough programming skills to get to the bottom of it and write proficient and fluent code. Well, simply put, you're totally wrong. Before jumping to the wrong conclusions, you should get an overall idea of how jQuery and JavaScript work. You'll be probably very happy to find out that you can actually write your own scripts without having a degree in computer science. Don't you believe me? Well, let's see some examples.

Read more »

One of my daily tasks as a developer is to modify the default styles which come along with a new Wordpress theme chosen by our clients. I have to say that this task is made harder and harder by some obtuse practices followed by many theme developers when it comes to CSS. I don't want to be rude because I love your work, but you should consider the fact that your styles may be changed by another developer or user, so you should code your CSS accordingly. Here are some of these bad practices that make me feel frustrated.

Read more »

CSS3 allows us to control almost every aspect of the visual layout of an element: properties such as border-radius, text-shadow, opacity combined with gradients and web fonts gives us a first-class control over elements. We can combine all these features to create the icons of social network. Look ma, no images!

Read more »

CSS selectors fall into several categories. Each category can be actually parsed with JavaScript and regular expressions. In this post I will show you several useful regular expressions used to match CSS selectors taken from the CSSUtilities library.

Read more »

With the brand new CSS3 transitions we can create interesting animations on form elements. For example, we can outline a text input by increasing its size and changing its background and border color when it gets the focus state. Let's see how.

Read more »

A couple of minutes ago I inserted the DejaVu Serif font on a Wordpress web site I'm working on. The main style sheet which makes use of the @font-face rule was downloaded from Font Squirrel together with the source fonts. There are four web fonts formats available: TTF, EOT, SVG and WOFF. At a first glance, the @font-face rule has been used several times to include all font variants. Each rule block takes care of inserting the specified variant using the four available formats. Let's take a look at these rules.

Read more »