Beginner’s CSS Tutorial
Posted by gemsuraj on September 16, 2007
Cascading Style Sheets (CSS) allows you an efficient way to style up HTML web pages, and this short guide is here to explain how CSS works and the benefits gained from using CSS.
Firstly, the benefits. For many years the de facto method of building web pages was to use tables, with all style instructions written on the page (the dreaded “font” tag springs to mind…). The disadvantage of this was that on large websites, any future changes such as editing the text colour would need to be done on each individual page. This is obviously highly time consuming and hardly cost effective to businesses. CSS allows you to separate the style from the content. This means putting all text styles, positioning and background image instructions into a single separate file and linking to it from each page. Then any future changes need only be done in one place. Other benefits include quicker loading times (due to the smaller individual file sizes) and easier crawl-ability for search engines.
So, how does this CSS thing work then? In its simplest terms, you declare a list of styles to attach to every instance of a particular element in the following format:
<style type=”text/css”>
selector {property: value;}
</style>
Let me break this down – the <style></style> tell the browser to read the code as CSS, the “selector” is the element you want to style up, the “property” is the type of style you want to declare and the “value” is the value assigned to that style. For example, if I wanted to make the text in all “p” tags red, I would use the following CSS declaration:
<style type=”text/css”>
p {color: red;}
</style>
The “;” after the value isn’t strictly necessary in either of these cases, but is necessary when declaring multiple styles within the same curly brackets “{}”.
If you didn’t want all p tags to have red text, you can take this a step further by adding a class to the p tags you want to have a different style and referencing them in the CSS with the “.class” selector:
<p>This text is red.</p>
<p class=”blue”>This text is blue.</p>
<style type=”text/css”>
p{color:red;}
p.blue{color:blue;}
</style>
This will produce the following output:
This text is red.
This text is blue.
I did mention earlier that the CSS is best put into an external file, but all I’ve shown so far is how to write CSS declarations within the HTML page. Let me fix that…
The CSS can go in an external page with a file extension of “.css”. I’ll call mine “stylesheet.css”. Within the <head></head> tags at the top of the HTML page you need to link to this stylesheet like so:
<link rel=”stylesheet” type=”text/css” href=”stylesheet.css” />
There you have it. With a little more research into how to control the various elements and what selectors you can use (W3 Schools is always a good place to start), you should be well on your way to streamlining your web pages!
Karl Erfurt said
Thank you for this introductory tutorial on CSS. I’m always running into CSS when looking at or editing WordPress themes, but never really understood the syntax. This should help somewhat, especially with being able to link to it from a regular HTML page. After I learn a little more about this stuff, I might be able to try designing some of my own landing pages.
Overall, this looks like a good blog that contains some useful information for beginners. I’m rather surprised that it hasn’t been updated in three months and is not on its own domain. With regular maintenance, you could probably develop a good readership (and income) here.
Must Be That Girl said
Finally I’ve found some CSS tutorial for beginners. Thanks for the info.