Sophisticated CSS User Series Part III: Complete Tour To Customize Your WordPress Site Using CSS

Let’s Tweak With The Layout of Your Website

Nobody, we literally mean nobody can argue with us about the fact that WordPress is the awesomely designed platform. Where a person with the limited or we can say no knowledge of coding can build their website. But, guys, to get little extra leverage having knowledge of coding is a good thing.

Well, we are not implying here to learn complicated JavaScript or HTML coding, no we are referring to cascading style sheets coding. Yep, the coding which will help you to make outstandingly stylish and unique website. WordPress has numerous colorful and vibrant themes, but when you add a little extra touch with CSS in them. Then, that’s the perfect recipe for high traffic generated site.

So, bunnies, in this post of Sophisticated CSS User Series, we will offer you the complete tour on how to create customized WordPress Site according to your style. So, people, be ready to tweak with font, color, format, and layout of your WordPress site with some sleek CSS tricks.

Relationship Between HTML & CSS

Before coming to the point, first, let’s back up our story with the HyperText Markup Language. This primary language is used to create your WordPress site. HTML codes define the different elements of the website in the structure. Like, it distinguishes the header of the text from the rest of content.

If you have ever viewed WordPress text tab, then you will get the slight touch of HTML. To change the color of the text in the HTML, you have to insert the HTML code of that color. And, this is quite complicated for the person with limited HTML knowledge.

So, here comes the CSS in your rescue. CSS is used to dictate how HTML style appears such as font, color, style etc. So, with the help of CSS, you can easily style your site without making any change in the main structure of the web page. For example, if you want to change the color of the header, then simply use few lines of CSS code without interfering with the HTML structure.

Where To Add CSS In WordPress?

Well, you can add CSS directly to your website, but we don’t recommend this method. Because doing this leaves bigger room for the mistake to happen. As there are numerous other simpler and easy methods are present, such as:

  • Navigate to Appearance > Customize in your WordPress dashboard to open the WordPress Customizer
  • Select the Additional CSS option from the menu on the left in the WordPress Customizer interface. A blank space will appear in the side of the page where you can insert as much CSS you like. Moreover, it will automatically preview all changes and will give you an idea of how your site will look after the change.

How to Customize Your WordPress Site Using CSS?

Okay, so we have mentor earlier that with the help of CSS you can tweak with any part of your WordPress site. As it is a beginners guide, so we are going to keep the things simpler. So, few simple CSS Customizing tricks are:

Change The Color

Suppose, if you want to the color of your WordPress header into the purple color. Then, you have to open the CSS dialing box and type following code in it:

h1 {

color: purple;

}

And, just like that color will be changed to the purple. But, you can also use hex codes to change the color. Simply replace purple with #9C33FF (or whatever color you want to use). Once you are satisfied with the color, then you can hit the publish button.

Change Body Type

You can play with the font family and size also. You can add following CSS code in your CSS dialog box:

p {

font-family: Georgia;

font-size: 20px;

}

Change Side Bar

Finally, let’s change the color of the sidebar and little extra padding to it. By using this CSS:

.widget {

background: #B9EBFA;

padding: 25px;

}

Well, guys, you can easily customize your website’s style using CSS. So, be creative and tweak with your site’s style.

Send a Message