Version 7 of CSS

Updated 2002-11-02 03:07:09

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 ]