Home arrow Style Sheets arrow Using Persistent Styles with Multiple Style Sheets
STYLE SHEETS

Using Persistent Styles with Multiple Style Sheets


If you're a web designer who has experience in the area of web development, then you'll be aware of the advantages of working with separate style sheets when building a web site. However, the really good news is that you can extend these benefits even more if you learn how to work with multiple style sheets, which can be swapped easily to provide users with a better level of customization and accessibility.

Author Info:
By: Alejandro Gervasio
Rating: 5 stars5 stars5 stars5 stars5 stars / 6
September 12, 2007
TABLE OF CONTENTS:
  1. · Using Persistent Styles with Multiple Style Sheets
  2. · Refreshing some previous concepts and methodologies
  3. · Working with persistent style sheets
  4. · Defining some basic JavaScript functions
  5. · Listing the full source code of the style switching application

print this article
SEARCH DEVARTICLES

Using Persistent Styles with Multiple Style Sheets
(Page 1 of 5 )

Introduction

Welcome to the second tutorial of the series that began with "Working with Multiple Style Sheets." As the title suggests, this instructive series shows you how to use several style sheets attached to a given web document, and provides examples of the most common cases, ranging from working with alternate style sheets to using persistent style sheets.

Now that I have introduced the primary subject of this series, it's a good time to review some of the concepts deployed in the previous tutorial to give you a better understanding of how both articles link with each other. That being said, you'll surely recall that during the first installment, I offered you a friendly introduction to working with multiple, "alternate" style sheets. 

Speaking in more specific terms, I developed a simple web application that allowed users to switch easily between the different alternate style sheets associated with a particular web document. This provides users with a simple mechanism to change the look and feel of a web page. Of course, as you might guess, the implementation of the mechanism required the combination of some basic CSS styles and the definition of a couple of JavaScript functions, which came in useful for switching between different alternate style sheets.

Also, it's really worthwhile to note here that building this kind of web application, which allows users to change the style sheets tied to a given web page, is rather useless if this change isn't persistent across the different pages of the entire site. This obviously implies that you may want to incorporate into the application the capability for maintaining the selected style across different pages via the creation of a cookie mechanism, either using JavaScript or your favorite server-side scripting language.

All right, having reviewed the most relevant topics surrounding the manipulation of multiple alternate style sheets, let's go straight into the subject of this second part of the series. As you'll see in the next few lines, I'm going to demonstrate with various hands-on examples how to modify the look and feel of a determined web document by swapping several "persistent," rather than "alternate," style sheets. In doing so, you'll learn yet another approach to changing the CSS styles of a web page.

The theme is indeed useful and interesting, so don't waste more time in preliminaries; start learning more about switching persistent style sheets. It's going to be an educational journey!


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