Home arrow Style Sheets arrow Page 4 - Customizing Styles: User-Controlled Style Sheets, part 1
STYLE SHEETS

Customizing Styles: User-Controlled Style Sheets, part 1


Giving your visitors more control over how they see your website makes for a very user-friendly experience. If you get a lot of visually impaired Web surfers, you might want to set up a "switcher" to allow them to switch between the default version and a high-contrast version of your website. In this first of a three-part article series, Alejandro Gervasio explains a couple of simple ways to set this up.

Author Info:
By: Alejandro Gervasio
Rating: 5 stars5 stars5 stars5 stars5 stars / 17
April 06, 2005
TABLE OF CONTENTS:
  1. · Customizing Styles: User-Controlled Style Sheets, part 1
  2. · There's an ID out there: changing styles by ID
  3. · What's your name? Changing styles by tag name
  4. · Flexible style changes: keeping it maintainable with CSS
  5. · The real style switcher

print this article
SEARCH DEVARTICLES

Customizing Styles: User-Controlled Style Sheets, part 1 - Flexible style changes: keeping it maintainable with CSS
(Page 4 of 5 )

Based on the above practical example, it's highly desirable and even recommended to add some CSS declarations, in order to take a more realistic approach and be stricter about the needs that eventually might arise for visitors with impaired sight. According to this concept, I'm going to declare two basic classes: "default" and "accessible" respectively. The first one will be applied to the previous <div> elements when the document is loaded, and the second will be assigned to the page elements, when the user clicks on the switcher link. Now, we're getting a bit more realistic. First, let's present the new "changeStyle()" function:

<script language="javascript">

changeStyle=function(){

var switcher=document.getElementById('switcher');

if(!switcher){return;}

var divs=document.getElementsByTagName('div');

if(!divs){return;}

switcher.onclick=function(){

for(var i=0;i<divs.length;i++){

divs[i].className='accessible';

}

return false;

}

}

window.onload=function(){

if(document.getElementById){

changeStyle();

}

}

</script>

Second, as I stated above, let's declare the CSS classes. They're really simple:

<style type="text/css">

.default {

font: normal 12px "Arial", Helvetica, sans-serif;

color: #000;

background: #fff;

}

.accessible {

font: 300% "Arial", Helvetica, sans-serif;

color: #ff0;

background: #000;

}

</style>

Finally, let's show the corresponding HTML markup, which is nearly identical to the previous cases:

<p><a href="#" title="change style" id="switcher">Change style</a></p>

<div class="default"><p>Content for div 1 goes here...Content for div 1 goes here...</p></div>

<div class="default"><p>Content for div 2 goes here...Content for div 2 goes here...</p></div>

<div class="default"><p>Content for div 3 goes here...Content for div 3 goes here...</p></div>

 

Fine, let's take a deep breath and explain the above code. The "changeStyle()" function closely resembles the original version, with some subtle differences. Since I've declared two CSS classes, once the page is loaded, the script retrieves the already familiar switcher link. When the link is clicked, the function loops over all of the <div> elements in the page, assigning them the new "accessible" class. This changes their styles in a fast and straightforward manner, enlarging the text, and varying the background color and the font size. As you can see, this approach is significantly more flexible, since, by introducing minor modifications in the CSS classes, the style change can become really dramatic. If you think about it, this is one of the biggest advantages of the CSS. Pretty simple, right?

If you feel that the above example is not complete, you're correct. So I'm going to fix that mistake by listing the full code:

<html>

<head>

<title>CHANGING STYLES BY TAG NAME</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<script language="javascript">

changeStyle=function(){

var switcher=document.getElementById('switcher');

if(!switcher){return;}

var divs=document.getElementsByTagName('div');

if(!divs){return;}

switcher.onclick=function(){

for(var i=0;i<divs.length;i++){

divs[i].className='accessible';

}

return false;

}

}

window.onload=function(){

if(document.getElementById){

changeStyle();

}

}

</script>

<style type="text/css">

.default {

font: normal 12px "Arial", Helvetica, sans-serif;

color: #000;

background: #fff;

}

.accessible {

font: 300% "Arial", Helvetica, sans-serif;

color: #ff0;

background: #000;

}

</style>

</head>

<body>

<p><a href="#" title="change style" id="switcher">Change style</a></p>

<div class="default"><p>Content for div 1 goes here...Content for div 1 goes here...</p></div>

<div class="default"><p>Content for div 2 goes here...Content for div 2 goes here...</p></div>

<div class="default"><p>Content for div 3 goes here...Content for div 3 goes here...</p></div>

</body>

</html>

Just copy and paste the code into your favorite editor. Save it and load it into your browser and see what happens. It's not going to change the way you see the world, but hopefully it will demonstrate how easy multi-element style changes can be achieved. But, wait a minute! What's the sense of changing the style of page elements if we cannot turn them back to their original state? Let's make one last effort and add that functionality to the JavaScript function.


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