UberPages :: Tutorials :: CSS Tutorials :: Beginner's CSS Guide
Quick Menu
If you are fairly new to CSS, and even web design (HTML), then this tutorial will help you get the right ideas about CSS. Just keep in mind that this is a guide and will give you the general uses of CSS and how to apply it and also why it should be used.
Way back in the day of web design, anything on a web page was controlled by what it said on the web page, which seems natural, right? So that means that any time you have text on a page if will show up as what you specify it with the default font, specified on THAT page.
The same goes for anything else. Any time you want to colour some fonts, have some certain types of formatting, like text justified to the right, you would have to specify every instance to every image/font/paragraph, etc.
Now... That's not too bad, for the time being, but let's say you had to make some changes to the site. Let's say you decided to change the site so that all the default text was Arial, as opposed to Times New Roman... Take a moment and let that swirl around. Good?
You would have to go back to every single instance of whatever you were changing, and change it on THAT page... That's going to take a LONG time if you have a lot of things to change.
This is where one of the nicest features of CSS steps in...
While using CSS on your pages, all you have to do is specify a separate CSS file that has power over that page. So instead of having specified headers like so...
Just imagine having that around every topic headline for every page for a web site that has 50 or so pages. Feel like suicide yet? Here's a solution, and it doesn't involve razor blades!
<head>
<style type="text/css">
h2 {color: #FF0000; font-size: 20px}
</style>
</head>
<body>
<h2>HI!</h2>
</body>
</html>
Now, take a moment and check that out. If you've caught on, you might be saying, "You're telling the H2 tag to look a certain way, but you're doing it IN the page!"
If you've said that, good eye! Because this shows that CSS can be used from within pages, but also outside of them. Think of the possibilities! It's very simple, all you really need to do (you could if you wanted to is make a text file, and later rename it from file.txt to file.css) is drop what's in between the <style> tags into a file, and then tell every page in your site to look for whatever css file you named. Like this:
<head>
<link rel="stylesheet" type="text/css" href="mystylesheet.css">
</head>
<body>
Hello World!
</body>
</html>
All you have to do is tell each page where the stylesheet is, then edit the stylesheet and you're golden. It just takes planning ahead!
