topic title

In-tag STYLE attributes are positioned like normal attributes but you do need to bear in mind the use of colons and semicolons to arrange the values, and with the <STYLE> tag and external style sheets the arrangement of values is rather different than you'll be used to. It's not hard to make the adjustment, but do bear it in mind.

Within style sheets, whether in the header or external, tag definitions start with the name of the tag you are defining a style for, and then have information about what you want that particular tag to look like. The tag name does not need angled brackets in this case. The tag name is then followed by the style definitions within curly brackets ({}), then the property you are defining, a colon, then the value. Multiple properties are separated by semicolons. All in all, the structure is this:

tag name { property : value;
           property : value;
           property : value; }

So, for example, this is a tag definition from the external style sheet of this web site:

h1  {  color: #006600;
       background-color: #ffffff;
       font-family: Garamond, Times New Roman, serif;
       font-size: 24pt;
       font-weight: bold;
       margin-left: 60px; }

And just so you can check:

This text is between <H1> and </H1> tags

As ever, be precise. Don't forget to close curly brackets, to include all colons and semi-colons, and so on. In fact, best to match the format given here exactly, even down to spaces: I've seen style sheets fail because there were spaces between the property and the colon!

All style sheet properties and values are detailed in the full list of values. For now, familiarise yourself with the basic format. You will get a much better idea of what a style sheet looks like if you look at a real one: start with the simple one that applies to the style sheet sample site, which you can access from that page. Or, check out the style sheet for this site. Don't worry if you don't understand all of it yet - keep going through these topics and things should become clearer.

It's worth pointing out at this stage, in case you haven't grasped it, that not every page on a site has to point to a style sheet. You can have different sheets for different sections of the site, or not bother with some pages altogether. It's up to you - it's a design issue that you need to resolve.

Back to the top

Lesson X menu Subject Index A-Z Index ACOM web site.