Home arrow Style Sheets arrow Page 2 - 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 - There's an ID out there: changing styles by ID
(Page 2 of 5 )

Before I go deep into exposing any source code, let's face a key question that always come up when trying to implement some kind of style controls in Web pages: why mess up things with proprietary solutions coming from us when browsers already have their own tools to zoom in and zoom out text, and even alternate or remove styles from documents? The answer is straightforward: plenty of style variations means more choices for users. Not all browsers will give that detailed high-contrast page that a visitor may need for proper reading, or users may find that browser text zooms are not powerful enough. What's more, users can find it helpful to change page styles without having to take a look at browser controls, which sometimes may be harder to use.

Having answered that question, the road is open to introduce ourselves to the first approach to changing styles in Web pages: changing style elements by ID. Let's see how it can be easily achieved.

In order to change the style of a specific page element, the basic approach consists of getting the element's ID attribute and altering the style dynamically, setting some new properties for it. This simple technique might be implemented with a few lines of JavaScript and simple markup. First, the JavaScript function:

<script language="javascript">

changeStyle=function(){

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

if(!switcher){return;}

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

if(!content){return;}

// change style

switcher.onclick=function(){

content.style.backgroundColor='#000';

content.style.color='#ff0';

content.style.fontSize='300%';

return false;

}

}

window.onload=function(){

if(document.getElementById){

changeStyle();

}

}

</script>

And the HTML markup, which is kept at a very basic level:

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

<div id="content"><p>Content goes here...Content goes here...Content goes here...</p></div>

In the above example, I've defined two basic <div> elements. The first one contains the link that behaves as a style switcher for the next containing <div>, identified as "content." Once the page is loaded, the "changeStyle()" function is called properly. This function simply retrieves each <div> object using their ID attributes, and changes the style for the "content" <div> when the link is clicked. As you can see, I've decided to vary background color, increment the font size to a magnitude of "300%", and finally alter the font color of the object.

The "getElementById()" DOM method makes the task of changing the style of an individual page element a straightforward process, doesn't it? However, this rough approach is quite useless in practice for larger style changes, since I'm accessing only one page element at a time, and varying its style. Besides, in real situations, it's rather inefficient to wrap the whole page content into a single <div>. As a final result, this method will be potentially handy when only used on a limited scale, where change styles are needed for small sections of Web pages.

On the other hand, if I want to change large page sections with minor effort, I need to look at another interesting technique: accessing elements by tag name. Once again, DOM's methods are the perfect partners for achieving the objective. Yes, I know you're pretty familiar with the "getElementsByTagName()" method. But maybe someone is unaware of its existence! Let's have a look at its implementation for changing element styles.


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