What is CSS

On this page we will look at what CSS is and its history, and why we now use it to format our html–xhtml documents.
You can find out how CSS makes it easier to maintain html documents and web sites, and why is make sense to separate a documents structure and presentation and the different ways that styles can be applied to the elements in an html document.

The source of the material I have used on this page is from the book
HTML, XHTML, CSS, Bible 3^rd Edition Published by Wiley.
Authors: Bryan Pfaffenberger, Steven M Schafer, Chuck White, and Bill Karow.

In 1997,  the World Wide Web Consortium (W3C) released the first HTML 4  recommendation, the first to embody a serious effort to separate structure  from presentation.
The W3C envisioned a transitional  period, in which Web Authors would continue to use some presentation  features in their web pages, but the end point was clear:
Any Web page that wanted to conform strictly to HTML  would have to omit presentation – related coding.

From looking at the HTML  and then seeing the HTML  interpreted by the browser, you can pretty much tell what part of the text is instructions to the browser and what part is the content.
But would you feel comfortable making changes to the content, adding another bulleted set of questions and asnwers?
Probably not.
With all those codes embedded in the text, it is easy to mess up, equally you would not want someone who did not know what they were doing having a go either.
The worst maintainance nightmares occur when you want to change the look of your pages throughout your web site.
Because the presentation  code has to be included in every page, you have to change every  page to change the look of your site.
Consider a web site and every  page should have the same formatting, fonts, heading sizes and alignment, the same text colour and the same background colour.
With HTML 3.2  you could only do this by inserting all the necessary presentation  code on every page of the web site.
HTML 4.01  enables you to return to the ideal of separating structure  and presentation.
What does this mean to you and your ability to maintain a site?
Its simple.
HTML  that contains nothing but structural  code is vastly simpler and cheaper to maintain.
There is only one problem.
The simpler, HTML 4.01 – compliant code looks just terrible on – screen with no presentation  information in the code, the browser falls back on it's default presentation  settings.

By themselves, strictly conformant HTML 4  documents are ugly.
Web authors would never have accepted HTML 4  if the W3C had not also developed Cascading Style Sheets (CSS).
In brief, CSS  enables Web authors to specify presentation  information without violating the structure  versus presentation  distinction.
The information the browser must know to format  the previous text is stored separately, in a style sheet.
The style sheet  lists the presentation styles  that the browser should use to dispaly the various components  of the document, such as headings, lists, and paragraphs.
The style sheet  is kept separate from the marked  up text.
It can be stored in a specail section  of the HTML  document itself, away from the documents text, or in a separate  file entirely.

The idea came from the publishing  industry, were style sheets  are still used today.And they are cutting costs wherever Web documents are created and maintained.
Think back to the problem of updating a Web site's look, discussed earlier.
Without CSS,  you'd have to make changes to the presentation  code in each and every  page.
Thanks to CSS,  all you have to do is make changes to the single, underlying style sheet  that every  page uses, and the entire site's appearance  changes.

In Cascading Style Sheets, the term "cascading"  refers to what computer people call the order of precedence – that is, which style  information comes first in the style  pecking  order.Here is the order:

• Element – specific  style  information comes first.This is style  information that's embedded within the HTML.  But wait – does this violate  the structure versus presentation  rule? Yes but sometimes it's necessary. If element  specific information is given, it takes precedence  over page – specific and global styles.
• Page – specific style  information is kept in a special section of the document, called the head, thats separate from the text. It defines the way a particular page looks. If page – specific information is given, it takes precedence over global styles.
• Global – styles  are specified in a separate style sheet  file. They come into play unless conflicting element or page – specific styles  are given.

HTML 4.01  almost eliminates the need to have an HTML expert perform site maintainance.
This means HTML 4.01  helps reduce the cost of maintaining your web site. When was the time you heard anything about reducing costs being mentioned associated with the web?

Styles are a relatively new element for HTML,  but they have revolutionized how HTML  documents are coded and rendered.
Styles  are the main basis behind the "extensible"  in XHTML – they allow Web authors to create new styles  to present their content in a variety of custom, but consistent formats.

At their root styles are simply an aggregation of display attributes, combined to achieve a particular result.
Those familiar with styles  in word processing will have little trouble understanding HTML styles.

Styles  are typically presented in the context of cascading, as in the Cascading Style Sheet (CSS ) standard.The CSS  standard defines a method where several style sheets  (lists of style definitions) can be applied to the same document – repeated style  definitions superced  previously defined styles, hence the cascade.

For example, suppose that you needed to highlight particular text in a document that needed to be deleted.
The text needs to be displayed in red and as strikethrough ...
You could surround each section of text with <font> and <del> tags.
However that approach has two distinct disadvantages:

• The <font> tag has been deprecated  and should not be used.
• If you later change your mind about the colour or decoration (strikethrough ), you would have to find  and change  each set of tags.

Instead, define  a style  for the elements  that contain the desired text attributes,  and then use the style  to highlight the text in the document.

Styles  can also be applied directly to many html tags  using the style attribute.
For example, to apply the red and strikethrough attributes to an entire paragraph, you could use the following example of code.

However, using styles  in this manner removes many of the easily modified advantages gained by using styles.

If you later need to change the text attributes,  one edit in the <style> section of the document would effect the change throughout the document.
But what if you had several documents that used the style ?
You would still have to edit each document to make the style change.
Luckily, htmls style implementation allows for external style sheets that can be applied to multiple documents then you only have to change the external style sheet.
The example of code below defines a link to an external style sheet for an html document.

To create an external style sheet  when you save the file, simply use a .css extension  for the file, and you will have a .css file  or style sheet.
The contents of the site-styles.css  document would be the definitions that you would have placed between the <style> tags in the html  document.
Using the previous example the contents of the .css file  could simply be the following:

You can find more information about CSS here on the Introduction to CSS page,
and also here on the creating style rules page.

	Enter your search terms Submit search form
	Web www.syntaxsandbox.co.uk