WordPress – Creating and Using Your Own CSS Style in a Theme

WordPress uses themes and templates for the layout. Themes that are already made with CSS Styles built in. But often you may need some more styles to help things stand out. Like a title for instance. You may want to apply a different style to a certain title or header but you don’t have the style that you want. This is often very useful when creating Static pages in WordPress. To create your own style and use it follow the steps below.

Creating Your Own CSS Style

Login in to your WordPress Admin Panel. Then click on Presentation > Theme Editor. When the Theme Editor page loads, look for the style.css sheet on that page. Usually when the Theme Editor page loads it is already on the CSS Styles page. When the CSS style page loads scroll down to the end of the page. This is where you will add your new CSS Style.

I will give you an example of a style but of course, you can change it to what ever you wish. You will need to type or copy and paste the following code in to your CSS Style Sheet.

.mytitle {
color: #ff5500;
background-color: transparent;
font-family: verdana;
font-size: 14px;
font-weight: bold;
}

That is your basic CSS. You can add a border to place a line under your title or choose a color for the background instead of it being transparent. The possibilities are endless with CSS. Also you can name it what you like but name it something easy to remember. Once you have created the style the way you want it, go to the bottom of your WordPress page and click Update File. That saves your new CSS Style you just created.

Using Your New CSS Style

As I said before, new CSS Styles in WordPress are often used in Static Pages. For those who don’t know what a Static Page is, let me explain. A Static Page is used in WordPress to give you individual .htm or .html pages. Since WordPress is a Blog software, it is easier to use Static Pages to create your home page. It is also used for pages like About Me, Contact Me, FAQ, etc. When you create a Home page you will place everything that you want on the home page in that one page in your WordPress Admin. So with that out the way, let’s move on.

Assuming you already have a home page or some type of “page”. In your WordPress Admin Panel click on Manage > Pages. A list of pages that you have created will pull up. Click Edit on one of your pages. I will use my Home Page code to give you an example of what I’m talking about while explaining this. Once you have click on Edit and the page loads, click on the little HTML icon in the window where you type your content.

Take a look at my homepage to get an idea of what I’m talking about.

On my home page I have four main styles. I have headers, titles, links, and content. My first bit of code looks like this:

Reality TV News

Kevin Convais is voted off American Idol

Kevin Convais stood in the bottom three along with Bucky Covington and Lisa Tucker. Unfortunately Kevin Convais was the one to leave on 3-22-06.

Latest Reality TV Recaps

Unan1mous 3-22-06

American Idol 3-22-06

Nasville Star 3-21-06

American Idol 3-21-06

Looking at my code you will see that I have three classes; hpheaders, hptitle, and boxtext. If you are familiar with CSS you know that the link class does not show and that’s why I don’t have four classes to go with my four main styles.

To use the style that you created in WordPress, decide where you want to place that style in the code. Let me show you the code with out the styles.

Reality TV News

Kevin Convais is voted off American Idol

Kevin Convais stood in the bottom three along with Bucky Covington and Lisa Tucker. Unfortunately Kevin Convais was the one to leave on 3-22-06.

Latest Reality TV Recaps

Unan1mous 3-22-06

American Idol 3-22-06

Nasville Star 3-21-06

American Idol 3-21-06

This is how the code will look without any styles in it. So let’s say we wanted to add a style to the title “Kevin Convais is voted off American Idol”

We would go to the line

Kevin Convais is voted off American Idol

Type at the beginning of the line

Replacing mytitle with what ever you named your CSS Style at the beginning of this guide. Now your line should look like this:

Kevin Convais is voted off American Idol

Then click Update and Save. And that is all you do to add your own style.

Here are a few tips.

When creating your own code in WordPress:

• Be sure to put your brackets in the right place } {
• Don’t forget to place your ; after each line
• Don’t forget your . before the title of your new style.
• Don’t forget your : after each name

.mytitle {
color: #ff5500;
background-color: transparent;
font-family: verdana;
font-size: 14px;
font-weight: bold;
}

This may sound crazy to some, but I have spent numerous hours in WordPress frustrated because it wouldn’t work only to realize that I forgot a ; at the end or forgot to close a bracket. Many people these days use WordPress as a CMS so creating and using your own styles comes in handy. If you have any questions, please feel free to drop me an email. WordPress can be very difficult at times, so I have no problem answering questions and trying to help.