Tips, advice, and blogs by our Typepad community.

Welcome to our special series on getting to know CSS! Every other week, we'll debut a new article full of valuable tips and tricks that will help you to understand how CSS works and how to apply it to your blog. We'll cover everything from the very basics, to fancy tricks, to the best way to find the code you need for your very own blog. Get ready to advance your skill set!

It's common for websites to use their own CSS names for features, like the banner or sidebar headers. Let's see how you can figure out those names for Typepad. Whether you're using the theme builder or one of our built-in themes, the names will be the same.

The very easiest method is to view the HTML source of the main page of the blog or a page of the blog that shows the element you'd like to customize. In most browsers, just right click on the page and choose "View page source." You'll then see a bunch of code, like the screenshot below.

Scroll through until you find the element you want to customize, like the post title or a sidebar header. You don't need to locate each instance, just one will do. You'll then look for the "class" or "ID" name right before that element. The below example shows the post title highlighted.

The class name for the post title is entry-header so you can add that to your Custom CSS page as:

.entry-header { }

And then add your CSS, like:

.entry-header { font-size: 200%; }

The view source method is great if you just want to customize a few things. If you want to dig even deeper or make lots of changes, we recommend letting browser add-ons do some of the work for you. One we use a lot when designing blog themes is Firebug.

It has a lot of features but one of the handiest is showing you the classes for every element on the page and allowing you to edit the code right there so you can see how it will look. The screenshot below shows that in action.

ColorZilla allows you to pull out the color used for a specific element on a web page

Every element of a Typepad blog has a corresponding CSS class or ID, making it possible to use Custom CSS to fine-tune everything on your blog. If you have a favorite tool that we haven't mentioned, or a tip for fellow Typepad users, please leave a comment below!

More Resources

*After your 14 day free trial you will be automatically subscribed to the services at your subscribed rate. You may cancel your subscription at any time during your 14 day free trial to avoid being charged. Additional information concerning your free trial can be found in the Terms of Service.