Easy Web Site Design

Presentation - CSS

Suggested reading

More books on
CSS

HTML is very good at defining what goes into a Web page, ie its content, but not so good at defining how it looks, its presentation.

Those who were surfing the Web from its infancy in the early 1990's probably remember how most Web pages looked similar. This is because HTML was originally designed for the sharing of scientific information, and scientists aren't usually worried about style. But as the Web became more popular among all kinds of people so Web designers wanted to make their pages stand out from the crowd. The result - Cascading Style Sheets (CSS).

To be accurate HTML does include some elements for defining appearance, eg the font tag, however these have been deprecated in HTML 4. This means they may soon be obsolete. CSS is the recommended way of defining presentation.

If you don't define any styles, your Web page will use the user's browser's default settings and your page will probably look like those early 1990's Times New Roman offerings.

CSS styles can be defined in three different places: in a linked style sheet, in the HTML page header, or within particular elements. The name cascading describes the fact that styles defined at lower levels override those defined above, eg styles defined in the page header override those on a linked sheet, and styles defined within elements override those defined in the page header.

Linked, or imported, style sheets are defined by a single line such as this in the page header

<head>
   <title>My home page</title>
   <link href="mystyles.css" rel="stylesheet" type="text/css">

</head>

Linked style sheet files have the extension .css

Linked style sheets have the huge advantage that they can control the styles for an entire site. If your company undergoes a re-branding you need only change one set of styles (in the linked style sheet) to transform the look of your whole site. Using linked style sheets also helps enforce consistency across the pages of your site, making it appear as a unified whole.

Here's an example of styles defined within a page header

<head>

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

</head>

And finally an example of a style defined within an element

<p style="font-size:14px">This text is bigger </p>

Style sheets can be used to define numerous aspects of a document's presentation. We shall describe just a few to give you a flavour. To learn more, visit the links at the foot of this page.

CSS is frequently used to define the style of particular HTML elements, eg

body {color: #000066; background-color: #FFCCFF;}
p {font-family: Arial, Helvetica, sans-serif; font-size: 12px;}

Here the body and paragraph elements are defined. Notice that the definition for an element begins with the element name (eg p, body) without angled brackets. The actual styles are defined within the curly brackets {} which follow.

Style definitions take the form of a list of pairs of attributes and their associated values separated by colons, eg the body will have dark blue (#000066) text on a pale yellow background (#FFCCFF). The attribute-value pairs are separated by semi-colons. Strictly speaking the final semi-colon is unnecessary, however it's a good idea to include it in case you add a new attribute-value pair and forget the preceding semi-colon.

Text contained within paragraphs will (hopefully) be displayed in the Arial font at size 12 pixels. Note that the font-family attribute has a list of three values. If a user's computer doesn't have the first font (in this case, Arial) installed the browser will try to display the text using the second in the list and so on. It's usually a good idea to specify a generic sans-serif, serif, or mono as the last element.

Serif fonts have little tails which make printed text easier to read. Sans-serif is usually preferred and looks cleaner on screen as computer monitors have lower resolution than print. Mono refers to fonts in which each character occupies the same width, like typed text.

Font sizes may be defined in a number of units; eg pixels (px), points (pt) or ems (a relative measurement expressed as a percentage of the parent element). W3C accessibility guidelines recommend the use of ems. If you wish to specify an absolute size pixels are better than points as they display more consistently across different platforms.

To define a style for a particular element, use the style attribute inside the opening tag, eg

<p style="font-size:14px">This text is bigger </p>

A useful style to define is a:hover -

a:hover {color: #CC0000;}

The :hover bit is known as a pseudo-class. This defines the colour that links <a> </a> appear when the user rolls their mouse cursor over the text. Here the text changes to red, thus providing additional notification to the user that s/he has found an active link.

In addition to defining how HTML elements appear, CSS also allows designers to create custom styles or classes, eg

.keytext {font-family: Georgia, "Times New Roman", Times, serif;
font-size: 14px; font-weight: bold; color: #FF0000; }

Here I have defined a class keytext, which will display (preferably) in bold, red 14px Georgia font. Note the use of the dot before the class name.

Here's an example of how to use classes

This is how <span class="keytext">key text</span> looks.

Simply use the class attribute inside the opening tag of the element you wish to affect. Note the use of the span element. This is an inline element, which means it can be used within blocks, eg paragraphs, to affect just part of the blocks.

And the result: This is how key text looks.

In Dreamweaver CSS code may be created and applied automatically from the Text / CSS Styles menu.

For more information, see

W3C - Dave Raggett's Introduction to CSS

W3Schools CSS Tutorial

W3C - Cascading Style Sheets Home Page

Cascading Style Sheets, level 2 CSS2 Specification (W3C)

USENET newsgroup: comp.infosystems.www.authoring.stylesheets

Easy Web Site Design Presentation - CSS


Suggested reading More books on CSS	HTML is very good at defining what goes into a Web page, ie its content, but not so good at defining how it looks, its presentation. Those who were surfing the Web from its infancy in the early 1990's probably remember how most Web pages looked similar. This is because HTML was originally designed for the sharing of scientific information, and scientists aren't usually worried about style. But as the Web became more popular among all kinds of people so Web designers wanted to make their pages stand out from the crowd. The result - Cascading Style Sheets (CSS). To be accurate HTML does include some elements for defining appearance, eg the font tag, however these have been deprecated in HTML 4. This means they may soon be obsolete. CSS is the recommended way of defining presentation. If you don't define any styles, your Web page will use the user's browser's default settings and your page will probably look like those early 1990's Times New Roman offerings. CSS styles can be defined in three different places: in a linked style sheet, in the HTML page header, or within particular elements. The name cascading describes the fact that styles defined at lower levels override those defined above, eg styles defined in the page header override those on a linked sheet, and styles defined within elements override those defined in the page header. Linked, or imported, style sheets are defined by a single line such as this in the page header <head> <title>My home page</title> <link href="mystyles.css" rel="stylesheet" type="text/css"> </head> back to top Linked style sheet files have the extension .css Linked style sheets have the huge advantage that they can control the styles for an entire site. If your company undergoes a re-branding you need only change one set of styles (in the linked style sheet) to transform the look of your whole site. Using linked style sheets also helps enforce consistency across the pages of your site, making it appear as a unified whole. Here's an example of styles defined within a page header <head> <style type="text/css"> <!-- p {font-family: Arial, Helvetica, sans-serif; font-size: 12px;} a:hover {color: #CC0000;} --> </style> </head> And finally an example of a style defined within an element <p style="font-size:14px">This text is bigger </p> Style sheets can be used to define numerous aspects of a document's presentation. We shall describe just a few to give you a flavour. To learn more, visit the links at the foot of this page. CSS is frequently used to define the style of particular HTML elements, eg body {color: #000066; background-color: #FFCCFF;} p {font-family: Arial, Helvetica, sans-serif; font-size: 12px;} Here the body and paragraph elements are defined. Notice that the definition for an element begins with the element name (eg p, body) without angled brackets. The actual styles are defined within the curly brackets {} which follow. back to top Style definitions take the form of a list of pairs of attributes and their associated values separated by colons, eg the body will have dark blue (#000066) text on a pale yellow background (#FFCCFF). The attribute-value pairs are separated by semi-colons. Strictly speaking the final semi-colon is unnecessary, however it's a good idea to include it in case you add a new attribute-value pair and forget the preceding semi-colon. Text contained within paragraphs will (hopefully) be displayed in the Arial font at size 12 pixels. Note that the font-family attribute has a list of three values. If a user's computer doesn't have the first font (in this case, Arial) installed the browser will try to display the text using the second in the list and so on. It's usually a good idea to specify a generic sans-serif, serif, or mono as the last element. Serif fonts have little tails which make printed text easier to read. Sans-serif is usually preferred and looks cleaner on screen as computer monitors have lower resolution than print. Mono refers to fonts in which each character occupies the same width, like typed text. Font sizes may be defined in a number of units; eg pixels (px), points (pt) or ems (a relative measurement expressed as a percentage of the parent element). W3C accessibility guidelines recommend the use of ems. If you wish to specify an absolute size pixels are better than points as they display more consistently across different platforms. To define a style for a particular element, use the style attribute inside the opening tag, eg <p style="font-size:14px">This text is bigger </p> A useful style to define is a:hover - a:hover {color: #CC0000;} The :hover bit is known as a pseudo-class. This defines the colour that links <a> </a> appear when the user rolls their mouse cursor over the text. Here the text changes to red, thus providing additional notification to the user that s/he has found an active link. back to top In addition to defining how HTML elements appear, CSS also allows designers to create custom styles or classes, eg .keytext {font-family: Georgia, "Times New Roman", Times, serif; font-size: 14px; font-weight: bold; color: #FF0000; } Here I have defined a class keytext, which will display (preferably) in bold, red 14px Georgia font. Note the use of the dot before the class name. Here's an example of how to use classes This is how <span class="keytext">key text</span> looks. Simply use the class attribute inside the opening tag of the element you wish to affect. Note the use of the span element. This is an inline element, which means it can be used within blocks, eg paragraphs, to affect just part of the blocks. And the result: This is how key text looks. In Dreamweaver CSS code may be created and applied automatically from the Text / CSS Styles menu. For more information, see W3C - Dave Raggett's Introduction to CSS W3Schools CSS Tutorial W3C - Cascading Style Sheets Home Page Cascading Style Sheets, level 2 CSS2 Specification (W3C) USENET newsgroup: comp.infosystems.www.authoring.stylesheets back to top
© web.twinisles.com Questions? Comments? Contact info@twinisles.com