Version 8 of CSS

Updated 2002-11-02 03:12:17

Cascading Style Sheet

http://www.w3.org/TR/REC-CSS1

http://www.htmlhelp.com/reference/css/


A 30 Second look at CSS. CSS Cascading Style Sheets

Style sheets provide a separation of presentation from the information. They are a named collection of attribute property pairs. The style properties correspond to html element properties. There are two levels CSS1 and CSS2 ? They have introduced 3D positioning and sizing to html elements. Unforunately CSS uses different property names then html ? These style properties can be dynamically set in JavaScript thru even another name convention. Styles are applied to html elements of a given type , html elements grouped in a <Span> or <Div> block or html elements whose class/id attribute is set to the style name.

New Html elements are introduced to support Styles. <Span>

 Defines-delimits a group of htmlElements and optionally names it. If you assign its class attribute with a style its grouping of elements will be stylized by it. Style assignment is as follows: class="someStyle".

<Div>

 Same as Span but will draw the block on a newline. This breaks the flow. It can also be sized,autosized and positioned and given a z-depth. This uses the id rather than the class attribute for assignment: id="someStyle". There also is the idea of floating the the block element to some alignment direction. This will cause the next item to flow around the floated item. I guess a better way than a table to flow text around an image. (See Figure 1)

<Style>

This document is a quick synthesis of several Books chapters on CSS.

Definition Syntax of Name and Rule ClassName {name:value name:value;* } ClassName { }*

Declaring inline (eg. <P style="color:red"> some text </P>

 file inclusion html.body (eg. <link rel = "stylesheet" type="text/css" href="file.css"> ) 
 file inclusion javascript(eg. <Style> @import url(file.css); </Style>
 Html tag Style element (eg.) <style> ... </style> . This goes in head section

ClassNaming

 .theStyleClassName
 AnHtmlElementClass (eg. <P> )
 AnHtmlElementClass.theStyleClassName

Grouping

 Upon declaring you can apply the attributes to several HtmlElement Classes at once. This is a comma separated list. For unseperated list, see Nesting.

(eg. LI, EM ,SPAN { name:val;...} Each of the HtmlClasses will be stylized by these settings.

Nesting

 HtmlElement node hiearchy. The most specific is the child (eg. <Parent element Class="Style1"> ... < Child Element sytle="font-size:20pt"> ... </Child Element> ... </Parent element> )
 Parent Child relationship of HtmlElement Classes. (eg. UL UL {color:red} ) If you have a UL child of UL parent this property will be used.

Applying

 inline
 <Element Class="Style2">
 see <span> and <div>
 automatic from grouping and the parent child nest as above.

Precedence,increasing priority

 CSS set by factory(IE. NN.)
 User set as custom settings in the browser
 Inside the html document by the author

http://68.6.44.242:8085/images/Sw%20Screen%20Shots/css.jpg

art morel


[ Category Acronym ]