Many people want to make simple CSS changes but do not know where to start or are afraid that they will change the wrong thing. As a result of this I get asked a lot of CSS related questions from new WordPress users. The fact is that learning CSS is not really that hard. Once you get a hang of the basics, you can quickly become an advanced CSS user if you keep playing around with it. In this article I have explained how to do simple CSS modifications, hopefully it will be of some help to some of you.
Let’s get started
First, you should make a back up copy of CSS files you are going to modify. You should do this with any file you plan on modifying incase something goes wrong, you can always revert back to the version you know works properly.
What is CSS
“Cascading Style Sheets (CSS) is a style sheet language used to describe the presentation semantics (that is, the look and formatting) of a document written in a markup language. It’s most common application is to style web pages written in HTML and XHTML, but the language can be applied to any kind of XML document, including SVG and XUL.” – Wikipedia
A CSS rule (the sentence) has two main parts:
- Selector: This is usually the HTML element you want to style (e.g. Header 1-6, paragraph, body, etc ).
- Declaration: This is what you want to do to the selector. (e.g. Change the text color, text alignment, font, font size, etc).
Here is an example of a CSS rule
- h1{color:green; font:20px;}
- h1= selector color and font = the property green and 20 px = the value
The declaration will consist of a property and a value and each property must have a value.
The CSS declaration will always end with a semicolon (;)example: color:green;The CSS declaration group will always be surrounded with ({}) example {color:green; text-align:center;}
You can make the CSS easier to read by putting each declaration on a separate line.
example:
h1
{
color:purple;
text-align:center;
font:20px;
}
Now that you have a basic understanding on how CSS works let’s move on to some simple changes you can make to your website to give it a little personal touch.
Here is some sample code that I have used in this article to show you how to make simple CSS modifications:
body
{
background:#444;
width:960px;color:#333;
font:13pt Georgia, Arial, Tahoma, Verdana;
margin:0 auto;
padding:0
}
- Body = Your selector.
- Background = the color of your background.
- Width = the width of the body.
- Color = the color of the text.
- Font = the size and font of the body.
- Margin = the size of the margin.
- Padding = the amount of padding you want between the objects.
Let’s go over a few modifications:
Changing colors in CSS
Changing colors in CSS can be done by one of the following ways:
- By name: Red, blue, green and so on
- RGB: A RGB value looks like this (255,0,0)
- Hex: A hex value looks like this (ff0000) or shorthand hex looks like this 333 or 444 and so on.
You can find a list of the hex numbers with a quick search on the internet.
Now let’s make some simple modification to the sample CSS code:
body
{
background:#3300cc; <-- I changed the background color by changing the hex value to 3300cc(dark blue).
width:960px;
color:#bbcbff; <-- I changed the text color from #333 to bbcbff (light grey color).
font:22pt Georgia, Arial, Tahoma, Verdana; <-- I changed the size of the font to 22pt.
margin:0 auto;
padding:0;
}
Once you have made your changes you can save the file and upload it to your site. These are simple modifications you can use to give your site a fresh new look.
Text alignment
Let’s add some text alignment to this bit of code. You can use the following text alignments
- Center
- Left
- Right
- Justify
body
{
background:#444;width:960px;
color:#333;
text-align:center;Â <-- I entered a text-align property with the value as center.
font:13pt Georgia, Arial, Tahoma, Verdana;
margin:0 auto;
padding:0
}
Background image
In some cases you may want to use a background image.
Here is an example of how to do this:
body
{
background-image:URL('img_gradent15.png');Â <-- URL this is going to be where the image is located.
background-repeat:no-repeat;
background-position:bottom left;
}
This will add an image to the bottom left of the body with no repeating of the image.
To repeat an image you can use the following declaration:
- background-repeat:repeat-x;
- background-repeat:repeat-y;
This will repeat the image along the x or y axis. By default the image will be repeated both horizontally and vertically.
Changing the size of an object
This modification works very well when you have an object (e.g. a button image) that is appearing too large/small. Some WordPress themes come with a default image size and will make any image you use that size. You can modify the code to override the themes default setting to display the images properly.
For this example we will change the size of the logo for the Infinity Remix theme.
Here is the code for this:
#logo
{
width:450px; <-- The width of the logo is 450px. My logo is 625px to change this we need to adjust the px (pixels) of the width property.
}
This is what the code should look like after the changes have been made.
#logo
{
width:625px; <--Â I have changed the width to 625px.
}
Remember when you make a size adjustment you may have to modify other part of the CSS to fit everything properly in the space you are modifying (e.g. your header you may need to move other objects or text to accommodate the size change).
These are just a few simple things you can do with CSS. With CSS your creative possibilities are endless. Also don’t forget to checkout the video tutorial on how to use firebug to modify your WordPress site’s CSS.
Thank you for your contribution on CSS.
To those who are new to CSS, this post is an additional insight for me.
This info is so helpful!
This is great to read!
Yep! CSS is quite complicated. So thanks you brought this up.
Last week I started lo learn CSS. I am glad that I have found your article because is very good for a beginner like me.
I always wanted to learn a little bit CSS but i was too lazy and i always had excuses. These are simple tips but very helpful, thank you.
Really useful article. With CSS you can easly edit any template, and your site looks more proffesional. Keep it up!
Great guide. I always wanted to learn a little bit CSS but i was too lazy and i always had excuses. These are simple tips but very helpful, thank you.
In theory, there is no set style and it’s not based upon rules, so you’re free to do whatever you want.
Keep your CSS clean and well-organized so that, when you come back to it later, you can find what you need and edit it quickly. Divide the style sheet into sections and use comments to describe what each section does.
Nice Guide we are currently reworking our CSS, so this guide was good, danke
This is really a helpful CSS tutorial. I am quite unfamiliar with CSS so this will help me a lot
Excellent starting point for new users looking to get into more advanced CSS development. With the growth of the WordPress audience it’s inevitable that more people will become involved in the coding of their webpages more intimately – this is a great start.
Your writing stuff about CSS guidelines is great and will be used in my writing.
Regards, Alex
OK so nice intro into css man. I have been meaning to learn enough to make the switch over from wordpress to making my own sites and pages. The WP platform is great it’s just I like to have a bit more creative control and room to move if you know what I mean.
Css is very important for websites. Thanks for the explanation!
This is a good explanation. I studied CSS and html on my own. I think the best way to learn is to practice it, make some mistakes, and eventually you get a hang of it. I am still learning day by day.
I like your explanation of CSS its a good introduction to a few basics. CSS seems very scary but what I learned is you can learn it best by trial and error. Ill take a already made template and start editing the numbers or paramaters and see what it does to the website and go from there.
This is good for people just starting out. One thing I would recommend though is not to use points (pt) when specifying dimensions on the web. Better to use pixels (px) for fixed sizes and ems (em) or % for relative sizes.
Yea, CSS is great. But it can be confusing and hard if you are not using it correctly. I still remember when my friend said to me: Dude, you should learn CSS, it just soo good and vital for your site. And I was like: Pfffuu, no way. I bet it is useless. All I need is html. Of course after a while I started to learn CSS and I saw that it is awesome. Now I know pretty much everything I need.
By the way everybody should use the plugin for firefox firebug. It just helps so much with viewing CSS and trying out new stuff.
Nice tutorial site. It took me a year to be comfortable using CSS. I think we should start using CSS soonest possible ‘cos it makes a different whether your site will look like a pro (corporate site) or a newbie site.
Without CSS, a site will look like more or less like a “spam” site. Another alternative is to use template with already CSS built-in.
Hi, I am glad this post was able to help you. I do plan on releasing more CSS articles. =) Making small changes to the CSS can make big changes to the appearance of your site.
Let me know if you have any questions.
Cheers,
Ivy
Thanks for this post… Same as Paul, as a CSS newbie this is very helpfull.
BTW, i hope there will be another post about CSS ^_^
As a CSS newbie there are some great tips in here. I’m starting to learn css now and this will be very helpful!
Never thought of changing the body width. I always thought that was handled by the browser. Thanks for the idea.