Skip to main content
CSS is fun and cool and I like it.
Article

Links of Interest

If you’ve ever had to deal much with your `.htaccess` files, you know it’s like learning a whole new cryptic language onto itself. It’s high time someone made it easy. This online generator takes you through the options in plain English (or any of of 10 languages). Then it’s just a simple copy-and-paste into the `.htaccess file` live on your server. Just an obligatory word of warning here: don’t go fiddling with these just because you can, you can … Read article “Links of Interest”

Article

Avoid “CSS Jitter”

With more power, comes more responsibility.

One of the things that CSS allows you to control is the hover state of many objects, most notably, anchor (<a>) elements. Typically, the hover state is styled with color changes, or perhaps something a bit fancier like a background-image change (or a background-position change re: CSS Sprites).

But that’s not all you can change. Just as easily, you are able to change font-weight, margin, padding, or literally height and width if you … Read article “Avoid “CSS Jitter””

Article

Utilizing the Underused (But Semantically Awesome) Definition List

A quick intro to semantics

When we talk about semantics in HTML, we are talking about how HTML tags are used to describe the content. Good semantics means that the tags are being used well to describe the content. Bad semantics means that the tags being used poorly describe the content. Good semantics doesn’t necessarily mean that the least possible number of tags are used, only that the ones that are used make sense and, just as importantly, make sense … Read article “Utilizing the Underused (But Semantically Awesome) Definition List”

Article

Quick Tip: Making a ‘Print This Page’ Button

Why bother?

Most people know how to print a web page, so including a “Print This Page” button on a website is often overkill. But there are some circumstances where it really makes sense. I just came across one of those circumstances in some work I was doing for a client so I thought I would share.

The site has a “Kid Zone” with a bunch of games and fun things for kids to do, including some coloring pages. … Read article “Quick Tip: Making a ‘Print This Page’ Button”

Article

Links of Interest

  • I wrote a guest post over on Tutorial Blog about taking control of image rollovers. In the tutorial, I show 5 different techniques for image rollovers ranging from relatively simple borders, to going from black and white to color, to displaying information about the image on rollover with some slightly more complex CSS.
  • From a recent Search-This article:

    “Have you looked at other people’s style sheets lately? Were you baffled to find square brackets in the CSS code?

Read article “Links of Interest”
Article

Quick CSS Trick: How To Center an Object Exactly In The Center

I recently needed to make a placeholder page for a site. I wanted the logo image to be centered exactly in the middle of the screen, that is, both vertically and horizontally centered. Quickly, I thought I’d just give the image element a class of “centered” and then style that class:

.centered {
  position: fixed; /* or absolute */
  top: 50%;
  left: 50%;
}

But as I’m sure you are thinking, this doesn’t quite work. What that accomplishes is putting … Read article “Quick CSS Trick: How To Center an Object Exactly In The Center”

Article

Making the Most of the Limited Choices in Web Typography

So, what do we really have here?

As far as variety of font choices, things are pretty bleak. But Helvetica isn’t on pretty much every computer in the world because it’s a bad font. It’s actually a great font if you ask me, it’s just people are sick of looking at it being used without the love it deserves. Since (generally speaking) there is no way to “embed” a font into a web page you need to choose fonts that … Read article “Making the Most of the Limited Choices in Web Typography”

Article

Tips For Creating Great Web Forms

1. Use Labels

You don’t need labels for your form to work, but as one CSS-Tricks reader once put it, it is an accessibility crime not to use them. Labels are what signify what the input box is for and associate them together. The use of the <label> tag is not only semantically correct, but it gives you the opportunity to style them uniquely with CSS.

2. Float Your Labels

This is how you achieve that table-like structure on forms … Read article “Tips For Creating Great Web Forms”

Article

9 Awesome CSS Themed T-Shirts

Show off your inner design nerd with these CSS-themed T-Shirts. The holiday season is coming up too… if you know any hardcore CSS buffs that need some style for their body =) Click the T-Shirts for links to their respective stores.

‘Styled’ Black T-Shirt

CSS Sucks

IE Bugs Me

Geeks have no style

Semanticist

No Comment

(This one is just plain nerdy) I’m only here because my server is down

-9999px;

Panic
Read article “9 Awesome CSS Themed T-Shirts”

Article

Links of Interest

Matthew Mullenweg (of WordPress) clarifies his thoughts on a WordPress theme marketplace. I’m all for it!

Foohack has a nice post up on 5 problems with CSS (Not like common mistakes, but problems with the CSS spec itself).

Not to be a big baby about it, but my post on what beautiful HTML code looks like was the top story on Digg.com on Thursday for a while. Did I get a bunch of great traffic out of it? No… … Read article “Links of Interest”