Sams Teach Yourself JavaScript in 24 Hours
- Table of Contents
- Copyright
- About the Author
- Acknowledgments
- We Want to Hear from You!
- Reader Services
- Introduction
- Part I: Getting Started
- Hour 1. Understanding JavaScript
- Hour 2. Creating a Simple Script
- Hour 3. How JavaScript Programs Work
- Part II: Learning JavaScript Basics
- Hour 4. Using Functions and Variables
- Hour 5. Using Strings and Arrays
- Hour 6. Testing and Comparing Values
- Hour 7. Repeating Yourself: Using Loops
- Hour 8. Using Math and Date Functions
- Part III: The Document Object Model (DOM)
- Hour 9. Working with the Document Object Model
- Hour 10. Responding to Events
- Hour 11. Using Windows and Frames
- Hour 12. Getting Data with Forms
- Hour 13. Using Graphics and Animation
- Part IV: Moving on to Advanced JavaScript Features
- Hour 14. Creating Cross-Browser Scripts
- Hour 15. Creating Custom Objects
- Hour 16. Working with Sounds and Plug-Ins
- Hour 17. Debugging JavaScript Applications
- Part V: Working with Dynamic HTML (DHTML)
- Hour 18. Working with Style Sheets
- Hour 19. Using Dynamic HTML (DHTML)
- Hour 20. Using Advanced DOM Features
- Part VI: Putting It All Together
- Hour 21. Improving a Web Page with JavaScript
- Hour 22. Creating a JavaScript Game
- Hour 23. Creating DHTML Applications
- Hour 24. JavaScript Tips and Tricks
- Part VII: Appendices
- Appendix A. Other JavaScript Resources
- Appendix B. Tools for JavaScript Developers
- Appendix C. Glossary
- Appendix D. JavaScript Quick Reference
- Appendix E. DOM Quick Reference
Creating a Simple Style Sheet
As an example of CSS, you can now create a Web page that uses a wide variety of styles:
- For the entire body, the text is blue.
- Paragraphs are centered and have a wide margin on either side.
- Level 1, 2, and 3 headings are red.
- Bullet lists are boldface and green by default.
The following is the CSS style sheet to define these properties, using the <style> tags:
<style type="text/css">
BODY {color: blue}
P {text-align: center;
margin-left:20%;
margin-right:20%}
H1, H2, H3 {color: red}
UL {color: green;
font-weight: bold}
</style>
Here's a rundown of how this style sheet works:
- The <style> tags enclose the style sheet.
- The BODY section sets body's default text color to blue.
- The P section defines the style for paragraphs.
- The H1, H2, H3 section defines the style for header tags.
- The UL section defines a style for bullet lists.
To show how this style sheet works, Listing 18.1 shows a document that includes this style sheet and a few examples of overriding styles for particular elements. Figure 18.1 shows Internet Explorer's display of this example.
)
Figure 18.1 The style sheet example as displayed by Internet Explorer.
Example 18.1. An example of a document using CSS style sheets
<html>
<head><title>Style Sheet Example</title>
<style type="text/css">
BODY {color: blue}
P {text-align: center;
margin-left:20%;
margin-right:20%}
H1, H2, H3 {color: red}
UL {color: green;
font-weight: bold}
</style>
</head>
<body>
<h1>Welcome to this page</h1>
<p>The above heading is red, since we specified that H1-H3 headers
are red. This paragraph is blue, which is the default color for
the entire body. It's also centered and has 20% margins, which we
specified as the default for paragraphs.
</p>
<p STYLE="color:black">This paragraph has black text, because it overrides
the default color in the paragraph tag. We didn't override the centering,
so this paragraph is also centered.</p>
<ul>
<li>This is a bullet list.
<li>It's green and bold, because we specified those defaults for bullet lists.
<li STYLE="color:red">This item is red, overriding the default.
<li>This item is back to normal.
</ul>
<p>This is another paragraph with the default paragraph style.</p>
</body>
</html>
Using External Style Sheets | Next Section
Account Sign In
View your cart