Home arrow Style Sheets arrow Page 2 - 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 - The CSS standard compliant approach
(Page 2 of 7 )

CSS in itself is something like a constant. By defining the styles in classes and IDs or for the elements themselves, we spare ourselves the excruciating work of adding a lot of visual elements and attributes in the markup. In the days before CSS we had to do the following:

<td valign=”top” align=”right”><font size=”+1”><font color=”blue”>
<b>Foo</b></font></font></td>

CSS allows us to define that as:

td {
vertical-align:top;
text-align:right;
font-size:100%;
color:blue;
font-weight:bold;
} 

These constant settings are applied to each TD element. Another way:

td.special {
vertical-align:top;
text-align:right;
font-size:100%;
color:blue;
font-weight:bold;
} 

The class special is a definition that can be reused for all elements, rather like a constant.

Using Classes

CSS classes could be one approach to mimic real CSS constants. Our box example above could be:

.box {
background:#ccc;
border-top:1px solid #eee; 
border-left:1px solid #eee; 
border-right:1px solid #aaa; 
border-bottom:1px solid #aaa;
padding:.5em;
margin:.5em 0’;
}

We can add this class to any element to apply its definitions. It is also perfectly valid to add several classes, separated by spaces, to one element.

<h1 class=”box”>
<div class=”box warning”>

What we should avoid doing is to name the classes according to how they look, as it can be pretty confusing to see a <div class=”blue bold underline”> that is yellow, of normal weight and without an underline, after a new style guide came along and got applied.


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