Learn CSS, part 1 - The HTML vs. CSS example
(Page 4 of 7 )
You may say "Why would I need to learn CSS when I'm fine with HTML and I can do what I need to do with it?" Think about it: if CSS is not needed, then why has the W3C wasted a great deal of time designing the specifications, and why have browser makers (like Microsoft and Mozilla) been integrating support for CSS in their browsers? Actually, there are many problems with HTML. Suppose that we have a 100-page website; each page has five paragraphs, and each paragraph has a Tahoma font (in the form of font tags of course). After you have completed your website development, your manager says "I don't like Tahoma, so let's use Arial." Now you have to do a search and replace on 100 pages; at five tags for each page, you must replace 500 tages. Using CSS, you can take just three seconds to modify the font on all of the pages.
CSS is a language that has been designed to format the styles of markup elements. This means that you can use CSS to format HTML, XHTML, XML, and any other markup language. HTML is a structured markup language, and as you know the font tags are deprecated, which means that they will be removed in the future from HTML. CSS is a simple, easy to use and easy to understand styling language; in fact, you can do a lot of things with CSS that you can't do with HTML. So let's look at this example:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>The IT Field</title>
</head>
<body>
<p>
<font face="Tahoma" color="red">
Information Technology (IT) has been the most famous and attractive field in the last
20 years and many students choose to study Computer Science and Information System which qualify
them to work as Programmers, Developers, Database Administrators and Network Engineers.
</font>
</p>
</body>
</html>
Now if you have 10 or even more paragraphs on a single page, and you have 100 or even more pages on your website, it's a big problem to change from Tahoma to Arial font. You may think about using the <basefont> tag, but it's still a problem when you have many pages in your website. To solve this problem, we need to create a CSS file and use the features of CSS to state that, each time we use the element <p>, a certain font will be used. Copy the following code into a file and save it as Paragraph.css, then place the file in the same folder as the above HTML file. By the way, take note the extension .css; you must save the file with the extension .css, because some browsers actually ignore the file if it doesn't have this extension.
p
{
font-family: Arial, sans-serif;
color: red;
}
As you can see, the CSS file contains just a few CSS lines (which we will talk about shortly). These few lines state that you will have an Arial font (or the alternative sans-serif font) with a red color every time you define a paragraph (using the <p> element), so the only place you need to modify when you change the font is the font-family property. Note that the CSS file is a standalone file. You must refer to it from every HTML page you have in order to get the effects we are talking about. Let's see how to do that in the HTML page. Please replace the HTML page with the following code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<link rel="stylesheet" href="paragraph.css" type="text/css">
<title>The IT Field</title>
</head>
<body>
<p>
Information Technology (IT) has been the most famous and attractive field in the last
20 years and many students choose to study Computer Science and Information System which qualify
them to work as Programmers, Developers, Database Administrators and Network Engineers.
</p>
</body>
</html>
We have removed the font tag from the document and added a link to the CSS file using the link element. The rel attribute defines the relationship between both documents -- which is that the referenced document (Paragraph.css) is a style sheet document for this HTML document. The href attribute (hyperlink reference) refers to where the document is, and accepts an absolute or relative path to the document. The type attribute defines the MIME of the referencing file, which is text/css.
Now you can modify the font and its color through the CSS file, and it will be applied to all of the <p> elements in all of the pages as long as the pages refer the CSS file. Let's talk more about the Paragraph.css file.
Next: CSS rules and selectors >>
More Style Sheets Articles
More By Michael Youssef
