|
Starting Cascading Style Sheets
|
By stephen cope
[Hits: 23029]
|
|
Cascading Style Sheets (CSS) are being used more and more by webdesigners to layout and format web pages. Although they havebeen around for several years now many designers have avoidedthem due to browser incompatibility.
Although compatibility problems still exist they are no longeran issue for most applications. Here I will concentrate here onthe main features and how they work and why they areused.You may find yourself using CSS anyway without youknowing as programs like FrontPage use CSS (depends on pagesetup options) for some of their functionality. Styles Solvea Common Problem
HTML was originally designed to define the content of a documentbut not the document presentation/layout. The layout of thedocument was supposed to be taken care of by the browser,without using any formatting tags. The content is defined byusing tags like h1,
, table, which basically say "This is a header", "This is aparagraph", "This is a table", by using tags like and so on.
The principal browser vendors, Netscape and Microsoft, competedby adding support for new, proprietary tags (like the tagand the colour attribute) and technologies that permittedincreasingly high-impact Web pages. These innovations weregood for spurring the development of Web technology, but theycreated problems as well.
Consequently it became more and more difficult to create Websites where the content of HTML documents was clearly separatedfrom the document's presentation and that would be displayedcorrectly on any browser.
The World Wide Web Consortium (W3C) - the consortium responsiblefor standardizing HTML - created a language called CascadingStyle Sheets, or CSS.CSS, unlike HTML, is designed solely todefine appearance as efficiently as possible.
It can exist either within HTML or as a linked document, lettingdevelopers separate a Web page's content (marked up in HTML)from its presentation (defined by CSS). Both Netscape 4.0 andInternet Explorer 4.0 and later support Cascading Style Sheets.
Style sheets work like templates: you define the style for aparticular HTML element once (e.g. header tag h1), and then useit over and over on any number of Web pages.
If you want to change how an element looks, you just change thestyle; the element automatically changes wherever it appears.(Before CSS, you had to change the element individually, eachtime it appeared) .Style sheets let Web designers quickly createmore consistent pages--and more consistent sites. How Stylesheets are Implemented
There are 3 basic ways to add the functionality of Style Sheets:
1. Inline - Creating the elements for each HTML Tag. Thiswill allow the same HTML Tag to have different styles on thesame page. 2. Embedding - Creating the elements onthe page itself that will affect every occurrence of an HTMLTag. 3. Linking - Creating one page that defines theelements and include in the pages that you want to affect.
For beginners using Embedding or Linking is recommended.. TheLinking Style is used when you want to use the same style onmultiple pages, you can then use Embedding and/or Inline onspecific pages that don't fit the design style of the LinkingSheet. Precedence and inheritance
As the term Cascading Style Sheets implies, more than one stylesheet can be used on the same document, with different levels ofimportance. Generally styles from different style sheets mergetogether (cascade) into a virtual style.
However, If you define conflicting styles for the same HTMLelement, the innermost definition--the one closest to theindividual tag-winsThe precedence Style Sheets follow isInline, Embedding, then Linking. Inline Style takes precedenceover Embedding Style, which takes precedence over Linking Style.
There is a fourth style sheet which is set not by the documentauthor but by the reader and that is the browser default. Takingthis style sheet into consideration the order of precedenceis:
1. Inline Style (inside HTML element) .2.Embedding Style Sheet (inside the tag). 3. ExternalStyle Sheet.4. Browser default.
So, an inline style(inside an HTML element) has the highest priority, which meansthat it will override every style declared inside the tag, in an external style sheet, and in a browser (a defaultvalue). - Cascading Style Sheets- part 1
- CascadingStyle Sheets- part 2
- CascadingStyle Sheets- part 3
|
|
|
|
|
|
