Home Accessibility Courses Diary The Mouth Forum Resources Site Map About Us Contact
 
Python and Tcl - public course schedule [here]
Private courses on your site - see [here]
Please ask about maintenance training for Perl, PHP, Lua, etc
 
Elements of Cascading Style Sheets

Elements of HTML are important to CSS display. Common elements are "p", "table", "h1", "span", "div" and "a". Each of these elements generates a box container for the content. There are replaced elements, where the text is replaced with something else for display, such as an image.

<img src="picture.gif" />

This text is not displayed by the browser, but instead the image "picture.gif" is displayed. Input elements of forms are also replaced, such as radio selects and buttons. the majority of of elements are non-replaced. The content is displayed by the browser within it's "box".

<p>hello world</p>

There are two other types of elements, block-level and inline. With a block-level element, a break is generated before and after the the box container preventing elements to be at it's sides. "p" is a common block-level element. Inline-level elements generate a box as a line without adding any breaks. The "img" is a common inline element.

<p>This is a picture of <img src="manor.gif" /> Well House Manor.</p>

The image in this example does not cause any break in the line.

<img src="manor.gif" /><p>This is a picture of Well House Manor.</p>

However the "p" element does. With CSS you can alter the roles of elements by assigning it a different display value.

p { display:inline: }
em { display:block; }

SELECTORS

There are several types of selectors to match elements in a document. Selectors are patterns for the browsers to match with rules for display.

ELEMENT SELECTORS

The plain element selector uses the element name.

p {
color: blue;
}

This selector will match every "p" element in the document and make the text colour property blue.

CLASS SELECTORS
You can also match elements by class, appending a period and the class name.

p.bluetext {
color: blue;
}

This will match any "p" element in the document with the class of blue, such as the following.

<p class="bluetext">this is blue text</p>

UNIVERSAL SELECTORS

The universal (or contextual) selector can match any element in a document. This is an asterisk (*). It is also common practice to leave off the asterisk for the same result.

.BLUETEXT {
color:blue;
}

This will match any element with the class of "blue", such as in the above example or the following:

<span class="bluetext">This is also blue text.</span>

ID SELECTORS

Similarly, selectors can be matched by identifiers, or id. To use identifiers, prefix the name of the id with a hash symbol (#).

#navbar {
background: #CCC;
}

The style will match the element with the named id of "navbar", of which there may only be one unique instance of the named id in that document. In the following, this is the one navbar.

<span id="navbar"><a href="index.html">Home</a></span>

ELEMENT ATTRIBUTE SELECTORS

You can also match attributes of elements, not only classes or ids. To do this, specify the attribute and value to match at the end of the selector, within square brackets.

selector[attribute="value"]

For matching an image with a height of 100:

img[border="0"]

To match images with any border attribute:

img[border]

MORE ON UNIVERSAL SELECTORS

Universal selectors may further be used to match tag descendants in a hierarchy. This can be a very powerful and strict rule, matching by element relationships.

td p ol { color:red; }

This selector will match an ol within p and td elements. If you wanted to match the ol contained in any element that was descendant of the td, you would use:

td * ol { color: red; }

The universal selector is like a wildcard and matches one or more elements. You can also use the universal selectors to group the same styles.

h1, h2, h3, h4, h5, h6 { font-face: Arial; font-weight: normal; padding: 5px; }

PSEUDO SELECTORS

Pseudo-Class and pseudo-element selectors are different styles for various states or subparts of elements.

a:hover {color:yellow;}

This will change the text of the link to yellow when the cursor is hovering over the link.

p:first-letter {color:red; font-size: x-large;}

This selector will make the first letter of a paragraph x-large and red.

MORE ABOUT DOCUMENT HIERARCHY

Element in a document are related, in principle, the same as a family tree, with parents, ancestors, children and siblings. Usage of these selector methods are the most powerful matching of styles. Lets breakdown a typical document.

<html>
<body>
<div class="div1">
 <h1>Heading</h1>
 <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras non odio. Nunc vel mi id enim egestas bibendum. Donec arcu. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Maecenas pulvinar ante vel justo. Etiam nec ipsum. Nulla facilisi. Sed nonummy fringilla nisl. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus odio lectus, tempor in, tempus a, porta ac, velit. Maecenas id est at nunc porta varius.</p>
 <ol>
  <li>List Item</li>
  <li>List Item</li>
 </ol>
</div>
<div class="div2">
 <h2>Heading</h2>
 <table>
  <tr><td>Cell 1</td></tr>
  <tr><td>Cell 2</td></tr>
 </table>
</div>
</body>
</html>

In this example document source, the hierarchy in a tree would be as follows.
                                      body
                                  _____|_____
                                  | |
                                 div1 div2
                   ________________| |___________
                   | | | | |
                  h1 p ol h2 table
                              _____|_____ _____|______
                              | | | |
                              li li tr tr
                                                     | |
                                                     td td

Elements can and do match style values from its ancestors unless there is a conflicting style assigned to the child. This is called inheritance. This only applies to foreground properties and not to background properties such as the background colour and image.

There are several ways to match by hierarchy.

div.div1 h1 /* Selects the descendant h1 of the ancestor div element with the class of div1 */

div.div2 > table /* Selects the child table of the parent div element with the class of div2 */

table + h2 /* Selects an h2 element that has a sibling of table */

You can mix and match for even more complex combinations.
 
COMMENTS IN CSS

Commenting in CSS is similar to comments in other languages, they are enclosed in "/*" and "*/". The can span multiple lines but they cannot be nested inside another comment. Comments are helpful in leaving notes that explain the CSS rules or define groups of style lists.

/* Page layout */
body { margin: 0; color: black; } /* body properties */

VALUES AND UNITS

There are five types of property values, meaning the values to assign to a selector in CSS: keywords, length values, percentage values, colors and URLs. Consult a CSS reference book or the W3C site for a guide to the acceptable values for CSS properties.

KEYWORDS

Keywords are defined values, such as "solid" for the border-style property and "inline" for the display property. Keywords are not case sensitive. In the following example, the keyword value is "solid".

table { border: solid 1px red; }

One useful keyword is "inherit". Most CSS properties automatically inherit the properties of the parent, but in cases where it doesn't, using "inherit" can be beneficial for properties that don't, such as anchors or links.

p { color: #CCC; }
p a:link { color: inherit; }

The above will cause the links within the p element to carry the same text color property as the parent element of p.

LENGTH

Length values can be positive or negative, though some properties only accept positive, followed immediately by a two letter abbreviation for the unit of length. This can be in absolute units of inches (in), centimetres (cm), millimetres (mm), points (pt), picas (pc). It may also be in relative units of em-height (em) or pixels (px) or sometimes percentages (%).

It is useful to keep in mind when specifying lengths that the monitor size and resolution will affect the display. It is normally recommended that using points (pt) are avoided when designing for the web due to display issues with various operating systems and browsers. Em's, percentages and pixels are better where browsers are concerned.

WHAT IS AN EM?
Generally speaking, an em is the size of a character of a font, most often associated with the size of the letter "m", hence em.Using inheritance, one can specify lengths relative of the font-size of the parent element. It enables spacing such as margins, padding, or line-height to be relative to the font size.

PERCENTAGES

Percentages are nearly always relative another value.

p {line-height:110%; }


This gives the p element a line-height of 110% of the current value for separation between lines.

COLOURS (COLORS)

There are 5 colour value types in CSS. Four determine a mix of red, green and blue. These are hex-pair notation, #rrggbb, familiar to HTML authors, short form of hex, #rgb, that replicates each digit, rgb in range by percentage from 0% to 100%, rgb(rrr.rr%,ggg.gg%,bbb.bb%), and rgb range from 0 to 255, rgb(rrr,ggg,bbb). The keyword type is one of the sixteen recognised colours based on the original Windows VGA colours, such as black, white, red, green, blue, yellow and so on. You can set font colours, background colours and border colours.

h1 { color: #000000; }
h2 { color: #CF0; } /* Same as #CCFF00 */
h3 { color: rgb(255,255,255); }
h4 { color: white; }


URLS
When urls are used, such as for images, they point to the file path, absolute URLs being preferred to relative for compatibility issues.

td.fill { background-image: url(http://mysite.com/image.gif); }

TEXT AND FONT STYLES

The majority of web page content is text. CSS provides many properties for controlling text display, such as font faces, font sizes, font weights, line heights and text alignment. CSS2 provided facilities for download-able fonts, but it was not widely implemented in browsers. CSS doesn't give absolute control over fonts as it does depend on the fonts installed on the users computer. CSS defines five general font families to simplify the font variations available, Serif, Sans-Serif, Monospace, Cursive and Fantasy. Typically every font family will fall into one of these generic families, though there may be rare exceptions.

FONT FAMILIES AND FACES

You can specify a generic font-family like this:
body { font-family: Serif; }

This will cause the user agent to choose a Serif font and apply it to the document body. Because of inheritance, this will apply to all descendants of the body element unless another is specified. To specify a more specific font, you can still do so with "font-family".

body { font-family: Georgia, Sans-serif; }

This will cause the browser to display the text in Georgia, and if that font is not available, will then choose another font in the Sans-serif family. If you did not specify the family and the font weren't available, it would then display the document in the system's default font. This way you are still able to keep your document's display close to your design intent. You can use several font names in this list, and the browser will look for them in the order they are listed.

In the case where a font name has spaces in it or includes symbols, you should enclose the name in single quotes.

h1 { font-family: 'Trebuchet MS'; }

FONT WEIGHTS

Bold face text is a common example of font weight. CSS gives more control with the property font-weight, using "normal", "bold", "bolder", "light", and "lighter". It can also be controlled with the numerical values between 100 and 900.

h1 { font-weight: bolder; }
h2 { font-weight: bold; }
h3 { font-weight: normal; }

In the above example, the normal displayed weight of the headings is overridden by CSS.

FONT STYLE

"Font-style" controls the italics property of a font. These are "normal", "italic" and "oblique".

.italics { font-style: italic; }

FONT VARIATION

"Font-variant" provides the facility to use "small-caps".

h1 { font-variant: small-caps; }
h1.normal { font-variant: normal; }

FONT SIZES

Font sizes can be defined as absolute values like pixels, or relative to the size of the parent element's font size. The font-size property also has keywords ranging from "x-small" to "xx-large," but due to browser differences in interpretation, some have different default sizes set for these keywords.

Percentages allow a much finer control over font-size than the relative keywords. The percentage value is determined by the parent element's size.

<html>
<head>
<style type="text/css">
body { font-size: 90%; }
h1 { font-size: 130%; }
h2 { font-size: 110%; }
h3 { font-size: 100%; }
</style>
</head>
<body>
<h1>Heading 1</h1>
<p>Phasellus est. Proin vitae nibh id justo ultrices pharetra. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla facilisi. </p>

<h2>Heading 2</h2>
<p>Sed luctus elit varius elit. Praesent odio. Proin leo lectus, scelerisque vitae, dignissim non, elementum in, tortor. Proin sodales. Phasellus fermentum venenatis ipsum. Duis rutrum adipiscing tellus. Aenean vel sem quis erat adipiscing tempus. Mauris sollicitudin laoreet lacus. </p>
<h3>Heading 2</h3>
<p>Sed luctus elit varius elit. Praesent odio. Proin leo lectus, scelerisque vitae, dignissim non, elementum in, tortor. Proin sodales. Phasellus fermentum venenatis ipsum. Duis rutrum adipiscing tellus. Aenean vel sem quis erat adipiscing tempus. Mauris sollicitudin laoreet lacus. </p>

</body>
</html>

(example image, percentages) In the above, the body's font-size would default to 100% so we've changed this to 90%. The h1's size is set to 110%, h2 set to 105%, with h3 set to 100%, the same as the body font-size. The p font-size property will be smaller than the body font-size. This is where inheritance becomes a very useful tool. As mentioned earlier, it is preferable to use relative font-sizes in a document where possible. Specifying pixels can cause display issues, such as in some Internet Explorer versions including the most recent two, where setting the pixel size in each css style overrides and prevents the user from changing their browser text size display when they may have visual impairments, thus possibly preventing them from being able to read the document.

LINE SPACING

Spacing between lines of text is specified with the "line-height" property. This value is the distance between the baselines of two vertical lines of text, setting the height of the surrounding box. Setting a number value such as "2" multiplies the default line-height times the number. Absolute and relative sizes may also be used, although relative sizes are the preferred method.

line-height: 1.5em;

TEXT ALIGNMENT

Text can be aligned or positioned in CSS with properties for vertical and horizontal alignment, as well as indenting.

"Text-align" can be assigned values of "left", "right", "center" or "justify". This relative to the margin, even if inherited from a parent element. The "vertical-align" property values can be "baseline", "bottom", length (positive or negative value), "sub" (subscript), "super" (superscript), and a few others. The "text-indent" property indents the first line of an element, such as a paragraph, using any of the valid property length metrics.

p { text-align: justify;
 text-indent: 2em;
}

TEXT TRANSFORMATION

One can control the capitalisation of text using "text-transform". This can be assigned the values of "uppercase", "lowercase", capitalize" or "none".

h1 { text-transform: capitalize; }

TEXT DECORATION

Another useful control of text display, this can have values of "underline", "overline", "line-through" or "none". Text decoration is not an inherited property, so use of "inherit" may be of value.

WHITE SPACE

The "white-space" property can greatly affect the display of a document. Normally when extra whitespace is present in a document, the browser displays the first space and ignores the rest. However by setting "white-space" value to "pre", the browser will treat the element as it would with <pre> or pre-formatted text, rendering the whitespace within. Other values of white-space are "normal", "nowrap", "pre-wrap" and "pre-line". This is not an inherited property so "inherit" may also be useful.

p { white-space: pre; }



See also Web Site techniques

Please note that articles in this section of our web site were current and correct to the best of our ability when published, but by the nature of our business may go out of date quite quickly. The quoting of a price, contract term or any other information in this area of our website is NOT an offer to supply now on those terms - please check back via our main web site

Related Material

Web and Intranet - Elements of cascading style sheets
  [4037] Cascading Style Sheets and formatting your web page - (2013-03-10)
  [1998] Text on a background image - (2009-01-16)
  [1831] Text formating for HTML, with PHP - (2008-10-11)
  [1677] CSS training - Cascading Style Sheets (UK course) - (2008-06-15)
  [1019] span and div tags - a css comparison - (2007-01-02)
  [1017] css - handling white space and pre - (2007-01-01)
  [999] Cascading and the buses - (2006-12-18)
  [994] Training on Cascading Style Sheets - (2006-12-17)

Web and Intranet - Introduction to Cascading Style Sheets
  [1677] CSS training - Cascading Style Sheets (UK course) - (2008-06-15)
  [1016] Modernising from tables to cascading style sheets - (2006-12-31)
  [999] Cascading and the buses - (2006-12-18)
  [994] Training on Cascading Style Sheets - (2006-12-17)
  [993] Positioning with Cascading Style Sheets - (2006-12-16)

Web and Intranet - Page layout with cascading style sheets
  [1017] css - handling white space and pre - (2007-01-01)
  [1016] Modernising from tables to cascading style sheets - (2006-12-31)
  [994] Training on Cascading Style Sheets - (2006-12-17)

Web and Intranet - Cascading style sheets - putting it all together
  [4037] Cascading Style Sheets and formatting your web page - (2013-03-10)
  [2223] CSS Style Diagrams - working out where attributes come from - (2009-06-08)
  [1677] CSS training - Cascading Style Sheets (UK course) - (2008-06-15)
  [996] Setting your colour theme through PHP - (2006-12-17)
  [994] Training on Cascading Style Sheets - (2006-12-17)
  [565] Using PHP to output images, XML, Style sheets, etc - (2006-01-15)
  [501] .css - using PHP to make dynamic style sheets - (2005-11-21)

resource index - Deployment
Solutions centre home page

You'll find shorter technical items at The Horse's Mouth and delegate's questions answered at the Opentalk forum.

At Well House Consultants, we provide training courses on subjects such as Ruby, Lua, Perl, Python, Linux, C, C++, Tcl/Tk, Tomcat, PHP and MySQL. We're asked (and answer) many questions, and answers to those which are of general interest are published in this area of our site.

You can Add a comment or ranking to this page

© WELL HOUSE CONSULTANTS LTD., 2019: Well House Manor • 48 Spa Road • Melksham, Wiltshire • United Kingdom • SN12 7NY
PH: 01225 708225 • FAX: 01225 793803 • EMAIL: info@wellho.net • WEB: http://www.wellho.net • SKYPE: wellho

PAGE: http://www.wellho.net/solutions/general- ... heets.html • PAGE BUILT: Wed Mar 28 07:47:11 2012 • BUILD SYSTEM: wizard