Example

Writing styles

Here's the basic syntax:
tag {attribute: value; attribute: value; attribute: value; }

Here's an example:
h2 {font-size: 12pt; font-style: italic; color: red; }

That's pretty much it. A style can include commands to affect several different attributes of a particular HTML element; in the example above, we set the font size, style, and what font to use for h2 elements. Each attribute is separated from its definition by a colon (:) and each attribute is separated from other attributes by a semi-colon (;). Don't ask me why they did that: I'll just answer, "They just did!"

There's a huge number of attributes that can be affected in this fashion. Few people know them all without looking them up; if you don't have a CSS or HTML book (many HTML books cover some CSS) handy, then look up the style on the Internet and take it from there (really, it isn't stealing, it's called referencing).

Where CSS goes

So now that you have the CSS concept down (I hope), we can move on to implementing this wonderful feature of Web design. But how do we go about doing so? Where in the WWW (Whole Wiggety World) do we stick these rules? There are actually two ways of doing it: 1) You can stick all your rules into one CSS document and have your HTML documents refer to that file, or 2) you can define separate styles within each HTML document.

The Master-Page-Has-All-Rules Way (External Style Sheet)

  1. Create a new, blank document
  2. List your CSS rules
  3. Save and name appropriately with a .css extension

It really IS that simple. All you need to know now is how to list the styles correctly.

Above, we wrote out the rule for h2 elements, so let's create a blank file, copy that rule into it, save it as a .css file, and then we can create an HTML document and see what our h2 tags look like, can't we? Actually... NO, we can't! That's because we haven't called the style yet. The syntax you use is below (you finally get to mess with the <head> tag). I usually put this next piece of code right after the closing </title> tag and before the closing </head> tag.

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

There are four main parts to this syntax that you need to know about:

  • link - This HTML tag tells the browser that is linked to the current page
  • rel="stylesheet" - This code tells the browser that what is linked is a stylesheet
  • href="location/filename.css" - This location is where the browser will find the stylesheet
  • type="text/css" - Because the linked style sheet has an extension of .css, this code tells the browser that what its reading is text that contains CSS rules

Once the above bit of HTML code has been included in our Web pages, all h2 elements in those pages will look the way we defined them to look.

The One-Page-Has-Its-Own-Style Way (Internal Styles)

You can also define internal styles, that only apply to the single Web page that they are defined in. This is where we get in to the whole cascading idea. In our external style sheet, we already have a style for our h2 tags. But you can override that look and feel for a particular page by declaring a h2 style directly in the HTML document. The internal style overrides the external style sheet (the same goes for inline styles, which we'll discuss in a moment, over internal). Because internal and inline styles are conceptually "closer" to the actual tag than an external style, they override the style definitions that are "farther away." To define internal styles, simply use the HTML style element (I usually place this code inside the head tag):

<head>
 <title>Example</title>
 <style type="text/css">
  <!--
  h2 {font-size: 32pt; font-style: bold; font-family: courier,comic sans}
  -->
 </style>
</head>

Note that the two <h2>'s we've written are different; the h2 elements in our current page will look as we've defined them internally.

The Just-Do-It-This-One-Time Way (Inline Styles)

You can define a style directly within an HTML tag. When you do so, the rule overrides any other rules that try to affect the element: it's the "closest" rule to the element, and so it wins out over rules that are farther away. The style affects only that particular element. When you define an inline style, you use the HTML style attribute like so:

<html>
 <head>
  <title>Example</title>
 </head>

 <body>
  <p style="background-color: red;">The background of this text would be red</p>
  <p>But this text would go back to normal</p>
 </body>
</html>

Share this page Share