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. |
/ 5 
