Cascading Style Sheets (2) oh joy!

CSS rules are defined for HTML selectors; for classes, which are references in tags that make the tags part of a group that can be collectively modified; and for IDs, which are like tags but are supposed to reference a single tag. …

To recap where we left off our exploration of Cascading Style Sheets last week: CSS styles are defined externally from the file they are applied to, internally as a block of style definitions, or in-line as part of individual content elements.

And CSS rules are defined for HTML selectors; for classes, which are references in tags that make the tags part of a group that can be collectively modified; and for IDs, which are like tags but are supposed to reference a single tag. All types of style definitions and rules can be used individually or simultaneously.

This is the general form of a CSS rule in an HTML tag ( “[ ]” indicates optional additional property definitions):

 content

Properties are attributes of an element such as height and color. Values are the amount, size or a keyword that the property is to be set to.

Note that should you specify a property that doesn’t apply to a particular selector (for example, text indent in a bold selector) it will be ignored (browser bugs notwithstanding).

Here is an example of a CSS rule in an HTML element, a

…

tag (note that indents and whitespace are ignored – they just make it easy for humans to read):

Groovy.

The general form of CSS rules for elements, classes and IDs that aren’t in-line is a little different:

selector { property:value;[ property:value;[ … ]] }

For example:

 p { color:blue; font-size:12px; }

 .specialpara { color:blue; font-size:12px; }

 #mypara { color:blue; font-size:12px; }

These all do the same as our

tag example above, except the first rule would change all

tags in the content it is applied to (this essentially redefines the tag), while the next two rules would apply to all tags assigned to the specialpara class or the element identified by the id mypara.

So how do we apply styles? Here’s an external CSS specification in a file we’ll call extstyle1.css:

body {

  background-color: gray;

  background-image: url(photo1.gif);

  background-repeat: no-repeat;

  font-family: arial, Helvetica, sans-serif;

}

 p { color:blue; font-size:12px;}

The CSS specification must be referenced in the content that it is to be applied to. Alternatively, you can specify a CSS style sheet in the HTML header. Here is an example that uses both specification types:

 

  

  

     h1 { font:bold; color: red; font-size: 16px; }

     h2 { font:bold; color: white; font-size: 14px; }

  

 

Another way of specifying an external CSS file is to use the import directive so, instead of the link directive, we could have used:

 @import url(“extstyle1.css);

This has the same effect as the link command, but note that Netscape browsers prior to Version 6 will not understand the directive. You should be able to figure out what the results of the above CSS specifications would be.

To give you an idea of how detailed CSS styling can be, let’s look at the background rule: Changing no-repeat to repeat will tile the background, and repeat-x and repeat-y only tile the image horizontally or vertically, respectively.

Add “background-attachment: fixed” to the specification and when the browser window scrolls the background will not move, while “background-attachment: scroll” (the default) will do the opposite.

Finally, we can position the background image to the pixel using “background-position: X Y.” The values for X and Y can be positive or negative offsets from the left and top browser window boundaries, respectively, as either pixel counts (such as 10px or -10px); percentages relative to the parent element’s size (such as 10%); or keywords for horizontal (left, center, right) or vertical (top, center, bottom) positioning.

That was easy. But next week . . .  Complaints to gearhead@gibbs.com