CSS Tutorial : CSS Basics
The previous page explained how style sheets are referenced by the browser. This page expands on that and shows several working examples of style sheets.
Starting off with applying a color to a simple header tag, H1. Here is the complete code for the HTML file with a simple blue header.
<style type="text/css">
<!--
h1 { color: blue }
-->
</style>
</head><body>
<h1> A blue header </h1>
</body></html>
The color tag used affects the Foreground color (text). If you wanted to have this style to be specified in a stand alone file, you would just save the code from the start STYLE tags to the close STYLE tag, inclusively. You would then reference the sheet using the LINK tag mentioned on the previous page.
If you want your header aligned in the center of the document, you can add the 'text-align' property as follows:
text-align: center; }
To save some space you can specify the attributes on the same line after the semi-colon.
You do not need to define each and every tag specifically, but you can instead define classes and reference the class. Classes are defined by a name and a period in front of it. Here's an example:
<!--
.myIndent { margin-left: 1.0in }
-->
</style>
The HTML tags to reference the above .myIndent class is:
<div class=myIndent>Also this whole paragraph would
be indented one inch</div>
<p>but this wouldn't be indented</p>
IDs
IDs are similar to classes except they work on a per element basis. ID use is actually discouraged by the W3C. The idea behind the ID is to define a certain style for a single specific element. They can not be used by multiple tags on the same page as the above example did.
Two new tags have also been introduced to implement CSS. The tags alone do not have any predefined attributes, and are there for style to applied to them.
- The SPAN tag is an inline element, which means it works with
text or items that are on the same line, similar to the B, bold tag.
Here's an example using SPAN:
This is <span style="font-weight: bold">bold text</span>
- The DIV tag is a block element, which means it works with blocks of text or items, similar to the P, paragraph tag. As seen in the "myIndent" class example above.
Ok, I think we have the basics out of the way. Let's move on and see what we can squeeze out of these style sheets.