Home arrow Style Sheets arrow CSS with Turbine: Working with Multi-Line Selectors
STYLE SHEETS

CSS with Turbine: Working with Multi-Line Selectors


In this fourth part of the series, you will learn how to take advantage of the functionality offered by “multi-line” CSS selectors with Turbine. This feature basically allows you to easily assign the same group of styles to multiple elements via an intuitive syntax.

Author Info:
By: Alejandro Gervasio
Rating: 5 stars5 stars5 stars5 stars5 stars / 4
September 22, 2010
TABLE OF CONTENTS:
  1. · CSS with Turbine: Working with Multi-Line Selectors
  2. · Using multi-line CSS selectors

print this article
SEARCH DEVARTICLES

CSS with Turbine: Working with Multi-Line Selectors
(Page 1 of 2 )

While  many web designers may find CSS parsing libraries (and perhaps even CSS frameworks) pretty pointless, some of the packages available nowadays can be really useful for defining styles in a short and compact way. Most offer additional capabilities, such as minifying and compressing CSS files.

Among those libraries, there’s one that has caught the attention of many people. It offers a fairly easy learning curve, an intuitive API, and an impressive number of features. Obviously I'm referring to Turbine, a solid PHP package that not only will permit you to define the CSS styles of your web pages using a Python-like syntax, but will let you use constants, shortcuts and a decent variety of plug-ins that will help you to deliver your CSS files in a faster and more cohesive manner.

Naturally, if you’ve been a loyal reader of this article series, at this stage you’re familiar with some of the features included with Turbine. In previous installments I explained how to parse style sheet files using the library, and how to perform more complex tasks, such as working with nested CSS selectors.

However, this exploration of Turbine isn’t over. The library comes bundled with many other features that are worth a close look. In this fourth episode of the series I’m going to show how to assign the same set of styles to multiple selectors in one go, a process known in Turbine’s parlance as “multi-line” selectors.

Ready to continue learning how to use Turbine? Then keep reading!

Review: using multiple nested selectors with Turbine

Just in case you haven't read the previous tutorial, I've included the source code for the technique we covered below. In that article, I created an example that showed how to code multiple nested selectors using the tight syntax allowed by Turbine. 

Here's the web page that calls Turbine to parse the CSS file containing the nested selectors:

<!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 multiple nested selectors)</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 multiple nested selectors)</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>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>

I’m not going to waste your time explaining again how to process a specified CSS file with Turbine, as the topic was discussed in detail in previous parts of this series. Instead, I suggest you look at the definition of the “styles.cssp” file requested by the above web page, which defines a set of three different nested selectors:

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

This is, unquestionably, the most interesting facet of this example. It shows how easy it is to create a hierarchy of nested elements by using Turbine’s notation. In this case, a “p” selector has been nested inside a “subsection” class, which is also a child of an element identified as “content.” That’s pretty easy to follow, right?

So far, so good. After the library parses the earlier CSS file, the shortened hierarchy is expanded back to its “valid” state, as shown in the following code fragment: 

/*
 Stylesheet generated by Turbine - http://turbine.peterkroener.de/
 Version: 1.1.0pre
 Path: /turbine
 Benchmark: 0.22825002670288
 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;
}

There you have it. As you can see, Turbine actually yields quite impressive results when defining several hierarchies of nested CSS selectors. However, the library is capable of performing many other useful parsing tasks, aside from the one that you just saw. In the next segment I’m going to create another example which will demonstrate how to instruct Turbine to assign the same group of styles to multiple selectors simultaneously.

As I mentioned at the beginning, this approach is called, in Turbine’s jargon, “multi-line” selectors. If you want to learn how to use them, 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