CSS Tutorial 1: The Basics

This is a basic tutorial in order to get you started using CSS. Many people would like to learn how to use it, but can’t seem to find any decent tutorials to learn from, so I thought I would give it a go.

This tutorial will show you all the basics on converting your site to CSS.

CSS stands for Cascading Style Sheets by the way.



Firstly all you need to write CSS is a text editor such as Notepad or a WYSIWYG editor, either is fine.
Create a new page and then save it as styles.css. All css pages need to be saved with the .css extension.CSS syntax is made up of 3 parts the selector, property and value.eg:selector{property:value;

}

You always start your css syntax with a selector then a property and then give the property a value.
When you have given your property a name you open with a curly brace and when you have finished choosing all your properties you close with a curely brace. As shown in the above example.
Also remeber that after the property you use a colon and then after a value you close the proepty with a semi colon.
It will all be made even clearer in the next step.

Let’s start by changing the way your site looks. Type:

body{

}
By using the body selector we can change the way some of the most popular tags in html look like.

Now let’s change the font type, the font size the font colour and the background colour.
So inbetween the curly braces of the body selector write:

body{

font-family:Verdana;
font-size: 20px;
color: red ;
background-color: blue;

}

The font-family property allows you to specify the font you wish to use in your web page, you can put several font values in the font-family property, like this:

font-family: Verdana, Georgia, Serif “Times New Roman”;

so if the user doesn’t have Verdana installed on their computer then their browser will detect the next font and use that instead. For font names that have more than one word you enclose them in speech marks.

the font-size property changes the font size, you can specify the font size in pixels (px), ems (em) and points (pt).

the color property changes the color of your text.

and the background-color property changes the colour of the background. If you want to use an image as well for your background you simply use the background-image property as shown in the example below:

background-image: url(the link to your file goes here) ;

Thats it, so your html page will now have a blue background with a red Verdana font and a size of 20 pixels. It will also look pretty sightly, so you should play around with the sizes and fonts and colors to see what you want best.

Okay so you have created the styleshet but you don’t know how to apply it to your web page. Simple just add a link inbetween your head tags like this:

<head>

<link rel=”stylesheet” href=”styles.css” type=”text/css”/>

</head>

  • make sure you put in the correct path to where your stylesheet is (in the link part) otherwise the styles may not show up on your web page. Eg. if you put your css file in its own folder the path would be css/styles.css.

That’s it for the first tutorial. If its too complicated I will try to simplify it.

Advertisements

2 Responses to “CSS Tutorial 1: The Basics”

  1. David Says:

    I need some help with the Asktheseguys wordpress theme..
    I can't figure out how to get the header and ad bar at the top to go all the way across the screen.. Or better yet, how I can place an ad box in the empty space at the top right.
    I can usually figure this stuff out easily, but can't find anything in the CSS that will make it work..
    Anyone have any ideas?

  2. Maz Says:

    you could ask on the wordpress support forums for some help.


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: