Basic Guide to CSS

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's (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. If you have a good CSS resource or would like to leave a comment feel free to in the comments section below.

source

RELATED POSTS