Introduction to CSS
If you'e brand new to CSS then this is the perfect introduction, it keeps everything simple and doesn't add in too much information for newbies. If you know the basics and want to learn more perhaps you should look at my second introduction into css, which goes into a lot more detail.
What is CSS? Css stands for 'Cascading Style Sheets' and these sheets contain information that define certain properties of your website, for example you can use them to change the colours of scrollbars and links; or use them to decide how you want your background: colour, image, repeated or not and so on. There are a lot of different things you can use your css sheet for, and they come in really handy - especially since it saves a lot of typing in your html file.
So, how do we make a style sheet? Well that's easy we just open up notepad, wordpad or whatever program you use to type out your html and we save our new files as 'filename.css' generally 'style.css'. Now, we have to tell the file what it is. Much like you would use the <html> tag at the top of an html file to define what it is we use the following tag at the top of our style sheet:
<style type="text/css">
This tells the files that it is a style sheet and is written in text and css. So now we need to know how to close the tag again. So at the end of our file we're going to want to use the tag :
</style>
That's our file ready to be used for adding in our properties. Now in a style sheet there are certain terms or letters used to apply properties to the file. Below is a little list of common things that can be defined in a style sheet.
body - the main body of your file, it is in this that you can set your background properties, your scrollbar properties, your font, size, colour; links colours and more.
b - this letter denotes 'bold text' so when you use <B>Word</b> in your html file it knows what your bold text should look like; you can set the properties in the stylesheet for different colours, different fonts, different size, or even give your bold text a background colour.
i - this letter denotes 'italics text' and the same rules as above apply to this kind of text.
table, tr, td - these are your typical table terms but you can define the properties of ach separately in css; borders, padding and all the usual table properties.
input, textarea - these are your standard form terms, and again the css can be applied to the style of these too.
img - this will define image properties, border style, width and colour.
So now we know what terms are used in the style sheets how do we set the properties for these things? Well we simple write down the term and then enclose the properties in these brackets { } So for example your going to start with the main body, your style sheet should now look something like this:
<style type="text/css">
body { }
</style>
Now all you need to do is define the properties. And much like before there is a long list of properties that can be defined for each part of your file. So let's just look at some of the basics you can use.
background: #colourcode
background-image: url(image.jpg)
font-family: Tahoma, Arial, Whatever
color: #colourcode <--- this denotes the font colour
font-size: 8pt
text-align: center/right/left/justify
vertical-align: sub/super/bottom/top/middle
border-width: 1px
border-color: #colourcode
width: blahpx
height: blahpx
padding: blahpx blahpx blahpx blahpx <--- (padding from top)px (padding from right)px (padding from bottom)px (padding from left)px
Okay so now you want to put this together? Well to separate each property we use a semicolon. So, let's take a look at a sample style sheet now.
<style type="text/css">
body { background-image: url(image.jpg); font-family: Tahoma; color: #000000; text-align: center; font-size: 8pt; }
img { border-width: 1px; border-color: #000000; }
table { padding: 1px 1px 1px 1px; background: #ffff00; border-width: 1px; border-color: #000000; }
td { padding: 1px 2px 1px 2px; background: #cccc00; }
b { color: #711C00; font-family: Verdana; font-size: 10pt; background: #cccccc; }
i { color: #711C00; font-family: Verdana; font-size: 10pt; }
</style>
And there you go, now I have defined some basic properties in my style sheet. It is up to you how you decide to put together your style sheet, and how you want your website to look - but this css sheet can make it easier, this way you don't have to set your border properties every time you add in an image, and so forth.
Lastly, we need to know how to call on this style sheet. So in your html file, in between the <head> and </head> tags use the following :
<link href="style.css" type="text/css" rel="stylesheet">
This tells the html where to find your style sheet - filename, and it tells your html file what it is reading, a text/css stylesheet. There you go - you're set! Now your html file and style sheet are ready. Now how easy was that?