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

By Jasmine Starr, published May 02, 2006
Published Content: 1,020  Total Views: 1,296,114  Favorited By: 54 CPs
Rating: 3.1 of 5
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

Takeaways
  • WordPress uses themes and templates for the layout.
  • You can add a border to place a line under your title.
  • New CSS Styles in WordPress are often used in Static Pages.
Did You Know?
Many people these days use WordPress as a CMS.
Resources
Comments
Showing Comments 1 - 3 of 3
 
 
css Font examples , Properties , Attribute - - // http://www.css-lessons.ucoz.com/font-css-examples.htm

Posted on 06/27/2008 at 11:06:08 AM

 
css web template page (example) -- http://www.css-lessons.ucoz.com/css-template-page.htm

Posted on 05/14/2008 at 1:05:47 AM

 
Another great CSS resource is http://www.w3schools.com/css/ Check it out!

Posted on 12/25/2006 at 11:12:00 AM

Type in Your Comments Below - (1000 characters left)
Your name:

Submit your own content on this or any topic. Get started »
Showing Comments 1 - 3 of 3
 
Most Commented On