I stumbled upon this little shorthand trick today for CSS.

This…

.myFontStyle {
font-weight: bold;
font-style: italic;
font-variant: small-caps;
font-size: 10px;
line-height: 12px;
font-family: verdana, sans-serif;
}

is the same as this:

.myFontStyle {
font: bold italic small-caps 10px/12px verdana,sans-serif;
}

There’s a great slidedeck on CSS architecture here.

Share this

I have at times struggled with CSS because I didn’t fully understand what I was looking at when modifying WordPress themes. Then I came across this resource when doing some jQuery work. It is unbelievable what you can do with CSS. I always thought it was remarkable before, but WOW, this really opens up a new avenue of theme customization for me.

W3C CSS Selectors

Share this