CSS Engine

Why did we develop this?

Code

• source:trunk/proj/w3c/

• Tests: source:trunk/test/w3c/
• Demos: source:trunk/demo/w3c/css/
• Documentation: source:trunk/doc/w3c/css/

FAQ

Short list of frequently asked questions, with an eventual link to a longer-list

Example

In simple.css we have:

* {
    image: ''; 
    font-size: medium; 
    fgcolor: inherit; 
    bgcolor: inherit; 
}

slideshow { bgcolor: blue; fgcolor: white; }
slideshow > title { font-size: 80pt; }
slide { bgcolor: black; fgcolor: yellow}

point#special {
    font-size: xx-large;
    fgcolor: red;
}

and in slideshow.xml we have:

<?xml version='1.0' ?>
<!-- Derived from 13.7.2 DOM Example of the Python 2.3 Documentation -->
<slideshow>
    <title>Demo slideshow combined with CSS</title>

    <slide>
        <title>Intro CSS Slide</title>
        <point>This is a CSS demo for xml.dom</point>
        <point>for processing slides with CSS!</point>
    </slide>

    <slide>
        <title>Another CSS demo slide</title>

        <point>It is important</point>
        <point>To have more than</point>
        <point>one slide</point>
    </slide>

    <slide>
        <title>Last CSS demo slide title</title>
        <point id='special'>Thanks for looking at CSS!</point>
    </slide>

</slideshow> 

Running python demoEx.py simple.css slideshow.xml produces:

Parsing "simple.css" using TG.w3c.css...
Parsing "slideshow.xml" using xml.dom.minidom...
Applying the CSS Cascade to the XML DOM...


Results of CSS attributed DOM:

    slideshow: {'bgcolor': 'blue', 'fgcolor': 'white'}
        title: {'bgcolor': 'blue', 'font-size': ('80', 'pt'), 'fgcolor': 'white'}
        slide: {'bgcolor': 'black', 'image': '', 'fgcolor': 'yellow'}
            title: {'bgcolor': 'black', 'font-size': 'medium', 'fgcolor': 'yellow'}
            point: {'bgcolor': 'black', 'font-size': 'medium', 'fgcolor': 'yellow'}
            point: {'bgcolor': 'black', 'font-size': 'medium', 'fgcolor': 'yellow'}
        slide: {'bgcolor': 'black', 'image': '', 'fgcolor': 'yellow'}
            title: {'bgcolor': 'black', 'font-size': 'medium', 'fgcolor': 'yellow'}
            point: {'bgcolor': 'black', 'font-size': 'medium', 'fgcolor': 'yellow'}
            point: {'bgcolor': 'black', 'font-size': 'medium', 'fgcolor': 'yellow'}
            point: {'bgcolor': 'black', 'font-size': 'medium', 'fgcolor': 'yellow'}
        slide: {'bgcolor': 'black', 'image': '', 'fgcolor': 'yellow'}
            title: {'bgcolor': 'black', 'font-size': 'medium', 'fgcolor': 'yellow'}
            point: {'bgcolor': 'black', 'font-size': 'xx-large', 'fgcolor': 'red'}