Home arrow Style Sheets arrow Page 3 - CSS Constants
STYLE SHEETS

CSS Constants


One feature designers often wished they had with style sheets are constants –- the chance to define something once and reuse it over and over in the style sheet document. This article shows some techniques for how to achieve that and discusses their pros and cons.

Author Info:
By: Chris Heilmann
Rating: 4 stars4 stars4 stars4 stars4 stars / 19
May 09, 2005
TABLE OF CONTENTS:
  1. · CSS Constants
  2. · The CSS standard compliant approach
  3. · Using ID Selectors and Descendent Selectors
  4. · Moving server side
  5. · Using Server Side Scripting Languages
  6. · More examples
  7. · Parsing CSS with PHP

print this article
SEARCH DEVARTICLES

CSS Constants - Using ID Selectors and Descendent Selectors
(Page 3 of 7 )

Another option to maintain a certain reusability is to make the settings dependent on an ID on the BODY element. First we define the settings applying to all pages:

body{
        font-family:Arial,Sans-Serif;
        background:#fff;
        color:#333;
}
#nav{
        width:10em;
        margin:0;
        padding:.5em;
}
#nav li{
        list-style-type:none;
}
h1{
        font-size:120%; 
        border-bottom:1px solid #000;         
}

Then we make the colors dependent on the ID of the body:

#home h1{
        border-bottom:1px solid #363;  
        background:#cfc;       
}
#home #nav{
        border:1px solid #363; 
        background:#cfc;       
}
#contact h1{
        border-bottom:1px solid #369;  
        background:#ccf;       
}
#contact #nav{
        border:1px solid #369; 
        background:#ccf;       
}

The higher specificity ensures that the original settings get overwritten by the “localized” ones.

Depending on which ID we set on the BODY element, the different color settings get applied, without any need to define classes in the HTML.

While this approach means a lot of repetition in the style sheet, it still -– when properly commented –- provides an easy way to brand different pages differently. All we need to do is add one ID to the BODY of the document, which can be done dynamically on the server or via a content management system.

Both solutions are dependent on changes in the markup though, particularly the classes approach. Real CSS constants shouldn’t need that. To make that happen we have to move away from the browser to the server.


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