The Basics: Inserting CSS (Cascading Style Sheets) Code

Beginner Level

Hello, my name is Alexandru Dinulescu (aka Alex D) and I am the XHTML/CSS coder for Lifeline Design. I have been invited to share some of my knowledge on this blog, so without further ado, this is the first lesson: how to insert CSS code into your XHTML pages.

Before I begin, a short explanation on what CSS is and what it does. Basically, there are 3 layers on your website: the first one is the content of the website which includes all the text, links, images, and so on. This is the content layer or the XHTML layer. On this, another layer is added which is the CSS layer - it governs how the site looks, what colors you use, the site's position (left, center or right), widths and heights. The 3rd layer is the behavioral layer and it involves interactions between the first and the second layers based on user input. This 3rd layer is also known as the javascript layer.

Now involving CSS, this means that we are using the 2nd layer to style the content layer and there are a few ways to do it.

The Old Way

Back in the good ol' days of the late 90's the web was a mess, as every page was table-tag based and the CSS was added inline. What does that mean? Well it's simple, every tag had its CSS added individually instead of using a specialized option, and when you had to modify something, let's just say that it could take hours or even days for a huge website.

An example looks like this:

<p style="color: #fff; line-height: 30px; font-weight: bold">
Individual Styled Paragraph</p>

Now the downsides of this method as previously stated are huge. Every time you wish to change something you have to go over all the pages and modify every individual element, which can turn a 2 minute job into a full-week job, which is good for us, the coders, but bad for business.

Another old way insert CSS code in XHTML was by using the <style> tag. This tag can either be added in the <head> section or anywhere in the XHTML code.

<style type="text/css">
 /* css code goes here */
</style>

The New Way

After browser support got a bit better, another easier way of inserting CSS came to light: using the <link> tag inside the <head> tag. This means that you had an individual file that coordinated the CSS, and finally the 2 layers of content (XHTML) and presentation (CSS) got separated, thus making life easier whenever it was time to modify some things:

<html>
 <head>
  <link rel="stylesheet" href="./css/file.css" media="screen, handheld" type="text/css" />
 </head>
 <body></body>
</html>

This method proved to be highly adequate and self-sufficient, but some developers thought of an even better way of organizing the CSS files, and they did that using the @inport feature. Basically, instead of having 1 master CSS file that contained EVERYTHING, you had a CSS file for every section of the page (or every page-module if the website was built with a modular approach in mind) and then you had a MASTER CSS that contained only a few lines such as this:

/* Master CSS FILE: */
@import: url("./head.css");
@import: url("./body.css");
@import: url("./footer.css");
/* and now you can just link the master.css file instead of all 3 */
<link rel="stylesheet" type="text/css" href="./css/masterCss.css" type="screen, handheld" />

That's about it for this week. Catch you all next week when I'll talk about Conditional Comments, and how can Conditional Comments help you fix problems for Internet Explorer 6 and occasionally Internet Explorer 7 browsers.

Stay Tuned!

'CSS Tutorials'