About a year ago when I started rediscovering the web and webdesign, I was very reluctant towards using CSS, mainly because I didn't exactly know what it was or what I can do with it. Today I see the same scene over and over again at several communities wher I am a member. Hence this entry.
What I am going to do is try and convince these people of the flexibility of CSS. Keep in mind that this is not a tutorial, it is meerly a guide through some advantages of CSS and a snippet of tips and tricks I have collected throughout the last couple of months. The article will be easier to follow with a basic knowledge of CSS and HTML
I have decided to bring this article in four entries, each covering a different aspect. A list of resources and further reading wil be given along with the last entrie.
- Why use CSS? In this entrie I will give some reasons I beleive are convincing enough to start using css and we will have a look into some basics.
- CSS & tables. Here we will have a deeper look at CSS tableless layouts.
- Overcoming CSS. A look at some cross-browser troubles.
- Nifty CSS tricks. Here we will have a look at some nifty tricks produced by some of the best designers among us.
Today we will start by answering the question Why use CSS?. We will also have a look into some CSS basics.
<!--more-->CSS?
CSS is short for Cascading style sheets. It is a language to help format yout HTML markup.
Why use CSS?
There are various reasons to consider when defending CSS. But I'll keep it to the most convincing.
Great control when it comes to a site layout and typography. Thanks to CSS you can control very pixel on scream. Control the size, font, color of your text. Appoint a certain background(color) to a single paragraph.
You can position elements precisely to the pixel.
Site wide changes can be done by changing a single document linked to all your HTML pages.
By applying CSS you can speed up your site. When using CSS there is no more need for the font tag, reducing the size of your page and speeding it up. Going tableless reduces the page size with more than 50%. (see later.)
Some basics.
Three paths to walk.
When implementing CSS there are three formats you could use. Inline, embedded and a linked stylesheet.
Inline CSS is when you place the css code inline with your HTML tags. It would look something like this:
<h2 style="text-decoration: underline;"> This will be an underlined text</h2>
Inline styles are best used when you want to give a propertie to a single string.
Embedded CSS is placed between the head tags of your document. It would look something like this:
<head>
<style type="text/css">
<!--
tag {
property: value;
property2: value2;
}
-->
</style>
</head>
A linked stylesheet is an external CSS document linked to your page. Your page could look something like this:
<head> <link rel="stylesheet" href="/path/style.css" type="text/css"> </head>
With your stylesheet looking like:
tag1 {
property: value;
property2: value2;
}
tag2 {
property: value;
property2: value2;
}
Styling up.
There are two main ways of styling up a your elements. You can define properties to an element or you can define a class and choose wich element it applies to. It's easier to explain with an example.
Styling an element. The code in the example below shows us how we can remove the underline from every link on the page.
a {
text-decoration: none;
}
The second method to styling up is defining a class. Let's say we want to be able to highlight a string of text. Then the css could look like:
.highlight {
background-color: #DDDDDD;
}
Defining the folowing in your source will give the text a gray background color.
Defining the folowing in your source will give the <span class="highlight">text a gray background</span> color.
In the next entry we will have a look at css designs/positioning and compare them with tables.