Adding cascading style sheets (CSS) to web pages is not difficult. Style sheets are typically external files that define syles that can be applied to text in your html document. For example, you may create a style called "BigBlue" that has a font of size 24 and is blue in color. Then you when you come to some text in your html you wish to format in this fashion you can simply refer to the "BigBlue" style.
So, there are 2 parts to CSS, the first is defining the styles and the second is their application within an HTML document. While there is a standard to CSS, it is true that different browsers and versions of a browser may support CSS differently. You must read up on the documentation of each browser (and its version) to understand this.
First lets look at how to use style sheets in your web pages
SPECIAL question ---why both id and classname used to define CSS embeded styles:ID's are unique
Classes are NOT unique
|
---|
What are style sheets?If are you are familiar with modern word processing packages such as Microsoft Word or WordPerfect then you are probably familiar with the concept of styles. Styles enable you to define a consistent 'look' for your documents by describing once how headings, paragraphs, quotes, etc. should be displayed. In terms of web pages this means that to have all your level 1 headings
centered, blue and Arial you do not have to apply the CSS offers much more flexibility in terms of the presentation effects that they provide. Properties such as colour, background, margin, border and many more can be applied to all elements. Style sheets also form an integral part of dynamic HTML as they can be accessed and changed on-the-fly by scripting languages. At the time of writing, style sheets are at least partially supported by Microsoft Internet Explorer 3 upwards, Netscape Navigator 4 upwards, Opera 3.5 upwards, W3C's Amaya and many UNIX based browsers. Specific Markup |
Adding styles to your web pagesBasic SyntaxStyle sheet syntax is simple, and is made up of three parts: a selector, a property and a value. selector {property: value} The selector is normally the element or tag you wish to define, the property is the attribute you wish to change, and each property takes a value. The property and value are separated by a colon and contained in curly braces. If you wish to specify more than one property than you should separate each one by a semi-colon. The example below shows how you would define level 1 headings to be shown centered and coloured blue. H1 {text-align: center; color: blue} The W3C Cascading Style Sheets Level 1 (CSS1) Specification and CSS2 Specification formally define the properties and values available. A full list of properties with examples may also be found in the Properties section. An important note from experience of using style sheets is
that you must use the closing tags for all situations. This means that
if you start a paragraph using Linking style sheets to HTMLStyle sheet methods can be applied at three different levels:
Linking to a style sheet fileYou can create an external style sheet for your entire website, or for a
group of related pages on your website. Each web page must link to the style
sheet using the
The above example links to a style sheet file called mystyles.css in a directory called styles. The style sheet can be written in any text editor. The file should not
contain any HTML tags like selector {property: value} Your style sheet should be saved with a /* Example style sheet file (note how this comment was created) */ BODY {background: #FFFFD8; margin-top: 20} A:link {color: #400080; background: #FFFFD8} H1 {font-weight: bold; text-align: center; color: #006000; background: #FFFFD8; font-family: 'Gill Sans', Arial, sans-serif} CITE {font-family: 'Gill Sans', Arial, sans-serif; font-style: italic} An linked style sheet is ideal when the style is applied to numerous pages. With a linked style sheet, an author could change the look of an entire site by simply changing one file. Additionally, most browsers will cache a linked style sheet, thus avoiding a delay in page presentation once the style sheet is cached. Contextual SelectorsContextual selectors are merely strings of two or more simple selectors separated by a space. These selectors can be assigned normal properties and, due to the rules of cascading order, they will take precedence over simple selectors. For example, the contextual selector in: P STRONG { background: yellow } is GroupingIn order to decrease repetitious statements within style sheets, grouping of selectors and declarations is allowed. For example, all of the headings in a document could be given identical declarations through a grouping separated by commas, thus: H1, H2, H3, H4, H5, H6 {color: red; font-family: sans-serif } The above example would make all headings in the document coloured red and in a sans-serif font (if the browser supports it). Embedding a style sheetThe implication of embedding a style sheet into a web page is that only a
single web page will benefit from the styles you specify. If the web page also links to a
style sheet, the embedded styles will take precedence in the case where two
tags are defined differently (see The Cascade). Embedded styles are placed in
the
Note the comment tags An embedded style sheet should be used when a single document has a unique style. If the same style sheet is used in multiple documents, then an external style sheet would be more appropriate. Inlining styleStyles may be applied inline to any element in the
Inlining styles loses many of the advantages of style sheets by mixing content with presentation. This method should be used sparingly, such as when a style is to be applied to a single occurrence of an element. |
The CascadeWhen multiple style sheets are used, the style sheets may fight over control of a particular selector. In these situations, there must be rules as to which style sheet's rule will win out. Style sheets override conflicts based on their level of specificity, where a more specific style will always win out over a less specific one - this cascade effect that leads to the name 'cascading style sheets' (CSS). What this means is that the three methods outlined above can be combined together with the order of precedence: inline>embedded>linked. An inline style applies to an individual element and is therefore more specific than an embedded style sheet, which applies to an entire web page. Similarly, styles set in an embedded style sheet will override those set in a linked style sheet, which applies to multiple web pages. Where a number of properties have been set for the same selector in different
style sheets, values will be inherited from the more general style sheet. For
instance, a linked style sheet may set the following properties for the H1 {background-color:#FFFFD8; text-align:justify; font-size:12pt} And an embedded style sheet may set these following properties: H1 {text-align:left; font-size:150%} This means that if the page with the embedded style sheet also links
to the linked style sheet the resulting properties for background-color:#FFFFD8; text-align:left; font-size:18pt As you can see, the background-color is inherited from the linked style sheet, the text-alignment is replaced by the embedded style sheet and the percent increase in text size is applied to the linked style sheet, as opposed to a browser default. |
Classes and IDsUsing classesClasses enable you to define different styles for the same element. For example, you may be writing a FAQ and wish your paragraphs to be displayed either red or green & italic, according to whether they are a question or an answer. In this case you could embed a style definition as follows: <STYLE> <!-- P.question {color: green; font-style: italic} .answer {color: red} --> </STYLE> You would present your FAQ using the defined classes as follows:
In this example, the answer class may be applied to any element
since it does not have an HTML element associated with it in the style sheet.
Using the style sheet given above, the question class may only be
applied to the Classes can be a very effective method of applying different styles to structurally identical sections of an HTML document. A good practice is to name classes according to their function rather than their appearance. The answer class in the above example could have been named red, but this name would become meaningless if the author decided to change the style of the class to a different color. You can't start your class names with a digit or a dash. Using IDsIDs enable you to define a unique style for an element. In this case you could embed a style definition as follows: <STYLE> <!-- #copyright {font-style:italic; font-size:smaller} --> </STYLE> You would present your FAQ using the defined classes as follows:
Each ID attribute must have a unique value over the document. The value must be an initial letter followed by letters, numbers, digits or hyphens. The letters are restricted to A-Z and a-z. Note also the addition of a hash (#) in the ID style definition. Use of ID for applying style is discouraged since the style may only be applied once in the document. Use of ID is normally reserved for use with dynamic HTML. |
Divisions and spansThe
|