How to CSS guide Basics for WordPress

CSS cascading style sheet
CSS adds style to an object

CSS is essential to any wordpress site. They give our wordpress sites style and a clean visual look in a way that html cant. This guide will be part of an ongoing program to help people like you understand and work with CSS. This is something that I wish I had when I started out some years ago so I recommend subscribing to receive all the latest updates for free.

I began working with CSS with no knowledge at all and only through wading through 100s of websites was I able to gain the knowledge that I wanted. So now I am going to put it to practice and pass it on to you. I wasn’t born as a programmer, I didn’t come equipped with all the jargon and coding language, so often I found myself thinking what does that mean. That is why this guide will explain simply what they means and use similes to allow you to understand with ease.

So let’s begin.

What do you need

To help you out, you will need notepad++

Access to your server via file manager or FTP

Access to wordpress admin panel

Firebug for inspecting code in browser, to use firebug, simply right click on your page and select inspect with firebug. You should then see CSS information on the right and your html on the left.

What is CSS

CSS or cascading style sheets are simply documents that tell HTML how to look and where to be.

A little like working for a fancy limo company, they tell you what to dress like and where to be at any given time.

CSS allows a single link to be placed in the head of the document instead of having all the styling on page.

This just means that instead of having an endless list of coding in your source page, i.e. html generated page which can be viewed by right clicking on a site and selecting view source, you will have a link which should be near the top and would look something like this. This simply calls for an external document called layout.css, click the link and see if you would like all that on your page.

<link rel="stylesheet" href="http://diypblog.com/style.css" type="text/css" media="screen, projection"/>

CSS is designed to work hand in hand with html, html was never intended to style a page, it was intended to create mark up tags such as the <h1></h1> tag for the main title and <p> for paragraphs, hence html is a mark up language. Basically create the skeleton of your page and tell your browser what is what.

CSS makes those tags pretty, otherwise we would all be reading a lot of text and pretty dull websites.

How does it work

In order for CSS to work we would need to assign some form of identification to our html, otherwise it is not gonna work.

Like you and me, we all have something unique about us that sets us apart from everyone else. For us it’s our DNA. For html its a tag and id marker. An example would be for lets say a title.

We will use a h1 tag for this.

<h1 id="title_in_page">Title in page</h1>

Remember that whenever you open a tag, you must close it by repeating the tag with a / in front of it like the example.

So what have we done here

We have said that this this particular title which has a <h1></h1> tag or the highest priority title we can use is going to be called “title_in_page”. This ID separates it from all other h1 tags, if we didn’t do this then if we changed the CSS for just h1 in general then all of them would change.

Now for the CSS part

Now that we have our tag and id done, we need to link it to the CSS. To do this we simply start with this.

.title_in_page{  }

what have we done there

We have now linked the id to our style sheet or CSS. But in it’s current state it wont do much. The first part is the ID and the curly brakets are where we are going to add our information.

So what do we wanna do with it, well for the purpose of this example we will make it bigger, center it and change it’s colour and to do that we need to add some information inside those curly brackets like this.

.title_in_page, h1{ font-size: 3em; color:#0000FF; text-align:center;}

Title in page

 

The first part of the ID indicates its name (.title_in_page) remember the dot. The second part after the comma is the tag.

Note the colon and semi-colon, first we declare what change is going to be made followed by a colon, then we declare what the change is followed by a semi-colon.

Now this would make the text bigger, blue and centered.

Note: for font sizes there are a variety of ways to do it, read CSS Font-Size: em vs. px vs. pt vs. percent for a great explaination

I have placed the above code in my stlylesheet, which for me is custom.css which come with Thesis. If you are looking for a great theme to really customize your theme then Thesis is the one you.

Most other themes also come with a custom.css file which you can find in appearance –> editor and look down towards the bottom near your themes style.css

What else can we do

We could make the text bold by adding

font-weight: bold;

Move it from left to right of the page

text-align: left;  (or right)

Move it up and down, left and right reletive to where it is

To move the text up and down we need to add some padding, padding is basically adding an invisible space relative to its current position around the text.

We can do this in a number of ways

padding-left: 2em; (or px, pt, whichever you prefer)

padding-right: 2em;

padding-top: 2em;

padding-bottom: 2em;

Points to note

When editing CSS, if you find that something else is being changed other that the object you are working with. Then you need to edit the CSS for the object that you don’t want to change, by giving it the correct information for its CSS property.

If you edit something and it changes everything with the same tag, it means that the tag didn’t have any styling information to start with and borrowed it from your new custom stlye.

Simple fix just add the correct information to the other object so it has it’s own styling.

If there is anything else you would like to know please leave a comment or send me an email.

This is not intended for advanced users, this is intended as a basic start point for CSS.

Turn of caching and CDN while editing, to see the changes in real time.

Feel free to subscribe by entering your email below to receive instant updates.

News and Updates

Leave a Comment

Current month ye@r day *

Comments

  • colon cleansing August 10, 2012, 2:42 pm

    What is the difference between colon and semicolon?

    Reply
    • Horne3754sg August 10, 2012, 2:57 pm

      Hi thanks for commenting, thats a good question.

      With CSS you have your element id/class, opening curly brackets, property, the value assignment symbol (:), it’s value then we always end with a semi-colon (;) to signify then end of that declaration.
      Now to simplify that, in english it would look like this

      p { font-size = 10px. }

      So think of the colon as being an equals sign and the semi-colon as a full stop.

      It’s just the syntax used for CSS to be read.

      Regards and hope this helps.

      Reply

This site rocks the DIYWP Optimized Skin for Thesis & is hosted by Webhostingbuzz