An Introduction to Cascading Style Sheets
Web sites are the backbone of the internet, but what many web surfers do not know is how hard
it is to maintain these web sites. HTML can be cumbersome, especially when trying to change
around a web site's layout and design. However, there is a better way. With the use of
Cascading Style Sheets (CSS) you can keep your content and your design/layout completely seperated.
What is CSS?
CSS is a way to "style" your web site, without changing your HTML. CSS often exists in a seperate file
and is used to control how HTML elements are displayed. The CSS file extension is ".css", and contains
no content or information that would be of interest to the normal web surfer. Cascading Style Sheets
are for design only and are a powerful tool to the serious web designer.
Benefits of Utilizing CSS
After you have grasped the basic concepts of CSS, you will be able to make sweeping changes to an
entire web site with only a few changes to your CSS file. This is possible because many web pages
can be styled from a single CSS file, not only allowing for easy maintenance, but also removing
the chance of user error that might happen when trying to change many HTML files manually.
How do I Use CSS?
Getting started with CSS is quite simple. All you must do is let the browser know you are using CSS and
specify the location of your CSS file. To begin, create a new HTML file, "index.html" and type in the HTML code
that you see below. Inside the <link> tag we inform the browser that this web site uses CSS and the "href=test.css" tells
the browser where our CSS file is located. Note: We will create the "test.css" file in the next step.
<html>
<head>
<link rel="stylesheet" type="text/css"
href="test.css" />
</head>
<body>
<h1>My First CSS Driven Web Site</h1>
</body>
</html>
Making Your First CSS File
Now that you have pointed the browser to right place it is time to create "test.css". Simply open
notepad, or any other simple-text editor and save the file as "test.css". Make sure that it is saved
in the same directory as your "index.html" file. As an introduction, we will start
by simply changing the background color of your web site, which will let you know if you followed
the directions correctly. Type the following code into your "test.css" file and save it when you have finished.
body{ background-color: blue;}
Now open your index.html file in a web browser and refresh it. The background should have changed from white to
blue, the color that we specified in our CSS file.
CSS Syntax
Now that you have created a CSS modified web site, it is important to understand the format
of CSS code. CSS is seperated into three distinct elements that must be included to make your CSS code functional.
First, you must specify which HTML element you wish to format, this is known as the "selector". Second, the
attribute you wish to modify is specified, this is known as the "property". Finally, you must define a value
for that attribute, which is also known as "value". Combining these three elements you get the following:
selector{ property: value; }
And in our "test.css" we defined all these elements. The body was the selector. The background-color was the property, and the color blue was
the value.
Defining Multiple Properties
To define multiple properties for a given selector, simply add property:value pairs inside the curly braces of your CSS code.
Here is an example of changing the <body>'s background-color, color (font-color), and font-family and the <h1>'s
background-color and border:
body{ background-color: blue;
color: white;
font-family: arial;}
h1{ background-color: white;
border: 1px solid black;}
Continuing Your CSS Learning
Hopefully you feel comfortable with the information provided in this article. Cascading Style Sheets
are a wonderful tool to the web designer who is serious about exceptional web design. With CSS you can reduce
your time previously spent on tedious HTML tasks and use your time on more important tasks, like developing better content
and maybe getting some sleep! If you wish to further your knowledge of CSS,
then I would recommend checking out the
CSS Tutorial at Tizag.com.
This article was written by Brian Pearl, a free-lance web designer and co-creator of
Tizag Tutorials. Feel free to contact Brian
Pearl with any questions or comments.
To reprint this article copy it in its entirity, including this disclaimer.
| 