CSS The Beginning

What is CSS?

First of all, what is that thing called CSS? CSS stands for Cascading Style Sheet, which explains not that much.
HTML was initially designed to display data, separated in headers, paragraphs, tables, … with hyperlinks to other documents. Over time, more and more visual aspects came to HTML and designers found out that tables could also be used for page layout. This became a nesting of tables within tables within tables,… Those table designs are very effective, but because tables weren’t designed for this, also very inefficient. To separate this layout from the initial content, CSS was designed.

Why most, but not all, tables are bad

Tables result in longer load times

Tables are seen by browsers as single entities. Thus, before displaying a table it is loaded completely and then displayed. When taking the initial purpose of a table, being to display, euh… well, tables of data, this makes perfectly good sense. Designers began to put all data into tables, resulting in the entire page to be loaded, before anything is shown. This is also the main reason why pages take a long time to load.

Maintenance

Maintaining tables is a nightmare. If you’re using a WYSIWYG tool, like Macromedia Dreamweaver, Microsoft FrontPage or Adobe GoLive to manage your sites and their designs, you generally don’t have to cope with the messiness of nested tables, however, these tools aren’t completely foolproof. If you do hard-code your pages, you probably know the feeling. Tables in HTML are robust as they are, even without nesting. We can’t do anything about that. We can however, do something about the way we use them.

When is it ok?

So when can I use a table? If you have tabular data to be displayed, and the data is more important than it’s layout, you can use a table. Tables should be used for numeric or textual data, not graphics, multimedia data types, forms or any other interface component.

CSS rules!

CSS is created to define the ‘style’ of our web pages and sites. It tells the browser, those that understand CSS of course, how to display specific parts of a web page. A web browser has a ‘default’ way of showing web pages. With CSS styles, you overwrite these rules, choose your own.

Every style consists of one or more rules. Each rule has two parts:

* a selector that defines to which HTML element the rule applies. (i.e. h1 or p)
* a collection of one or more properties, which describe the actual appearance of the element(s) that match the selector. (i.e. color: red; or font-size: large;) Each property consists of a pair of values separated by a colon (‘:’). The first part defines which property to alter. The second part defines to what to alter the property to. Each property must be followed by a semicolon (‘;’), except for the last property per selector, where the semicolon is optional. It is however good habit to add it there too.

A few simple examples of CSS rules:

* h1 {
color: red;
}

The selector, h1, means that the properties apply to all h1 headings in the document. The property that’s being modified is color, which applies to the font’s color. The value that color gets is red. So as a result all h1 headings are now red.

* p {
color: green;
font-size: 14px;
font-family: 'Modern Tech', Verdana, sans-serif;
}

This rule applies to all paragraphs, p, in the document. The properties being modified are the color, as in the previous example, the font-size, which is now set to the size of 14 pixels, and font-family, which defines the font being used. Because the font named ‘Modern Tech’ contains a space, the quotes are needed. Both ‘ ‘ and ” ” are allowed. If the browser can’t find the ‘Modern Tech’ font, it uses ‘Verdana’ and if even ‘Verdana’ can’t be found, it uses the default font for sans-serif type.

Where can CSS be defined

CSS styles can be defined in three different places:

* Inline
* Embedded
* External

Inline CSS

First, you can define a style entirely in line with the HTML’s code, hence the name inline. You can define a style attribute to almost all HTML elements. For example: <h2 style="color: red; font-size: 12px; font-weigth: bold;"> A modified h2 heading </h2>
The biggest advantage of CSS is the possibility of separating layout from code and content. By using inline CSS, this advantage cannot be set to use. Inline CSS is good, however, for quickly testing style properties before giving them a more permanent place.

Embedded CSS

Specifying embedded CSS is probably the most used method among beginning web designers. To embed a style sheet in a web page, place the style block in the head of the document like shown in bold:

...
<title>CSS The beginning</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
<!--
h2 {
color: red;
font-size: 12px;
font-weigth: bold;
}
-->
</style>
<head>
...

The style specified above, applies to all h2 heading in the entire HTML’s document.

External CSS

This is my personal favorite, defining CSS in an external file, completely separate from the web page. You can link to the CSS file with the <link> tag in the head part of the HTML document like this: <link rel="stylesheet" type="text/css" href="stylesheetname.css" />
The external file might contain the following:


h2 {
color: red;
font-size: 12px;
font-weigth: bold;
}

This is my favorite for a few reasons:

* External CSS is the least limiting. You can define one external style sheet and use it for all web pages in you website. Just link to it from every page. This also means, by changing the .css file, you can change all pages at once.
* Because the style/layout is separated from the code and contents, it is easier to maintain.
* External style sheets are treated as separate files by the web browser. So if you have more pages using the same style sheet, you only need to download it once. This is great for the performance of you website.

Conclusion

You should now have a basic idea of what CSS is and what it is supposed to do for you. Also, you have a basic idea of how to implement them in your websites.

If you want to continue learning CSS, click here for part 2 of this tutorial.

No Responses to “CSS The Beginning”.

Leave a response