Basics of CSS

There are many a times, when you download  a free WordPress theme and ended up customizing it to such an extent that it doesnt resemble the downloaded theme anymore. This was the case for me as well when I tried my initial few themes. Even for my current theme (Elements of SEO), I did a lot of changes from the way it was initially downloaded to what it is today. There are several tags and classes that you will need to get familiar with to achieve what you visualize, of course a lot of trial and error does happen, but it will be really unnerving if you mess up the whole theme and have to revert back to the original. This is the reason why I thought I should put in some basics of CSS and HTML changes that might help you in re-designing your theme template. Feel free to add more by providing your feedback.

What is CSS:

CSS stands for Cascading Style Sheets.

These styles define how to display the HTML elements.

CSS lets you control all the elements of your documents appearance like fonts, colors, text, backgrounds, sizes, borders, spacing, tables, positions, alignments, etc.

CSS Solved a Big Problem:

HTML was never intended to contain tags for formatting a document, but was for defining the content of a document like:

<h1>This is a heading</h1>

<p1>This is a paragraph</p1>

When tags like <font> were added to HTML specifications, it became a nightmare for web developers. Development of large websites with varying colors and font information differing across several pages, became a tedious task. CSS resolved this problem by storing all these formatting information into a style sheet which became universally accepted by all the web browsers.

Adding Styles to an HTML Tag:

Â

Let us see this with an Example:

Add the Style property to an HTML tag. Type style= in the HTML tag to which you want to apply specific styles:

h1 style=

Now, add all the CSS declarations in a comma-separated list. In quotes, type your declarations in the format “property:value” using a semicolon to indicate seperate characters:

"font:italic bold small-caps 3em/.9 Constantia, Georgia, Times, 'Times New Roman', Serif; color:red"

Finish the HTML tag and add your content like below:

>CSSTutorial</h1>

Now, let us get more specific to what changes you would REALLY like to make to your downloaded theme. The first and foremost change I did was to change the background color and the font color to make it more pleasant. I modified my style.css like below

body {
 background: #FFFFFF url(“images/top.gif”) repeat-x;
 color: #323232; Â
 }

Once you make any change like this, you need to make certain that you find for all occurances of background & color tags and change it accordingly so that all your pages will look alike for the look & feel.

The second step is to remove all the unwanted “advertising” tags and text that the theme designer would have put in the theme like ‘WordPress Theme’ or ‘Powered by WordPress’ etc. You can do this by opening up the relevant “php” pages in a notepad editor and finding the right places.

The third step is to give a more meaningful header and sub-header text for your website. A sub-header or a punch-line would actually mean what a visitor can expect by visiting your website. Take care to modify “ALL” the header pages uniformly, most of the WordPress themes have more than 1 header file which takes precedance on different occasions.

Logo – You can create your own logo for free, there are numerous websites which allows you to do so. You can also use “GIMP” tool to edit your images accordingly. Make sure that if you create a logo, it conforms to your website colors and themes. You can modify the header.php file to incorporate your logo as a background or to one end of the banner. Usually this messes up your header, you might have to play around with the pixels and font sizes to get the right look.

There are several other minor changes that you would like to make to your website before actually publishing to the outer world. I will explain them in my next blog and also give some important tips on various tools and subscriptions you would find useful going forward. If you found this interesting and useful, dont forget to leave a comment and share your thoughts on the same.

Please follow and like us:
The following two tabs change content below.
Praveen Rajarao is an Entrepreneur and in his spare time blogs on his website –http://www.dailymorningcoffee.com and http://www.pbgeeks.com. His topics range from blogging to technology to affiliate programs and making money online and how-to guides. Daily Morning Coffee is also accepting Guest Posts from Professional Bloggers at this time, take a look at “Write For DMC” page for more details on the same.

5 comments

  1. Some great basics of css here. I do love to customize my WordPress themes and well make them entirely my own.

    I just order The book of Gimp this week from amazon in hopes of helping with the gimp steep learning curve.

Leave a Reply

Your email address will not be published. Required fields are marked *

CommentLuv badge

This blog uses premium CommentLuv which allows you to put your keywords with your name if you have had 3 approved comments. Use your real name and then @ your keywords (maximum of 2)