|
CSS Tutorial There are two ways to use stylesheets on your websites. Either External (where you put a link to a separate .css file on every page) or internal (where you list all the .css values on every page.) I prefer external as it's easier to modify when you want to update your site/change layouts. With external, you make a new file, enter all your css attributes into the file then save it as a .css file and put the link to the file in the html section of every page on your website. When you want to update your website, you just open the .css file and change the values in there, and it will automatically change it for the rest of the website. Whereas with an internal stylesheet, to update your website you would need to open every page you have for your website and change all the css individually on every page. It's a lot more time consuming and tedious. So, onto what a stylesheet looks like and how to use it. I will be showing you how to use an external stylesheet. This is what
my stylesheet looks like: Now this probably all looks like mumbo jumbo at this stage. But I'll explain what everything means. a:link - the style of your links overflow: what will happen when your page is too
long and it needs a scrollbar font-family: the name of the font, ie. Arial,
Times New Roman These are the basic things you will need for your website. Of course, there are more things you can add, but these will do for now. I should also say that the scrollbar properties only show up in Internet Explorer, so for people using other browsers like Firefox, the scrollbar will just have the default properties for every website. So, to make your stylesheet, open up Notepad. Copy & paste whatever attributes that you think you might need from the ones I listed. Then just edit the hex codes accordingly. This is a good place to start for hex codes if you don't have PS. If you do have PS, click on the foreground colour, choose your colour by sliding the colour bar up or down and clicking inside the box for different shades, and it will give you the hex code. Then save your file as stylesheet.css Now, to link the css file in your page go to the html
part (if you're using Frontpage click on the HTML button down the bottom
next to Normal) Find the bit up the top where it says: To add your external stylesheet, you need to add this:
Add that to every page you want to change the
properties of, and you're set.
I hope you find this tutorial useful, and feel free to
email me or tag me if you
have any comments about it.
|
