Stylizing Web Pages

Cascading Style Sheets (CSS) are a comprehensive approach to adding stylistic enhancements to web pages.

CSS lets you redefine the default stylistic behavior of HTML’s structural elements in a way that you can easily use in multiple web pages.

Zen Garden: The Beauty of CSS Design provides multiple examples of how styles might change while the basic structure of a document persists.

Style Declarations

CSS styles are specified with a simple, regular pattern that is distinct from that used by HTML elements.

The most basic part of a style description is the declaration, which consists of a property: value list sequence:

For example, to create a solid border around an element, one would use the following declaration:

Some properties accept multiple values, and they are separated by spaces:

A set of declarations can be listed together by separating them with semicolons:

To make editing easier, it’s a good habit to always include a semicolon on the last property, though it is not required:

The Style Attribute

Given a set of style declarations, the most direct way to apply them to HTML elements is the style="declarationset" attribute of a particular HTML element, for example:

You should use the style= attribute judiciously, however, as it buries the style declarations deep in a document where they can be difficult to notice and compare or apply to other elements.

We will shortly see several approaches that are generally better.

2.0. Exercises

1. In Dreamweaver’s Code View, add a style= attribute to one of the elements in your class.html, using some of the properties given above and any obvious variants.
2. Switch to your browser and open/reload the file to see the effect of the style= attribute.

Style Rules

Style declarations can be given a general scope through a sophisticated set of style rules that describe how to apply them to HTML tags.

Style Sheets

Style rules are commonly contained within the HTML element <style>....</style> and placed in the document header:

Such a collection of rules is called a style sheet.

The type= attribute is required to let the browser know that the style sheet contains text, and the particular type of style is CSS (yes, there are others!).

External Style Sheets

Quite often a web site will consist of multiple pages, and to ensure a consistent style across them it’s a good idea to use an external style sheet that can be referenced by all of them.

Such a style sheet is simply a file full of style rules, without any HTML such as the <style> tag.

Usually it has an extension of .css, and will reside near the root of a web site for easy access by all files.

To reference an external style sheet in a document, use the stand-alone <link> element in the document’s header:

The relationship attribute rel= specifies the purpose of the link, while the type= attribute is the same as for the <style> element.

The href= attribute is a URL just as for the anchor element, but here it loads in the style sheet from a local or remote location, rather than leading away to another web page.

Style Comments

You can include comments in your style sheets by enclosing them between /* and */:

Comments can extend across multiple lines, and are a quick way to turn off a particular style rule or rules.

2.1. Exercises

1. In Dreamweaver’s Code View, add a <style> element to the header of your class.html, and include the paragraph rule above.
2. Switch to your browser and open/reload the file to see the effect of the style sheet on all paragraphs.
3. Now save the style sheet rule in an external style sheet class.css, and replace the <style> element with a <link> element referencing the file.
4. Again switch to your browser and verify that the new style sheet is still acting within the document class.html.

The Identifier Selector

The first type of selector we will consider is the identifier selector, which applies a particular style rule to an element with a unique identifier attribute id=.

By beginning a rule with a hash (#) and the identifier name, the declaration will apply only to the element with that identifier:

Note that the syntax for an identifier selector is the same as that used to search for a particular identifier within a document.

Recall that identifiers must begin with an ASCII letter [A-Za-z] but after that they may also include digits [0-9], hyphens [-], underscores [_], colons [:], and periods [.].; they are case-sensitive.

Question: Why is using an element’s id= attribute usually preferred to using a style= attribute?

The Class Selector

Somewhat more general than the identifier selector is the class selector, which applies a particular style rule to all elements that choose to reference it with the class= attribute.

The rule is defined by beginning the class name with a . rather than a #:

Note that a class can be referenced by different types of HTML elements, which retain any of their default styling that doesn’t conflict with the class; this is an example of a style cascade, which will be discussed shortly.

Question: Which two HTML elements would you use if you didn’t want to work around predefined styles?

For maximum compatibility, it’s adviseable to begin class names with an ASCII letter [A-Za-z], but after that they may also include digits [0-9], hyphens [-], underscores [_], colons [:], and periods [.].

Be careful: class names are case-sensitive!

Question: Why is it a good idea to give names to classes that indicate their purpose, rather than their style, e.g. comment rather than redbox?

The Element Selector

Even more general than the id or class selectors is the element selector, which applies to any given type of HTML element, no matter how many times it appears in the document.

An element selector simply consists of the element name, without enclosing brackets <> or other punctuation:

The Universal Selector

As its name implies, the universal selector is the most general way to apply styles; it affects every HTML element in the document.

A universal selector is simply designated by an asterisk (*):

Be careful how you use the universal selector; it can easily have unintended side effects!

Group Selectors

Multiple selectors of any type can be grouped so that they all apply the same declaration set.

This can be convenient for establishing consistency between, for example, all header elements.

The syntax is to list them together, separated by commas:

Property Inheritance

Much of the convenience of CSS is due to the fact that properties are often inherited by descendant elements.

So, for example, if you set some text properties for paragraphs, and a paragraph contains a phrase or anchor or other element, then those properties will be inherited and the text will be consistently displayed inside those descendants (assuming they apply minimal changes themselves):

Inheritance will depend on the property in question; for example, padding, border, and margin properties are not inherited automatically.

The keyword inherit can be used with any property, and specifies that an element’s property value will be the same as for its parent element:

2.2. Exercises

1. In Dreamweaver’s Code View, edit your class.css, and add examples of identifier, class, and element rules.
2. Now open the document class.html and add identifier and class attributes to existing elements in this document.
3. Switch to your browser and open/reload the file to see the effect of these styles; are any of the properties inherited?
4. Returning to Dreamweaver’s Code View, edit your class.css, and look for any independent selectors that can be grouped together; if there are none, add a selector to some rule, and an HTML element to match.
5. Switch to your browser and open/reload the file to see the effect of these styles.

Precedence Overview

You may have realized by now that with a large number of CSS rules floating around, and with multiple ways to apply them, it’s very likely that some of these rules will overlap, intentionally or accidently (particularly when external style sheets are referenced).

If the rule declarations are complementary (e.g. one applies to fonts while the other applies to borders), then CSS simply merges them.

But if there are conflicts, e.g. about which font to use, CSS has well-defined procedures to resolve the issue.

CSS assigns precedence to style rules based on:

1. origin — who created the styles;
2. specificity — how closely tied the style rules are to the elements they affect;
3. sequence — the order in which the style rules appear in a style sheet.

These are listed from most to least important.

This process of ”cascading styles” is what gives CSS its name.

What follows is a general guide; the actual cascade procedure is fairly complex though it usually ”makes sense”.

Origin Precedence

As you are probably aware, browsers make many style choices themselves, e.g. what fonts to use for text, how large a paragraph’s margins should be, etc.

Some of these default styles can usually be modified through the browsers’ preferences.

You may not be aware, however, that most browsers also let readers incorporate their own style sheets, which apply to all web pages they read (e.g. to always increase the font size).

And then there are the styles an author defines for a web page, as we’ve been discussing here.

For these three origins of styles, the precedence order, from highest to lowest, is:

1. author styles;
2. reader styles;
3. browser preferences;
4. browser defaults.

Specificity Precedence

When style rules have the same origin, CSS tries to distinguish them based on their specificity.

We’ve previously seen several ways that styles can be applied to HTML elements.

In terms of how specific they are to the element they modify, style rules can be organized from most specific to least specific:

1. style element attribute
2. #identifier selector
3. .class selector
4. element selector
5. universal (*) selector
6. inherited properties

This is also the order of precedence, from highest to lowest, as we can see in the following example:

Sequence Precedence

When style rules have the same origin and specificity, CSS distinguishes them based on their sequence in a style sheet.

In particular, precedence is always given to the later rule in a style sheet:

By definition, an external style sheet is always considered to be earlier in sequence than a document’s internal style sheet.

Question: What do you think would happen if a single declaration set repeated a style declaration, for example:

2.3. Exercises

1. In Dreamweaver’s Code View, review your class.css; are any of the style rules conflicting?
2. If none of your rules conflict, add some that are.
3. Switch to your browser and open/reload your class.html. Do the styles displayed make sense?

Keyword Property Values

In the previous examples, we have seen many style properties that have values which are keywords, e.g.

The allowed keywords are specific to the property; sometimes the same keyword is used for more than one property, but be careful because it could have a very different meaning!

Numeric Property Values

Many properties take numeric values, e.g.:

Numeric values can be:

• decimal integers, e.g. 32;
• decimal real numbers, e.g. 32.0;
• or hexadecimal integers, e.g. #20 (note the use of # to introduce the hex, rather than the x used by HTML).

Numeric values can be negative, but many properties place limits on the range of allowed values.

Numeric values always have a unit associated with them, which describes the scale of the numbers.

Sometimes that unit is spelled out, as in the border and font-size properties above, and other times it is implied, as in the line-height and color values.

Percentage Values

Often (but not always), numeric property values can be expressed as percentages:

Generally speaking, percentages are simply fractions (% = 1/100), but in CSS they are always fractions of something, for example:

• the containing element’s width (which is often the window width);
• an inherited value (e.g. for font-size: above);
• the value of another property for that element (e.g. for line-height: above, which is based on font-size:);

Colors

As we have seen, CSS can color the text, borders, and backgrounds of elements.

Colors are commonly specified by a keyword representing a common color, e.g. red, olive, or navy (more are listed as comments below).

Better control is provided by a color model in which most colors your eye can see are specified by a triplet of three values describing the amount of red (R), green (G), and blue (B) they contain.

The three RGB values each use a decimal unit for which 0 represents no color and 255 is fully saturated color:

Combinations of these three RGB values produce the other colors you are familiar with, for example:

Hexadecimal Color Specifications

The reason the color scale is based on 255 is primarily historical, as it corresponds to one byte (8 bits) of data, and can easily be represented as a hexadecimal number, since 255 = #FF.

CSS values can also be specified as a single number that varies between 0 and 255*255*255 = 16581375.

This value must be in hexadecimal, however, which ranges from 0 to #FFFFFF, with each pair of hexadecimal digits representing red, green, and blue in sequence.

The format is therefore fairly easy to interpret:

There is also a simpler color scale that can be used for many common values, which varies between 0 and 15*15*15 = 3375.

In hexadecimal this range is 0 to #FFF, so here each hexadecimal digit represents red, green, and blue in sequence.

The three-hexadecimal-digit format can be easily converted to the six-hex format by duplicating each digit:

Question: Which of the other colors above can be expressed in a three-hex format?

Linear Units

Most HTML elements take up some space on your computer screen, so they have at least one and usually two linear dimensions, their width (left to right) and height (top to bottom).

Examples include paragraphs, images, and horizontal rules, as well as borders, font characters, line heights, at al.

CSS can specify linear dimensions with a number of different linear units, each with a two-letter abbreviation that is appended to the numerical value, for example:

The Pixel Unit

Graphical user interfaces have long used the dot size of computer displays, the “picture element” or pixel, as a natural unit of linear measurement.

As technology has advanced, the pixel on a typical display has decreased in size, from 1/72 inch on the original Macintosh to now 1/100 inch or less.

So a pixel is a relative unit, varying from display to display.

Nevertheless, it is commonly used in HTML and CSS, abbreviated px:

Because printers have a much higher dot density than computer displays, typically 1/600 or 1/1200 inch, any lengths measured in pixels would be very tiny compared to on-screen.

CSS therefore recommends that a pixel be redefined as 1/96 of an inch if it would otherwise be significantly different from this.

Absolute Linear Units

CSS also defines a number of absolute linear units:

• in — inch
• cm — centimeter, 1in = 2.54cm
• mm — millimeter, 1cm = 10mm
• pc — pica, 1in = 6pc
• pt — point, 1in = 72pt, 1pc = 12pt

Absolute linear units are intended to be the same as in the “real world”.

However, on computer displays they usually aren’t the same, because browsers generally don’t have accurate information about the display depth (i.e. the size of the pixel).

So, for example, the first horizontal rule below should be 1 inch long, but it could be longer or shorter than the second, 96-pixel rule, depending on your display, operating system, browser, and browser preferences:

Some browsers make an arbitrary choice, e.g. 1/96 inches per pixel, while others let you set it from a limited range (e.g. 1/72 or 1/96 inches per pixel), and others let you choose a standard length with a slider.

Based on this choice, CSS converts absolute lengths to pixels behind the scenes.

Therefore, it’s adviseable for you to eschew absolute linear units, unless you don’t care about displaying the lengths perfectly accurately (and occasionally wildly wrong).

When printed, absolute lengths will be accurate because printer characteristics are very well defined; so if your main goal is printed output, specifying absolute lengths may also be appropriate.

The Em Unit

It is often very useful to define units based on font characteristics, to provide consistent lengths relative to the text font in use.

All displayed text has a property font-size: (see below), which is approximately equal to the height of a capital letter or the width of the letter ‘m’.

The value of font-size: is therefore called the em, which needs no abbreviation:

2.4. Exercises

1. In Dreamweaver’s Code View, edit your class.css, and add some colors to various elements, using keywords, decimal triplets, 6-hex values, and 3-hex values.
2. Switch to your browser, open/reload your class.html, and verify the result.
3. Returning to Dreamweaver’s Code View, edit your class.css, and add some font-size: and width: statements to various elements, using px, em, and various absolute units such as in and pc.
4. Switch to your browser, open/reload your class.html, and verify the result; can you gauge the default font size for your browser?

Fonts

You are probably familiar with a large number of font families, such as Times, Helvetica, and Courier.

You have likely also experimented with the font variations within these families, such as size, weight, and style, and also text color.

CSS provides a great deal of control over these possibilities, but they will always depend on one factor beyond your control: which fonts are available on the viewer's computer.

In general these properties are inherited, so they automatically apply to the text inside of contained elements, such as phrases and links:

The Font Family Property

The same group of text characters can be written in slightly different ways that are nevertheless quite distinct from each other, which are known as font families:

Serif fonts have small embellishments called serifs that make them easier to read on high-resolution technologies such as ink-on-paper; they don't work well at small font sizes on low-resolution devices such as computer screens.

Sans-serif fonts lack serifs, and in printed material are primarily used for headings; on web pages they are also commonly used for body text.

Serif and sans-serif fonts have proportional spacing, meaning their characters have different horizontal widths (compare ‘i’ to ‘w’).

Monospace fonts have the same amount of horizontal space assigned to every character, and are often used to represent typewritten text.

Cursive fonts are intended to simulate handwriting.

Fantasy fonts are other fonts that can't be easily categorized, often suggestive of non-Latin scripts.

(You may also be familiar with "dingbat fonts", which are really distinct characters; you can specify them using character references.)

To specify a font family, use the font-family: property:

Note that in this example several font families are listed, separated by commas; a web browser will use the first one it can find on the viewer's computer.

Because you can never be certain which font families a browser will find, it's always a good idea to include a generic font family at the end of the list; if it reaches that point, the browser will use its default.

Every browser has some default selection of generic font families, but you can usually specify them yourself in your browser's preferences.

Be aware that font family names with spaces or other special characters in them must be enclosed in single quotes, as for 'Times New Roman' above.

The Font Size Property

As mentioned previously, the size of displayed text, and the relative unit called the em, is given by the font-size: property, which is approximately equal to the height of a capital letter or the width of the letter ‘m’ in the current font family.

Values assigned to font-size: can be any positive length, for example:

You can also use the em to set the value of font-size:, in which case it is redefined to a new length based on its inherited value:

Note that for the font-size: property, 100% = 1 em.

Every browser has some default value for font-size: (at this writing commonly 16px), but you can usually change that in your browser's preferences.

Quandary: if you assign a font-size: in pixels, users of the Windows version of Internet Explorer can't change the size on the fly with their browser’s menu item View > Text Size; the alternative is to make all font measurements relative to the default font-size: (with the em or %), but that can be noticeably different between browsers!

The Font Weight Property

The property font-weight: has two absolute values available, the keywords normal (the default) and bold:

There are additional values defined for font-weight:, but their support is font-dependent and inconsistent across browsers, so they won't be discussed here.

The Font Style Property

While "font style" has a more general meaning, in CSS the property font-style: lets you select between the values of normal (upright), italic, or oblique (slanted) text:

An italic font is generally designed to be more than simply slanted text, but at this time most browsers seem to treat it as interchangeable with oblique.

The Font Variant Property

Currently CSS defines two possible values for the property font-variant:, the keywords normal (the default) and small-caps:

The Font Property

Quite often you will need to use more than one of the above properties, font-family:, font-size:, font-weight:, font-style:, or font-variant:, in a single style, and it can quickly become tedious writing them out.

Fortunately, the values of these properties have been designed so that they do not overlap, so you can use them with the single short-hand property font::

The only restriction here is that font-size: and font-family: must be present at the end of the style declaration, and in that order.

Also be aware that if you leave out values for one or more of the other three properties, they will be set to their default values of normal.

The Color Property

The color of text is given by the color: property, using one of the color values described previously:

Note: the color: property also applies, by default, to element borders, which will be discussed later.

The Text Decoration Property

In addition to the common underline, CSS provides an expanded set of text embellishments using the property text-decoration:

The default value of text-decoration: is none.

Note that the value of the color: property applies both to text and these decorations.

The text-decoration: property is not automatically inherited, however the embellishments will extend across any child elements, which has a similar effect, as in the blue phrase below:

However, if you want the embellishment to match the color of the child element's text, you will also need to apply text-decoration: to the child, as in the red phrase above.

2.5. Exercises

1. In Dreamweaver’s Code View, edit your class.css, and try out some different font families, font sizes, font weights, font styles, and font variants.
2. Switch to your browser, open/reload your class.html, and verify the result.
3. Returning to Dreamweaver’s Code View, edit your class.css, and put these different properties together in a single font: property.
4. Switch to your browser, open/reload your class.html, and verify the result; do you see any difference?
5. Returning to Dreamweaver’s Code View, edit your class.css, and try out the color: and text-decoration: properties.
6. Switch to your browser, open/reload your class.html, and verify the result.

The Content Area

Every HTML element with visible content, such as text-filled paragraphs, images, and horizontal rules, places that content into a rectangular region called its content area.

The content area, shown in black below, will generally be at least large enough to hold the element’s content:

The horizontal and vertical dimensions of the content area are given by two properties with linear values, width: and height::

Percentage values are calculated from the width of the containing block (the rose area in this last example).

The properties width: and height: must never be negative, and are not automatically inherited.

Automatic Widths and Heights

If the width: and height: of the content area aren’t specified, the default value for both is auto, which means they are calculated automatically, based on the nature of the element and its environment.

The width and height of in-line nonreplaced elements, e.g. <span> and <em>, cannot be changed from their automatic values (to be discussed later).

The width and height of in-line replaced elements such as images have auto values equal to their actual size in pixels.

Horizontal rules have auto heights that are typically one or two pixels, and auto widths of 100% (i.e. they extend all the way across the browser window or their parent element, if smaller).

Many block container elements, such as <div> and <p>, will calculate the minimum necessary height based on the text, images, and other elements they contain, but they will have an auto width of 100% (even if their contents don’t actually fill that space):

Tables, on the other hand, will calculate both the minimum necessary height and width for their content:

Backgrounds

The color of the content area, behind the content itself, is given by the background-color: property:

The background can also be filled by an image, for example a pattern like , by specifying its location with a URL:

Warning: if you specify the location of an image with a relative URL such as the above, it is relative to the style’s location, which could be the html document or an external style sheet.

Because the name space for the values of these properties is designed to not overlap, you can also use the short-hand property background: to specify either or both of them:

Providing a back-up color specification like this is a good idea in case there is a problem loading the image (the image will always be laid on top of the color, independent of their order).

The default value of background-color: is transparent and background-image: is none.

Neither of these properties is inherited.

Question: If background: isn't inherited, why do we see it in the <dfn> element in the following?

Element Padding

It’s often useful to offset content from its surroundings, and in CSS there are two ways to do this, padding and margins (the latter to be discussed later).

The simplest way to offset content is with blank space that immediately surrounds called padding.

CSS allows any element to have padding, which is filled with the element’s background: color (black in the following, outside of the white dotted line bounding the content area):

Padding Sizes

The width of padding can be controlled by four properties:

For example:

With content and padding, the space used by the element box is:

• element width: the sum of

  padding-left:

  width:

  padding-right:

• element height: the sum of

  padding-top:

  height:

  padding-bottom:

Percentage values are calculated from the width of the containing block.

The four padding values by default are zero, must never be negative, and are not automatically inherited.

The Padding Property

So, the previous example could been written more simply as:

Another example shows how some margins are set automatically:

2.6. Exercises

1. In Dreamweaver’s Code View, edit your class.css, and a background color to one block and one in-line element, and a background image to one other block element.
2. Switch to your browser, open/reload your class.html, and verify the result.
3. Returning to Dreamweaver’s Code View, edit your class.css, and add some padding to different elements, both block and in-line; try out both the padding-side: properties as well as the padding: property.
4. Switch to your browser, open/reload your class.html, and verify the result.

Element Borders

CSS lets almost any element have a border, a usually narrow visible boundary that lies just outside the padding or, if there is no padding, just outside the content area.

In the following two representations, the content area and padding (in the second case) are black, and the border is solid white:

The element box is, again, indicated by the dashed border.

The presence of borders is determined by the property border-style:, which by default is set to none.

The other possible values of border-style: are:

Like padding, borders are not automatically inherited.

Individual Border Styles

Border styles can be set individually for each side of the content area by using the four specific properties:

For example:

Border styles can also be set collectively with border-style: top right bottom left and up to four values, in the same manner as for padding::

Border Colors

By default a border’s color is the same as for the element’s text, which is set by the property color (see below).

Border colors can be set individually for each side of the content area by using the four specific properties:

For example:

The border colors can also be set collectively with border-color: top right bottom left and up to four values, in the same manner as for padding: and border-style::

Note that the content area’s background: color extends under the border, so that those with space in them (double, dotted, dashed) reveal that color.

Border Widths

Border widths can also be set collectively with the short-hand property border-width: top right bottom left in the same way as for padding:, border-style:, and border-color::

With content, padding, and borders, the dimensions of the element box are given by:

• element width: the sum of

  border-left-width:

  padding-left:

  width:

  padding-right:

  border-right-width:

• element height: the sum of

  border-top-width:

  padding-top:

  height:

  padding-bottom:

  border-bottom-width:

Percentage values are calculated from the width of the containing block; negative values are not permitted.

Note that if a border or border side has a border-style: of none, its width will always be taken to be zero.

Border-Side Properties

Sometimes you want to set the style, color, and width properties for just one border; thankfully there is a shorthand for each side:

These properties can take any of the values associated with the three corresponding properties above, border-side-style:, border-side-color:, and border-side-width:, in any order:

The Border Property

Finally, the border: property provides a convenient shorthand for setting all three of the collective properties above, border-style:, border-color:, and border-width:, but only if you want uniform borders:

If you want to modify one or more sides to have slightly different properties, you can list them following border: and they will take precedence:

2.7. Exercises

1. In Dreamweaver’s Code View, edit your class.css, and add borders of different styles, colors, and widths to various elements, both block and in-line; try out the individual properties as well as the border-side: properties and the border: property.
2. Switch to your browser, open/reload your class.html, and verify the result.

Element Margins

As previously mentioned, CSS provides two ways to offset content from its surroundings, padding and margins.

CSS allows almost any element to have a margin, a blank space that separates its border from other elements.

In the representation below, the margin lies outside of the element's content area (black with text), padding (black), and border (white), and is outlined with a dashed line.

Margins are always transparent, so that any colors behind the element will show through (rose in this case).

There are a number of characteristics that distinguish margins from padding:

1. exterior position relative to an element border;
2. transparent always, rather than possibly being filled with a background;
3. values that can be negative;
4. default values that may be non-zero.

The last two will be discussed in more detail shortly.

Margin Sizes

The width of margins can be controlled by four properties:

For example:

With content, padding, borders, and margins, the final dimensions of the element box are:

• element width: the sum of

  margin-left:

  border-left-width:

  padding-left:

  width:

  padding-right:

  border-right-width:

  margin-right:

• element height: the sum of

  margin-top:

  border-top-width:

  padding-top:

  height:

  padding-bottom:

  border-bottom-width:

  margin-bottom:

Margins can have negative values; effectively this can push borders or content outside of the element box.

The margin properties are not automatically inherited.

The Margin Property

Margins can also be set collectively with the short-hand property margin: top right bottom left, in the same way as for padding: and border-width:, et al.:

Vertical Margins

As discussed previously, an element's content area will have a certain size based on its content and on the nature of the element and its environment.

A number of HTML elements also set default margins in the vertical direction that are different from zero.

For example, the paragraph <p> and header elements usually have margin-bottom: set to 1em , and some browsers do the same to margin-top::

You can see here an interesting characteristic of vertical margins: they are allowed to collapse, i.e. they overlap as much as possible with extending into borders/padding/content, effectively eliminating the smaller of the two.

Horizontal Margins

Generally speaking, the properties margin-left: and margin-right: have default values of zero, but certain elements may set them to something different for their circumstances.

For example, if a horizontal rule has a width: less than 100%, then margin-left: and margin-right:will be set to auto, which means they will be equal and as large as necessary to keep the rule centered on the page:

2.8. Exercises

1. In Dreamweaver’s Code View, edit your class.css, and add margins of different sizes to various elements, both block and in-line; try out both the the margin-side: properties and the margin: property.
2. Switch to your browser, open/reload your class.html, and verify the result.

Content Alignment

Because the content in the content area doesn’t always fill it, the content can be positioned within that area with the property text-align: (whether or not it’s actually text):

In western encodings like ISO-8859-1 (Latin-1), the default value of text-align: is left.

text-align: is an inherited property.

Element Positioning

The Class-Identifier Selector

An HTML element can have both class and identifier attributes, and CSS can select for the combined appearance of these attributes’ values.

The syntax is to list the selectors sequentially, without a space (the order is unimportant):

Note that the <p id="lastnotice" class="urgent"> tag matches all three of the p, .urgent, and .urgent#lastnotice selectors.

Question: Does it make sense to define a separate #lastnotice selector?

The Element-Identifier Selector

It’s possible to restrict element selectors so that they only apply in the presence of a particular identifier.

The syntax, again, is to list the selectors sequentially, without a space:

Note that the <p id="important"> is matched by both the p and p#important selectors.

The Element-Class Selector

It’s also possible to restrict element selectors so that they only apply in the presence of a particular class selector.

The syntax, again, is to list the selectors sequentially, without a space:

Note that the <p class="urgent"> tag matches all three of the p, .urgent, and p.urgent selectors.

The Pseudo-Class Selector

The identifier and class selectors are based on the value of HTML attributes, which are usually fixed in an element (ex; pseudo-class selectors are based on the state of an HTML element, which can change as a user surfs the net.

For example, you have certainly noticed that hypertext links, defined by the anchor element, will commonly change color depending on whether the sites they point to have been visited or not.

A pseudo-class is introduced by the colon (:), and the possible states and their meanings are:

Although the last three pseudo-classes can apply to any element, at this time they only function consistently across browsers with the anchor element; it doesn’t hurt to use them, though.

As with other element-selectors, the syntax is to list the selectors sequentially, without a space:

Due to limitations in some browsers, it’s best to only apply one pseudo-class selector at a time.

It’s also a good idea to order them as in the table above; Dreamweaver can sometimes put them in a different order, so beware.

The Descendant Selector

Element selectors (as well as element-identifier and element-class selectors) can be restricted so that they only apply to descendant elements.

The syntax to describe a descendant selector is to list the ancestor and descendant sequentially, separated by a space:

Note that the text inside the <p>...<strong> element structure matches both the p, strong, and p strong selectors.

The second paragraph could also be matched by the selector p code strong, but it wouldn’t apply to the first paragraph.

2.11. Exercises

1. In Dreamweaver’s Code View, edit your class.css, and add examples of .class#identifier, .class.class, element#identifier, and element.class rules, as well as HTML tags to which they apply.
2. Switch to your browser and open/reload the file to see the effect of these styles.
3. Again in Dreamweaver’s Code View, edit your class.css, and add examples of pseudo-class selector rules, as well as HTML tags to which they apply.
4. Switch to your browser and open/reload the file to see the effect of these styles.
5. Returning to Dreamweaver’s Code View, edit your class.css, and add examples of descendant selector rules, as well as HTML tags to which they apply.
6. Switch to your browser and open/reload the file to see the effect of these styles.