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.
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:
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.
Style Sheets 
CSS: Margins Overview
