Cascading Style Sheet, or CSS, is a mechanism for specifying style and layout of structured documents, namely HTML.

See Also  edit

CSS2HTML

an attempt by PN to solve the problem of managing the styles of many websites

TkHTML

NEM: Version 3 now has excellent support for CSS.

Tcl Resources  edit

CSS parser written in Tcl, by st3ve

Other Resources  edit

Sass, "Syntactically Awesome Style Sheets"

Documentation  edit

W3C home

Cascading Style Sheets, level 1, W3C Recommendation 17 Dec 1996, revised 11 Apr 2008

Cascading Style Sheets

A reference by the Web Design Group

Description * edit

Style sheets provide mechanism for separating display markup from structural markup. They are a named collection of attribute-property pairs. The style properties correspond to HTML element properties. 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.

The specifcations for CSS include CSS1, CSS2, CSS3 (draft), and others. New specifications include 3D positioning and sizing of html elements. Unforunately CSS uses different property names then HTML. These style properties can be dynamically set in JavaScript through yet another name convention.

HTML tags that are particularly relevant to CSS

<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>

Formal Definition

ClassName {name:value [name:value;]* } [ ClassName { }]*

Declarations  edit

inline:

<P style="color:red"> some text </P>

file inclusion in HTML head:

<style> ... </style>

file inclusion in html body:

<link rel = "stylesheet" type="text/css" href="file.css">

file inclusion javascript:

<Style> @import url(file.css); </Style>

ClassNaming

.theStyleClassName
P.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.

li, em, span {name:val;...}

Nesting

A sequence of tag names separated by whitespace instead of commas indicates nested tags:

ul ul {color:red}

would cause the nested <ul> to be red:

<div>
    <ul>
        <ul>
            ...
        </ul>
    </ul>
</div>

Applying

In general, the most-specific style for each style attributed is what get applied.

Precedence

increasing priority

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

User Overrides  edit

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

Case Study: PN  edit

PN 2004-09-12: 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.

Misc  edit

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

CSS Flex  edit

bll 2017-9-13 CSS Flex is finally moving towards a useful layout system. It's still not as easy as pack or grid.

https://www.w3schools.com/cssref/css3_pr_flex.asp

---