Home arrow Style Sheets arrow CSS with Turbine: Single and Multiple Inheritance
STYLE SHEETS

CSS with Turbine: Single and Multiple Inheritance


In this sixth part of a series, you will learn how to work with single and multiple Inheritance by using Turbine’s “extends” keyword. This is a fairly straightforward process. If you already have a background in using an object-oriented programming language, you’ll find this feature a breeze to master.

Author Info:
By: Alejandro Gervasio
Rating: 5 stars5 stars5 stars5 stars5 stars / 1
September 28, 2010
TABLE OF CONTENTS:
  1. · CSS with Turbine: Single and Multiple Inheritance
  2. · Inheriting properties from multiple CSS selectors

print this article
SEARCH DEVARTICLES

CSS with Turbine: Single and Multiple Inheritance
(Page 1 of 2 )

While many web designers are somewhat reluctant to use a CSS parsing library to define the visual presentation of a web site, the truth is that many packages available today offer a plethora of handy features that shorten the styling process and make it easier to tackle. That’s exactly the case with Turbine, a PHP-based library which allows you to create tight CSS files by using a notation similar to the one supported by Python.

In reality, Turbine comes bundled with many other useful characteristics. These include support for nested and multi-line selectors, CSS constants and aliases, single and multiple Inheritance, plus a decent variety of plug-ins that permit you to work with a bunch of behavioral CSS properties in a true cross-browser fashion.

Of course, my intention here isn’t to market the library to you, but simply to show what it can do for you through some approachable examples, which you can tweak at will. With that premise in mind, in previous chapters of this series I demonstrated how to use some of the features mentioned above. These included working with nested and multi-line selectors and the implementation of a highly-desired feature, namely the use of CSS constants and aliases.

As I just said, however, Turbine will let you do many other clever things with your CSS styles. This includes inheriting properties from one and multiple selectors via the “extends” keyword. This is known in object-oriented programming parlance as multiple Inheritance. If you're interested in learning the basic concepts that surround the implementation of this feature, in this sixth part of the series I’m going to create some practical examples that will demonstrate how to put it to work for you.

To learn how to take advantage of the functionality provided by CSS Inheritance with Turbine, start reading now!

Inheriting properties from a single CSS selector: introducing the “extends” keyword

To demonstrate how to use the “extends” keyword with Turbine, I’m going to create a sample web page similar to the one shown in preceding tutorials. Its structural markup will look as follows: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Parsing a CSS file with Turbine (using Inheritance)</title>
<link rel="stylesheet" href="css.php?files=styles.cssp" />
</head>
<body>
<div id="wrapper">
    <div id="header">
        <h1>Parsing a CSS file with Turbine (using Inheritance)</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse auctor commodo risus, et ultrices sapien vestibulum non. Maecenas scelerisque quam a nulla mattis tincidunt. Etiam massa libero, pharetra vel laoreet et, ultrices non leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed posuere ullamcorper lacus et sollicitudin. Morbi ultrices condimentum lacus, sit amet venenatis purus bibendum sit amet. Quisque rhoncus sodales sapien ac blandit. Nam lacus urna, commodo eget tincidunt vitae, ullamcorper at nulla. Vivamus ac iaculis justo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam erat volutpat. Sed quis elit erat, et ultricies diam. Phasellus non turpis malesuada erat ultrices tincidunt sed vitae magna. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis purus risus, lacinia at faucibus id, luctus nec diam. In nulla neque, consequat ac hendrerit ac, pulvinar eu dui. Aenean in arcu felis, non hendrerit est.</p>
    </div>
    <div id="content">
        <h2 id="heading">Main content section</h2>
        <div class="subsection">
            <h3>First subsection</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse auctor commodo risus, et ultrices sapien vestibulum non. Maecenas scelerisque quam a nulla mattis tincidunt. Etiam massa libero, pharetra vel laoreet et, ultrices non leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        </div>
        <div class="subsection">
            <h3>Second subsection</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse auctor commodo risus, et ultrices sapien vestibulum non. Maecenas scelerisque quam a nulla mattis tincidunt. Etiam massa libero, pharetra vel laoreet et, ultrices non leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        </div>
        <div class="subsection">
            <h3>Third subsection</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse auctor commodo risus, et ultrices sapien vestibulum non. Maecenas scelerisque quam a nulla mattis tincidunt. Etiam massa libero, pharetra vel laoreet et, ultrices non leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        </div>
    </div>
    <div id="footer">
        <h2>Footer section</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse auctor commodo risus, et ultrices sapien vestibulum non. Maecenas scelerisque quam a nulla mattis tincidunt. Etiam massa libero, pharetra vel laoreet et, ultrices non leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed posuere ullamcorper lacus et sollicitudin. Morbi ultrices condimentum lacus, sit amet venenatis purus bibendum sit amet. Quisque rhoncus sodales sapien ac blandit. Nam lacus urna, commodo eget tincidunt vitae, ullamcorper at nulla. Vivamus ac iaculis justo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam erat volutpat. Sed quis elit erat, et ultricies diam. Phasellus non turpis malesuada erat ultrices tincidunt sed vitae magna. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis purus risus, lacinia at faucibus id, luctus nec diam. In nulla neque, consequat ac hendrerit ac, pulvinar eu dui. Aenean in arcu felis, non hendrerit est.</p>
    </div>
</div>
</body>
</html>

As you can see, the “content” wrapper defined in the above (X)HTML document includes an H2 element identified as “heading.” That’s not very semantic, I have to admit, but it's handy for showing how to use the “extends” keyword. Now, suppose that you need to define an H3 element that inherits all of the properties from its parent H2. This can be easily achieved in the following way:

body
    padding: 0
    margin: 0
    background: #000
    font: 0.9em Arial, Helvetica, sans-serif
    color: #fff
p
    margin: 0 0 10px 0
#wrapper
    width: 960px
    margin: 0 auto
#header, #footer
    padding: 20px
#content
    padding: 20px
    overflow: hidden
    .subsection
        float: left
        width: 240px
        padding: 20px
        margin-right: 20px
        background: #f00
        p
            color: #000
#heading
    padding: 20px
    margin-bottom: 20px
    background: #00f
h3
    extends: #heading
    border: 1px solid #fff

See how easy it is to work with single Inheritance when using Turbine? As the previous code fragments show, the H3 element uses the “extends” keyword to inherit all of the properties from its single H2 parent, and defines an additional property, which in this case is a thin white border. Here’s how the previous CSS file looks after being processed by the library:

/*
 Stylesheet generated by Turbine - http://turbine.peterkroener.de/
 Version: 1.1.0pre
 Path: /turbine
 Benchmark: 0.22540092468262
 Browser: firefox
 Browser version: 3.68
 Browser engine: gecko
 Browser engine version: 1.928
 Platform: windows
 Platform version: 5.1
 Platform type: desktop
*/
body {
 padding: 0;
 margin: 0;
 background: #000;
 font: 0.9em Arial, Helvetica, sans-serif;
 color: #fff;
}
p {
 margin: 0 0 10px 0;
}
#wrapper {
 width: 960px;
 margin: 0 auto;
}
#header, #footer {
 padding: 20px;
}
#content {
 padding: 20px;
 overflow: hidden;
}
#content .subsection {
 float: left;
 width: 240px;
 padding: 20px;
 margin-right: 20px;
 background: #f00;
}
#content .subsection p {
 color: #000;
}
#heading {
 padding: 20px;
 margin-bottom: 20px;
 background: #00f;
}
h3 { /* Inherited properties from: "#heading" */
 border: 1px solid #fff;
 padding: 20px;
 margin-bottom: 20px;
 background: #00f;
}

That looks pretty good, right? However, this form is basic object-oriented styling that can be expanded a bit further by making an element to inherit properties from several selectors, instead of just one. As I said previously, this concept is known as multiple Inheritance, and in the following section I’m going to create another example that will show how to use it in a concrete manner.

Now, click on the following link and keep reading.


blog comments powered by Disqus
STYLE SHEETS ARTICLES

- CSS Padding Overview
- CSS: Margins Overview
- Top CSS3 Button Tutorials
- More Top CSS3 Tutorials for Animation and Im...
- CSS Mega Menus: Adding Extra Sections
- CSS Mega Menus
- CSS3 Accordian Menu: Horizontally Display Hy...
- CSS Combinators: Working with Child Combinat...
- CSS Combinators: Using General Siblings
- Intro to CSS Combinators
- CSS Semicircles and Web Page Headers
- Drawing Circular Shapes with CSS3 and Border...
- More CSS Pagination Link Templates
- CSS Pagination Links
- Animated CSS3 Image Gallery: Advanced Transi...

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
 
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 
Support 

Developer Shed Affiliates

 




© 2003-2017 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials