Version 24 of CSS

Updated 2013-11-04 21:04:45 by st3ve

Cascading Style Sheet

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

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

Here's a CSS parser written in Tcl.


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 through 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 unseparated 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 style="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://rain.org/~art/css.jpg

art morel


LV When a web site makes use of CSS, can a user override the values to get the look s/he wishs? And if so, how?

MR Look in your browser's preferences.. many do provide (global) settings for ignoring CSS, or providing a personal stylesheet


PN (20040912) I manage a whole heap of websites and use tcl to do this, with applications that generate HTML pages and webpages that manage the sites. One example is a Mall of e-shops each with its own style which the guys who run the stores can change themselves. This includes the stylesheets for the shop pages. I provide a webpage which allows the users to alter their shop page style elements, rather than alter the CSS directly.

I want the pages to look good on lite browsers like TkHTML/BrowseX that ignore CSS as well as on the swank browsers. So I want to embed as much of the stylesheet as possible back into the HTML when pages are generated. So I am looking for a CSS to HTML converter. This is an exercise in managing webpage style and keep it in one place.

CSS2HTML contains some of my ideas on this project.

NEM Version 3 of TkHTML now has excellent support for CSS.

NEM stated that he was working on a CSS parser. Did it ever materialize?