CSS: Cascading Style Sheets Made Easy Using Cascading Style Sheets (CSS) Taylor Anderson
HTML was originally intended to be used to define the content of a document using tags such as <h1>, <p>, <table>, with the browser
responsible for taking care of the layout without the use of formatting tags like <font>. As the major browsers (Internet Explorer and Netscape) continued to add support for more and more tags, though, it became very difficult to create Web sites where the content was separated from the presentation layout.
In other words, the design and content became intertwined, making it difficult to make changes. The W3 (World Wide Web Consortium) created styles in response. Most modern browsers now support Cascading Style Sheets (CSS), which can save you a lot of work when designing a Web site. And instead of having the same styles in the <head> tags of each page on the site, you can have an external style sheet to control the layout and styles of the entire site. This means that you can now change many elements of an entire Web site simply by changing one file!
Using CSS: Where?
There are two ways to define styles using CSS. The best way is generally to use an external CSS file so that you can control many different elements throughout the entire site instead of defining the same elements over and over in all of the HTML files.
To make use of CSS, simply insert the following code between the opening <head> tag and the closing </head> tag.
Simply insert that between the <head></head> tags in a HTML document.
NOTE: For “path/to/stylesheet” insert the path from the HTML file you are editing to the CSS page.
The second way is to insert <style></style> tags in the head tags. This is a good way to define specific styles you only use on one page; otherwise you will want to use an external file sheet for two big reasons: visitors only have to load the sheet once, and you can control the styles for the entire site by editing one page.
Formatting Text
Using CSS for formatting text is much easier than using <font> tags everywhere! Let’s start formatting some text.
Open Notepad or favorite HTML editor, where you can copy and paste the following code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"> <head>
</head> <body> <h1>CSS: Cascading Style Sheets</h1>
<p>I love CSS, its so easy to use and it makes changes much easier!
I can do things in CSS that HTML can’t!</p> </body>
</html>
Personally, I use XHTML for every type of Web site now because it’s cleaner and more precise than HTML 4.01. After you’ve inserted the above code, save the file as index.html
