Lesson 6 - Where's Your Style?
We've learned alot of HTML at this point, but our pages are still bland and boring. Luckily, we jumped into web design during a really exciting time.
The old way to add style to an HTML page was to use attributes in tags. For instance you could use a "color" attribute in the <p> tag. The old way would look like this:
<p color="#ffffff" align="center">text goes here</p>
This was the old way of styling a document. Unfortunately, this married the content with the design, and this inseperability created many problems. For instance, what if a client tells you to go ahead and ends up changing their mind on the text color at the last minute (this happens ALL the time). Well in the old way, you would have to go into every page you created, sometimes hundreds, and tediously change the color in the specific tags. This system of design is inefficient, but for years it was the standard. More recently, a new way of styling a page has become standard. This is known as CSS.
CSS and HTML- Together at Last
CSS, or Cascade Style Sheets, effectively separates the design from the content. By using CSS, tags can be styled in a separate document linked to the page. For instance you could say in the CSS document:
p {
color:#000000;
font-size:12px;
margin-left:10px;
}
This would style the <p> tag by making the text color black (#000000 in hex), it would make the font-size 12 pixels high, and add a left margin of 10 pixels. You could even add a background image. Every tag in your HTML document can be styled independently. You can put in as many attributes with values as you want. There are attributes for padding, margin, background, color, text-align, text-decoration. Some tags have unique attributes, some attributes can be applied to almost every tag. Your actual CSS document is quite simple. It is simply a list of tags with attributes. The sytax (format) is as follows:
tag {
attribute:value;
attribute:value value;
attribute:value;
}
tag2 {
attribute:value;
}
Some attributes can have multiple values, such as background. For instance, you can have an image and say exactly where that image is placed and aligned. There are so many attributes and values that the best way to keep track of them is to get a reference book. Click here to see the CSS for this site.
The Missing Link
The truly amazing thing about CSS is that an unlimited number of HTML pages can link to the same CSS page, keeping the design intructions for an entire site on ONE document. This means I could change the look of an entire site in just a few minutes. In fact, I did that the other day. Remember when we talked about references? You link your HTML page to a CSS page in much the same way. In the <head> tag of your HTML you just include this handy tag:
<link rel="stylesheet" type="text/css" href="styles/main.css" />
The only part you change is the href, which is linked exactly like the anchor attribute "href". Try it out!