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
 
Introduction to Cascaded Style Sheets

WHAT

Cascading Style Sheets are a recent development to add finer control and styling to basic HTML structure. CSS consists of lists of layout and display rules which govern how a webpage will look. It can control margins, font styles, backgrounds, images and positioning just to name a few.

WHY?

With CSS it is easy to make styling edits quickly in order for the changes to be reflected in one page or a thousand. By attaching a separate css file, one can have a more compact page and reuse the one linked css file in multiple pages. CSS enables designers to format pages for a variety of different media, be it the browser screen, printed or other versions, and the webpage authors may simply add their content without changing the design.

STRUCTURE AND LOADING

Each CSS rule is made up with one or more selectors and a declaration block which is contained in curly braces. The contained list of declarations contains a property, then a colon, and then one or more values.

selector { property:value;}

It can be formatted in a variety of ways, but with the selector separated from the brace by whitespace, the property separated from the value by a colon, and the property/value pair should end with a semicolon. Extra whitespace in the form of spaces, new lines and tabs have no effect other than for easy readability.

p {
font-size: 12px;
color: black;
background: white;
}

.outline {
border: 2px solid gray;
margin: 10px;
}

In the above example, the first assigned selector is the html element "p" (paragraph) and the declarations of the font size property is 12 pixels, the text color property value is red, and the background color property value is white. The second selector is a class attribute as it begins with a "." and contains the token "outline". It's assigned border property is 2 pixel solid gray, with a margin of 10 pixels.

<p>This paragraph will be rendered with red text at 12 pixels on a white background</p>

<span class="outline">This text will be surrounded with a 2 pixel gray border</span>

Loading Style sheets

CSS styles can be loaded in many ways. For the page author, they can be loaded with external stylesheets, embedded styles, or inline styles.

EXTERNAL STYLE SHEET

These are separate css files referenced in the document heading using the <link> tag. In the following example the XHTML document loads the css file "mystyles.css" into the webpage. There can be one or more referenced stylesheets. "rel" stands for "relation," for our purposes the relation is a stylesheet. The "media" is a direction to the useragent to apply the display to the computer screen. Other common media attributes are "all", "handheld", "print", "projection", "tty" and "tv". Not all types are supported by web browsers.

<head>
<link rel="stylesheet" type="text/css" href="mystyles.css" media="screen, print" />

</head>

EMBEDDED STYLES

These selectors are included in the <head> tags of the document and not as a separate file.

<head>
<style type="text/css">
body {
background: #cccccc;
font-face: Arial, etc, etc;
font-size: 10px;
margin: 10px;
}
</style>
</head>

You can also import external style sheet files into the STYLE element using @import

<style type="text/css">
 @import url(mystyles.css) screen;
</style>

INLINE STYLES

This type of styling is included in the html of the webpage itself.

<p style="color: blue;">This is blue text.</p>


WHAT DO WE MEAN BY 'CASCADE'?

Style sheets are said to cascade because the properties can be arranged to conflict and over-ride each other with sophisticated rules and priorities. CSS controls the layout display for each target user in special pages or circumstances. For instance, you may wish to display in one font-size for the pc web browser, with larger text sizes for the visually impaired, while switching to another layout for the printed version of the page, or yet another simpler imageless layout for the wap/mobile user version of the page.

<head>
<link rel="stylesheet" type="text/css" href="mystyles.css" media="screen" />
<link rel="stylesheet" type="text/css" href="myprintstyles.css" media="print" />
</head>

In the above case, "mystyles.css" will be loaded by user agents such as Internet Explorer or Firefox. But when the page is printed, it will then take on the styles defined in "mystyles.css" firstly, overridden then by any conflicting styles in "myprintstyles.css". this is useful for changing margins, page width, or hiding sidebars that might be irrelevant to printed matter. When a selector property is defined multiple times with different values, rules of precedence are followed. In other usage, different styles could also be used for different groups of users, such as larger fonts for the visually impaired, or different colour choices for the colourblind


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 - 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 - 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 - 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