CSS Head

Pseudo elements include :first-line, :first-letter, :before and :after. In the CSS specification, W3C define pseudo-elements like this:

Pseudo-elements create abstractions about the document tree beyond those specified by the document language. For instance, document languages do not offer mechanisms to access the first letter or first line of an element’s content. CSS pseudo-elements allow style sheet designers to refer to this otherwise inaccessible information. Pseudo-elements may also provide style sheet designers a way to assign style to content that does not exist in the source document…

Mmm, now I don’t know about you but that description makes my head hurt. Let’s take a closer look at pseudo-elements and see how we can use them in our own projects.

Read more »

Have you ever run into the situation where you’re trying to apply a css style to an element, but it won’t take? Your page it seems to be ignoring your CSS, but you can’t figure out why. Maybe you found yourself using !important or adding an inline style as a last resort. There’s a good chance the problem you encountered was one of CSS precedence.

A better understanding of which CSS styles take precedence can lead to less frustration with css, cleaner code, and more organized css so let’s look at three things that control which css rule applies to a given html element…

Online CSS3 generator app. Pick an option like rounded corners, text shadow, box shadow, RGBa etc and you’ll get the rules for the CSS. Very handy…

The Opera logo, rendered only with CSS, no images. Compare it with the real deal. Alas, best viewed in Firefox 3.6, Safari 4, or Chrome 5. Aside from another shameless plea for attention, this demonstration gives me a chance to look at some CSS3 properties across browsers…

CSS has the ability to target HTML elements based on any one of their attributes. You probably already know about classes and IDs. But did you know you can select an element based on the rel attribute as well? That is known as an attribute selector. There is a lot more to attribute selectors so let’s look closer at all the different options and try to cover some “real world” scenarios on when they might be useful…

Following the idea of “tweaking” a reset file, I came up with this “base styles sheet”. It sets default styling for many elements, follows a couple of recommendations regarding usability/accessibility, and addresses a few “common issues” as well…

CSS3, Please! The Cross-Browser CSS3 Rule Generator…

In the first of the CSS In depth series, we’ll be talking about margins, padding and the box model. Margins and padding are some of the most widely used styles in CSS, but are often the source of frustration in cross-browser compatibility.

In this post, we’ll explain the difference between padding and margins, how the box model effects browsers and some tips and tricks dealing with cross-browser issues…

When you think of “tabs”, your mind might go right to JavaScript. Watch for a click on a tab, hide all the panels, show the one corresponding to tab just clicked on. All major JavaScript libraries tackle tabs in some way. But there is a way to accomplish this same idea with “pure CSS”. Just as we did with the CSS Image Switcher, let’s tackle this traditionally JavaScript project with only CSS…

CSS3 provides powerful pseudo-classes that allow the designer to select multiple elements according to their positions in a document tree. Using these pseudo-classes can be a little confusing at first, but it becomes a lot easier over time to set up your layout. In today’s article I’m going to take a look at 5 pseudo-classes that will simplify our design process and reduces a lot of time to create a certain visual effects. You will also find demonstration below each point to demonstrate how we can use these selectors in different design scenario you face everyday in your designing process…