Creating a Style File

(Aptana Studio 3 version)


One of the key principles of modern web design is that content should be kept separate from presentation. HTML is used to organize page content and CSS determines the presentation -- the way the page actually looks. The next step in this lab is to create a new file that will contain the CSS that determines the appearance of your page. In the "File" window at the left side of Aptana, right-click or control-click on your project and select "New" -> "File". Your file name should be something like "style.css". Copy the following into your new file:

body {
   background-color: yellow;

This css directive tells browsers to make the background color of everything in your <body> tag to be yellow. (This page has a similar directive for the <blockquote> tag.)

Don't forget to save your new CSS file, just as you've been saving your HTML file. The file name should end in ".css", as in "style.css". Then tell your web page to use your new style sheet by adding the following tag to your web page. This should be located somewhere between the <head> and </head> tags.

<link rel="stylesheet" type="text/css" href="WHATEVER_YOU_NAMED_IT.css" />

If you preview your page after saving both files, the background color should be changed to yellow.