4 HTML and CSS Tips for WordPress Beginner

Many people use WordPress to either build their free blog or professional websites. They usually use the free theme or other professional-looking theme. But because not all of us are familiar with coding or CSS, they tend to leave the design of their blog just like its original theme, without don`t know how to customize it.

Actually there are some HTML and CSS tips that beginners can use to improve the design of their WordPress blog or website. These tips are easy to do and give impact to your WordPress blog.

1. Replace blog title with a logo

WordPress theme usually include blog title link at the header by default. You can change it with logo as you want. Here`s how:

• Upload your logo first, somewhere. Then get the URL address of it
• Go to WordPress template editor and find header.php. you might see code  like this:

<h1><a href=”<?php echo get_option(‘home’); ?>/”><?php bloginfo(‘name’); ?></a></h1>

• If you want to use the logo image, you can remove everything between the <h1> tags and replace it with something like this: <a href=”YourBlogURL.com”><img src=”WebAddressOfYourLogoGoesHere” alt=”YourBlogTitleGoesHere”/>

2. Add margins around image or theme

So you wish to have margin around the logo image but don`t know how? then here`s how.

• Got to WordPress template editor and find your header.php. We are going to add div tags on it
• with above`s example, here what your code should look:  <div style=”margin: 9px 6px 9px 12px”><a href=”YourBlogURL.com”><img src=”WebAddressOfYourLogoGoesHere” alt=”YourBlogTitleGoesHere”/></div>

3. Change colors.

If you wish to have different colors in your blog, that`s easy thing to do. To change the color, you can find the existing hex color codes in your stylesheet (style.css) and swap it with the hex code for the color you want. You will find code like this.

body {

background:#ffffff;

font-family: arial;

font-size: 14px;

padding:6px;

}

The #ffffff hex code represents white background. If for example you want to change it with gray, you can change that code with with #333333.

4. Change default font sizes

Every theme has its own default font sizes. Some of them have small font size that is inappropriate for the reader to read it. This problem is easy to solve. You just need to find font size in your stylesheet and increase the font size as you want. Here is how the code would like if you wish to have larger font as the title and normal font size for the body.

.post h1 {

font-size: 18px;

color: #ff0033;

padding-bottom: 12px;

padding-top: 12px;

}