CSS Stands for Cascading Style sheets; the styles define how you would display HTML (Hypertext Markup language) elements.
In this tutorial I will show you how to
· Create a style sheet
· Link the style sheet to your html document
· Useful links
Firstly to create a style sheet all you need is a text editor, notepad is fine, or a WYSIWYG editor (such as Dreamweaver).
CSS is written in plain text so it is easy to understand not like some programming languages.
CSS files are saved with a .css extension.
CSS syntax is made up of 3 parts the selector, property and value.
Eg. selector {
property:value;
} – This is the way you would write your css in your css file.
1. Create a style sheet
Now lets turn a basic html page like this. Into a page like this. Yes I know it doesn’t look great but it is an example to show you what is possible with CSS.
To view the HTML and the CSS in the example page, right click and select View Source. You will find the CSS in the <head></head> tags of the HTML document.
So the first html tag that we will give some style to is the body tag. In your CSS file write:
CODE
body {
}
Now in between the curly braces we are going to put the properties that will change the way your content will look in the body tag of your HTML document. We will change the font, font size the font colour and we will give our HTML document a background colour.
Write:
CODE
body {
font-family:Verdana;
font-size: 20px;
color: #993399;
background-color: blue;
}
So 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".
If the user doesn’t have the Verdana font 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.
You can use either hex codes for colours such as #993399 which will give you purple or you can write the name of the colour such as purple.
If you would like to use a background image in your HTML document then you use the background-image property like this:
CODE
background-image: url(the link to your file goes here);
You will notice the sample HTML file I am using, that there are headings; heading 1 and 2, using the HTML heading tags (<h1></h1>, <h2></h2>). It is easy to change the look of these specific tags in your css file. Just write:
CODE
h1 {
color:blue;
font-family: Arial;
background-color:pink;
font-size:2em;
}
h2 {
color:orange;
font-family:Georgia;
background-color:green;
font-size:1.5em;
}
So next you will want to style the paragraph tags. You will notice that I have used two paragraphs in the example HTML file and that they look completely different. How come?
Surely if you apply a certain style to a paragraph then all the paragraphs will look the way you have styles it? Yes your right….but No.
You see in CSS you can create your own classes so that elements in the HTML which will initially look like same will look different if you apply a different class to it. Sound confusing? Don’t worry just follow the rest of the example.
First to style a basic paragraph tag you write:
CODE
p {
color:black;
background-color:white;
font-size:14px;
text-align:right;
}
This will make ALL of your paragraphs (that the style sheet is attached to) change to all the properties you have used.
But say you wanted paragraph 1 to have black text with a white background colour and the text to be aligned to the right,
BUT
you wanted paragraph 2 to have a black background colour with white text and the text be aligned to the centre.
Well then you will use something called a class in your CSS file. With a class you can “define different styles for the same type of HTML element”.
So all your paragraphs in your HTML document currently have black text with a white background and are aligned to the right. So now to make paragraph 2 have a black background colour with white text and be aligned to the centre. We do this:
CODE
.ptwo{
color:white;
background-color:black;
font-size:14px;
text-align:center;
}
Notice the period in front of the selector, this is IMPORTANT because it specifies that the selector is a class. You can create any name you want for classes they can contain numbers and letters, but it is always a good idea to be descriptive when naming your classes.
OK great so now the 2nd paragraph will display in the second way I chose?
Not just yet.
Because you have created a class but you need to tell the HTML document what you want to do with the class.
So you need to open up the HTML file you want the CSS to be applied to. Then find the HTML element that you want the class to apply to. Then in the tag (in this case the 2nd paragraph tag) write: class=”ptwo”
So you should end up with something like this:
CODE
<p>Paragraph 2: Lorem Ipsum….</p>
Well done you just created your first class.
Now I will show you what can be done with images in your CSS file.
So the default selector for an image is img.
So let’s give our image a 10 pixel thick yellow dashed border.
NB: Because there is only one image in the example HTML document I will just use the default selector to specify the properties I want assigned to the image. In reality though, you will probably use more that one image in your HTML document so to specify a certain look for each image then I would suggest using a class. (yes you can use classes for images too).
So write:
CODE
img{
border:10px dashed #ffff00;
}
Preview the image in your browser. You can also specify the height and width of an image in your CSS file, and many other things to.
That’s it, how to use basic CSS for a HTML document. Feel free to copy and play around with the HTML and CSS in the example.
2. Link to the style sheet
Now you have created the style sheet but your going to need to tell the HTML document that you want it to use the style sheet so in your HTML document in between the <head></head> tags write:
CODE
<link>
Use the above link if you have an external stylesheet.
If your CSS is in the actual HTML page (an internal style sheet) then use the <style> tag within the <head></head> tags like this:
CODE
<style>
all your css goes in here
</style>
That’s all there is too it.
3. Useful Info/Links
1. Write your CSS in lower case letters.
2. Remember to put a period in front of your classes.
3. Always open a new selector with an opening curly brace.
4. Always close a selector with a closing curly brace.
5. And remember to COMMENT COMMENT COMMENT - nothing is worse that coming back to CSS page with lines and lines of CSS and you can't remember why you chose that 'particular' line of code.
Comments will not have any effect on your CSS code. To write a CSS comment do this: /* what you want to say here */
6. Different browsers will display CSS differently. When you have created your style sheet and linked it to your HTML document view it in different browsers. Sometimes because of the differences some designers like to use different style sheets for different browsers.
7. Experiment with your CSS! Don't be afraid to try out different things, people who work with CSS come up with new things all the time.
8. Ask people to view your code and critique it. The more input you get the better your css will be
9. View sites online and look at the CSS they have used, you can pick up methods and learn from them.
I would recommend the W3C to read up and validate your CSS:
http://www.w3schools.com/Learn CSS -
http://www.w3schools.com/css/default.aspValidate your CSS -
http://jigsaw.w3.org/css-validator/But personally in my experience the best method to learn CSS is from a book. I taught myself the basics of CSS from a book and then went online to learn more advanced methods.
Subject: Basic CSS Tutorial 
Sat Mar 24, 2007 10:57 pm