Home arrow Style Sheets arrow Page 4 - The Advantages of Style Sheets
STYLE SHEETS

The Advantages of Style Sheets


Style sheets have become ever more popular each year as designers realize that whole web sites can be customized without too much fine editing. They allow properties for the whole site to be set, such as page color, link color, margins, text size, and much more. All of these can be keyed into a single file or in the main body of the code.

Author Info:
By: Stephen Davies
Rating: 3 stars3 stars3 stars3 stars3 stars / 6
August 07, 2007
TABLE OF CONTENTS:
  1. · The Advantages of Style Sheets
  2. · Inline and External Styles
  3. · The CLASS and ID tags
  4. · Final Working Examples

print this article
SEARCH DEVARTICLES

TOOLS YOU CAN USE

advertisement
The Advantages of Style Sheets - Final Working Examples
(Page 4 of 4 )

Take a look at the CSS code below. I want to show you some useful tricks that can be applied with style sheet commands.

.menu {
  
margin: 0px;
  
padding: 0px;
  
align: center;
  
font-family: Arial, Helvetica, sans-serif;
}

This is a typical usage of the class sector. Any text or lists that use the class name .menu will have several properties applied. Setting the margin to zero maximizes the width. The padding property keeps the spacing of the text to a minimum. The text will be aligned to the center of the page and will be assigned the Arial font type.

Here are a few examples that can be used to add a little extra static sparkle to an otherwise standard look:

Example A

Make the links block elements and give them padding and some style. Links will become black text on a white background, aligned to the center:

A { color: black; font: bold 11px Arial; background-color: white; display: block; padding: 0px; align: center; }

Example B

Specify the rollover style for links under the classes .style1 and .style2. There are a few settings here that may be of use. These lines show how hyperlinks can be styled differently. For consistency, choose one style and apply to all links in the same section such as the menus and main body text. A common use is to remove the underlines from hyperlinks using 'text-decoration: none' e.g. Hyperlink. Conversely, retain the underline on links by specifying 'text-decoration: underline' e.g. Hyperlink

.style1 a:hover { border-left : 5px solid red; background-color: blue; color: white; }
.style1 a:link { color: #ffffff; text-decoration: none; }
.style2 a:visited { color: yellow; text-decoration: none; }
.style2 a:hover { background-color: blue; color: cyan; text-decoration: underline; }

Example C

Do you want to change the scroll bar properties? Here is a line showing various styles that can be applied to the scrollbar.

body { scrollbar-base-color: #FFFFFF; scrollbar-arrow-color:
#000000; scrollbar-3dlight-color: #C5F69D; scrollbar-darkshadow-
color: #C5F69D; scrollbar-face-color: #C5F69D; scrollbar-
highlight-color: #FFFFFF; scrollbar-shadow-color: #C5F69D;
scrollbar-track-color: #000000;
}

There are many more examples of style sheet usage. I hope that this article has at least introduced the versatility offered by the use of style sheets. Feel free to play around with the examples in styling consistency into those web pages.


DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware.

blog comments powered by Disqus
STYLE SHEETS ARTICLES

- 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...
- CSS3 Animated Image Gallery: Transitions
- CSS3 Properties: Fixed Heights with box-sizi...
- CSS3 Properties: Altering Strokes and 3D Eff...
- CSS3 Properties: Text-Stroke
- CSS3 Transitions: Width and Height Properties
- Creating a Drop Down Menu in CSS3
- Intro to CSS Transitions

Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Weekly Newsletter
 
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 
Support 



© 2003-2012 by Developer Shed. All rights reserved. DS Cluster 1 - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials