Notes 7
— print (last updated: Sep 25, 2009) — print

Cascading Style Sheets

Cascading Style Sheets (CSS) refers to the general way to introduce style properties such as fonts, colors, alignment, margins to the structure of an HTML document. We will see that style properties can be introduced in one of three different ways:

through inline properties introduced into individual elements using the style attribute.
through style rules defined within the style section delimited by the style tags.
through external files of style rules called an style sheets

The catch phrase is that CSS allows us to "separate style from structure," although the separation is not at all distinct because all HTML elements (except div and span which we'll see later) already predefine a great deal of style information. Style information represents every facet of the appearance of the document including color, spacing, font choices, etc.

In contrast, the separation of style from structure is much stronger in the XML language. An XML document has no style information whatsoever, only structural content information. Style is provided for an XML document by combining it with a secondary document written in yet another language called XSLT (eXtensible Stylesheet Language Transformation), itself a subset of XML.

Inline styles using the style attribute

The style attribute is said to be a core HTML attribute in that it can be used by every HTML element. Its purpose is to make specific style changes to that one occurrence. The introduction of style properties through the style attribute is referred to as inline styles. An example is this:

<h3 style="text-align: center; color: magenta;">
Special h3 header
</h3>

Which looks like this:

Special h3 header

The value of the style attribute has the format:

"property1: value1; property2: value2; ... "

The properties are individual words or compound word constructions with individual words separated by a hyphen (-). The values have many different formats and can often be composed of several separate words. When using property/value pairs, keep this syntax in mind:

the colon (:) separates a property from its value.
multiple property/value pairs are separated by a semicolon (;).

Keep in mind that HTML accepts both the style property and/or its value spelled incorrectly without explicitly generating any error. Additionally, mistyped colons or semicolons are effectively ignored. In contrast to HTML, we might say that CSS usage is "less forgiving" since HTML usually gives visual information when something is wrong.

Color properties: color and background-color

Perhaps two of the most basic style properties to work with have to do with the color effects of a document; these are

color, which affects the foreground or text color,
background-color, which, obviously, sets the color of the background.

Colors on an electronic display are combined according to an additive model using combinations of the 3 primary colors: red, green, blue. The strength of each of these primary colors is represented by a number ranging from 0 to 255. The combination (0,0,0) is black and (255,255,255) is white. In contrast, a different model is used (subtractive) when combining pigment colors for paints.

It is common to use hexadecimal (base 16) numbers when reprenting color strengths due to the fact that base 16 is an economical way of representing computer values which are stored in binary format. Hexidecimal color strengths are represented by two hexidecimal digits (0 – 9, A, B, C, D, E, F). The lowest value is 00 and the highest is FF (255 decimal).

In HTML, colors can be expressed in many different formats:

#RRGGBB: a hexidecimal rgb color value expressing the amounts of red (RR), green (GG) and blue (BB). Each R, G and B is a hexadecimal digit, (the letters A-F can be in upper or lower case).
Examples: #0f332b, #bedeaf, #001122.
#RGB: shortened three-digit hexadecimal numbers. This means that each of the three digits is repeated once to get the full 6-digit value.
Examples: #012 = #001122, #bad = #bbaadd
a named color, such as yellow, red, magenta, black, etc. This hyperlink provides a list of common named colors with their associated hexadecimal values.
rgb(x,y,z): use decimal values for the RGB values x, y and z between 0 and 255
rgb(x%,y%,z%): use percentage values for the RGB values x, y and z between 0 and 100

Web Colors

The actual appearance of colors on different systems (with different video cards and monitors) is often unpredictable. It is often recommended (especially for matching colors used in graphical images) to restrict the colors chosen to one of the so called web colors in which the RR, GG and BB digit pairs are one of these 6 values: 00, 33, 66, 99, CC, FF; thus a total of 6*6*6 = 216 web colors.

Examples: #cccccc = #ccc, #cc0033 = #c03

Examples

Now I want to say 
<i style="background-color:rgb(90%,90%,0%)">something really important</i>, 
so <b style="color:rgb(0,0,200)">listen</b>!

Now I want to say something really important, so listen!

<h1 style="color:blue">This is a blue header</h1>

This is a blue header

<h1 style="color:blue;background-color:#CCCCCC">Blue header
with a grey background color</h1>

Blue header with a grey background color

CSS style rules

So far, we've only used style properties introduced via the style attribute. The problem with this approach is the lack of generality. Suppose, for example, that in my document I want

every h2 element to be centered
every h3 element to be red

Up to this point, using inline style properties, the only alternative is to define the respective style attributes

style="text-align:center"
style="color:red"

for every h2 and h3 element, respectively.

A better approach is to create and somehow apply the following style rules

h2 { text-align:center; }
h3 { color:red; }

Style rules are quite general. The most basic format of a style rule is as follows:

selector { property1: value1; property2: value2; ... }

As we've indicated, the selector can be an HTML element, but it has other useful forms.

There are two ways to deliver style rules to an HTML document:

embedded in the style section of the head of a document
via external files using the link element or import command.

Embedded style rules

Embedded style rules are simpler to use, especially when you start learning how to use them. They are placed within the starting and ending tags of the style element, The style element's start and end tags are intended to be used within the document's section delimited by the starting and ending head tags, like this:

<html>
<head>
<title></title>
<style>
h2 { text-align:center; }
h3 { color:red; }
</style>
</head>
<body>

If we have the two style rules used in this way, they will apply to all h2 and h3 elements within the document.

Full style section syntax

The style section generated by HTML-Kit is more complicated than indicated above. It has this format:

<style type="text/css">
<!-- 
 
-->
</style>

The key lines are the style tags. The type attribute, taking the default value here, is unnecessary. Additionally, the internal comments:

<!-- 
 
-->

are probably unnecessary. The reason they are placed there is for compatibility with browsers which do not recognize the style tags; they would ignore the style tags and see the rules as commented out. In contrast if the browser is CSS-compatible, it will ignore the inner HTML comments. At this point, CSS, which was not part of the original HTML specification, is supported by all browsers.

Comments for style rules

HTML comments are those portions of text framed by . Style rule sections also permit comments, but of a different form; they are portions of text framed by /* and */.

Neither style of comments permits embedded comments within comments. For example if, in our rules section we may have this

h5 { text-align: center; }  /* this is my h5 rule */
h6 { color: red; }

But, if we mistakingly decide to comment out both of these rules as follows:

/*
h5 { text-align: center; }  /* this is my h5 rule */
h6 { color: red; }
*/

this would not have the desired effect, since the leading /* one the first line actually matches the */ at the end of the second line, leaving the h6 rule exposed and leaving a dangling */ on the fourth line, which would probably be ignored.

The class attribute selector

As a continuation, suppose that I want

every h3 element to be red
some, but not all, of the h3 elements to be centered with monospace font.

If I were to rewrite the style rule:

h3 { color: red; text-align: center; font-family: monospace; }

then, of course, all h3 elements would have all of these properties. Alternatively, I could use the h3 rule with color property only and add this style attribute setting to every special h3 element:

style="text-align:center;font-family:monospace"

However, this is somewhat cumbersome and inflexible. What if, say, I later decide to change the font-family from "monospace" to "sans-serif". I would have to make this replacement in all the occurrences.

A more general way to approach this problem of selective application of a rule is to create a class for which a certain rule or rules apply. The selector that we've used so far has been simply an HTML element, however, we the selector can also be of one of these formats:

element.class_name { ... }
.class_name { ... }

where class_name is any name whatsoever.

The .class_name applies to HTML elements which define the class attribute. The class attribute is, like the style attribute, a core attribute in that it can be used by any HTML element.

If an HTML element defines the attribute class="class_name" as follows:

<element class="class_name" ... >

then these style rules apply to it:

element.class_name
.class_name

In the example that I'm considering, if I create the following rules:

h3 { color:red; }
h3.special { text-align: right; font-family: monospace; }

then all three properties apply to any h3 element defined like this:

<h3 class="special">Some header</h3>

Note that there is nothing special about the class name special, it can be any word whatsoever.

A general class rule is one we intend to apply to multiple types of elements, not just multiple occurrences of the same element. For example, the rule

.standout { color: magenta; font-size: 150%; font-family: sans-serif; }

applies to any element defining the attribute class="standout", such as both of these occurrences:

<span class="standout">example 1</span>
<p class="standout">example 2</p>

The id attribute selector

A related idea, which is useful in certain circumstances is to apply rules according to an element's id attribute. For example:

<h3 id="one_of_a_kind">Only one such h3 header</h3>

In this case we use a similar type of rule construction with different syntax, replacing the "." by "#":

#one_of_a_kind {
  color: maroon;
  text-align: right;
}

As suggested by the example, id attribute values must be unique within the document which contrasts with the fact that multiple elements can have the same class attribute value.

In order to avoid confusion, we will focus on using the class attribute only for applying style properties. In the later sections on JavaScript we will see that the id attribute plays an important role in specifying an element.

Applying multiple rules

The class attribute can reference multiple rules. For example if we have the rules:

.yellowbg { background-color: yellow; }
.redfg    { color: red; }

then an element can use both of these rules by simply listing them within the class attribute, separated by spaces. For example,

here is <span class="yellowbg redfg">an application of both rules</span>

which looks like this:

here is an application of both rules

If there are conflicting property settings in the rules and the rules are of the same type (e.g., both class-only rules) then "winner" is taken from the rule listed last.

Selectors using same rule

We can have two selectors use the same rule. For example, suppose we had these two rules:

h3 { color: red; text-align: center; }
h4.special { color: red; text-align: center; }

The selectors have identical settings. An equivalent way of specifying the same behavior is this:

h3, h4.special { color: red; text-align: center; }

where the two selectors are linked by a comma. Be careful in the syntax: if the comma is omitted, it is a legitimate rule with an entirely different effect (see the next section).

HTML Box: div, span elements and display property

HTML elements which use both a start and end tag create a box of sorts around the surrounding text. The basic rendering of this box is controlled by the display property and each HTML element has a default display. The display property has one of these values:

block: the box is moved outside the flow of the surrounding text into a separate horizontal block. This is the default behavior of elements: p, table, h1, h2, etc.
inline: the text between the tags remains within the flow of the surrounding text. This is the default behavior of the elements: b, i, tt, etc.
list-item: similar to block display, but a list marker is also displayed (under control of surrounding ol or ul element).
none: this is used to make an element disappear, primarily in conjunction with JavaScript code to create dynamic behavior of an HTML page.

It's important to note that image elements, img, are also inline, although you should almost never combine them directly with text.

Elements div and span

For the most part we distinguish the behavior of elements as to whether they are inline elements (b, i, etc.) vs. block elements (p, h1, table, etc.). Towards this end HTML provides the div and span as featureless elements with only the display style set as follows:

the div element uses block display,
the span element uses inline display.

When one uses these two elements, it is almost always in conjunction with style properties.

Distinction among block elements

The div element is distinguished from the paragraph and header elements in that div is intended to hold other block elements, whereas paragraph and header elements are intended only to hold inline content (text and images).

Thus, something simple like the following is incorrect (a block element inside a paragraph):

<p>
<div>
foo 
</div>
</p>

where as this rewrite is correct (a block element inside a div):

<div>
<p>
foo 
</p> 
</div>

Nevertheless, as is common, HTML rendering will act as if the former is OK. A very good HTML-knowledgeable editor (not HTML-Kit) should at least flag the former as being invalid.

Other block and list-item elements such as td, li, are permitted to contain block elements.

Examples

An <h2 style="display:inline">inline h2-header</h2> in a sentence.

inline h2-header

in a sentence.

A <b style="display:block">bolded block</b> in a sentence.

A bolded block in a sentence.

A <div style="background-color:aqua">div box</div> in a sentence.

div box

in a sentence.

A <span style="background-color:aqua">span box</span> in a sentence.

A span box in a sentence.

Box size & spacing

These properties have functions similar to the table attributes of cellpadding, cellspacing and width. They apply to block-display elements only.

Distance to adjacent boxes: margin, margin-left, margin-right, margin-top, margin-bottom
Distance to sides of box: padding, padding-left, padding-right, padding-top, padding-bottom
Box dimensions: width, height

The margin and padding properties can be used in different ways. If they have one value, e.g.,

margin: 10px; padding 20px;

it specifies equal measurements for all 4 sides. If given 4 values it specifies the values for the sides top, right, bottom, left, given in that (clockwise) order, e.g.:

margin: 5px 0px 10px 15px;

would be equivalent to:

margin-top:5px; margin-right:0px; margin-bottom:10px; margin-left:15px;

Examples

Assume we have defined the style rule:

.bg_yellow  { background-color: yellow; }
.pad        { padding: 2em }

applied to these:

Outside the box.
<div class="bg_yellow pad" style="margin:1em; margin-left:6em;">
Inside the box.
</div>
Outside the box.

Outside the box.

Inside the box.

Outside the box.

<div class="bg_yellow pad" style="width: 200px; height: 150px;">
Special Paragraph
</div>

Special Paragraph

Adjacency property of margins

The examples below use the style rules:

.bg_yellow  { background-color: yellow; }
.bg_lblue   { background-color: lightblue; }
.bg_cblue   { background-color: cadetblue; }
.bg_green   { background-color: green; }

This code snippet illustrates the effects of built-in margins in various block elements:

<p   class="bg_yellow">P element</p>
<div class="bg_lblue">Div element</div>
<div class="bg_cblue">Div element</div>
<h1  class="bg_green">H1 element</h1>
<p   class="bg_yellow">P element</p>

This is the appearance:

P element

Div element

H1 element

P element

Paragraphs and headers have built-in top and bottom margins of roughly the same size. Furthermore, the adjacency appearance of the last two elements suggests that the top margin of one and the bottom margin of the other don't accumulate. Indeed, the resulting separation is the maximum of the bottom of the upper element and the top of the lower element. Thus considering the code snippet:

<div class="bg_lblue" style="margin-bottom:20px">Div: bottom=20</div>
<div class="bg_cblue" style="margin-top:20px">Div: top=20</div>
<hr />
<div class="bg_lblue">Div: bottom=0</div>
<div class="bg_cblue" style="margin-top:20px">Div: top=20</div>

which looks like this:

Div: bottom=20

Div: top=20

Div: bottom=0

Div: top=20

illustrates that the bottom and top div pairs both have the same separation.

To eliminate the separation between, say, an H1 and P element below it, we must set to zero both the bottom margin of former and the top of the latter like this:

<h1 class="bg_green" style="margin-bottom: 0px">H1: bottom=0</h1>
<p  class="bg_yellow" style="margin-top:   0px">P: top=0</p>

getting:

H1: bottom=0

P: top=0

Text style properties

These are the alignment style properties for text and other inline content:

text-align: left, center, right, justify; this property applies to all inline content within a block element, including text and images.
vertical-align: sub, super, top, text-top, middle, bottom, text-bottom

These are other text-related properties, some more obscure than others:

text-decoration: none, underline, overline, line-through, blink (as of writing, blink appears to works in Firefox, but not IE)
line-height: a length; specifies the separation between lines
text-indent: a length or percentage; applies to the first line of text in a sequence of text lines.
text-transform: none, capitalize, uppercase, lowercase

Of this last group, probably the most frequently used is the text-decoration property with values underline or none in these circumstances:

text-decoration: underline replaces the <u>...</u> tag
text-decoration: none is used to turn off the default underlining in hyperlinks.

Examples

<div style="text-indent:1in; line-height:4ex; background-color:yellow">
Hello<br />
There<br />
World
</div>

Hello
There
World

Hello <span style="vertical-align:super">There</span> World

Hello There World

<span style="text-decoration:underline">Underline</span>,
<span style="text-decoration:overline">Overline</span>,
<span style="text-decoration:line-through">Line Through</span>,

Underline, Overline, Line Through,

<span style="text-transform: uppercase">test one two three</span>
and
<span style="text-transform: capitalize">test one two three</span>

test one two three and test one two three

Notes 7 — print (last updated: Sep 25, 2009) — print

Cascading Style Sheets

Inline styles using the style attribute

Special h3 header

Color properties: color and background-color

Web Colors

Examples

This is a blue header

Blue header with a grey background color

CSS style rules

Embedded style rules

Full style section syntax

Comments for style rules

The class attribute selector

The id attribute selector

Applying multiple rules

Selectors using same rule

HTML Box: div, span elements and display property

Elements div and span

Distinction among block elements

Examples

inline h2-header

Box size & spacing

Examples

Adjacency property of margins

H1 element

H1: bottom=0

Text style properties

Examples

Notes 7
— print (last updated: Sep 25, 2009) — print