Home arrow Style Sheets arrow Page 4 - Learn CSS, part 1
STYLE SHEETS

Learn CSS, part 1


While HTML lets you do many things, Cascading Style Sheets (CSS) let you do even more. In particular, they can save you a great deal of work when you want to make changes to the appearance of a Web page or even an entire website. This first article in a series covering CSS will explain where the CSS specification comes from and show you just a few of the ways you can use CSS.

Author Info:
By: Michael Youssef
Rating: 5 stars5 stars5 stars5 stars5 stars / 32
May 16, 2005
TABLE OF CONTENTS:
  1. · Learn CSS, part 1
  2. · CSS Specifications and Implementations
  3. · Browsers we are going to use
  4. · The HTML vs. CSS example
  5. · CSS rules and selectors
  6. · Groups of Selectors
  7. · Validating your CSS Documents

print this article
SEARCH DEVARTICLES

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.


blog comments powered by Disqus
STYLE SHEETS ARTICLES

- CSS Padding Overview
- CSS: Margins Overview
- Top CSS3 Button Tutorials
- More Top CSS3 Tutorials for Animation and Im...
- CSS Mega Menus: Adding Extra Sections
- CSS Mega Menus
- CSS3 Accordian Menu: Horizontally Display Hy...
- CSS Combinators: Working with Child Combinat...
- CSS Combinators: Using General Siblings
- Intro to CSS Combinators
- CSS Semicircles and Web Page Headers
- Drawing Circular Shapes with CSS3 and Border...
- More CSS Pagination Link Templates
- CSS Pagination Links
- Animated CSS3 Image Gallery: Advanced Transi...

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
 
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 
Support 

Developer Shed Affiliates

 




© 2003-2017 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials