Sams Teach Yourself JavaScript in 24 Hours

By Michael Moncur

• 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
    • Style and Substance
    • Defining and Using CSS Styles
    • Using CSS Properties
    • Creating a Simple Style Sheet
    • Using External Style Sheets
    • Controlling Styles with JavaScript
    • Workshop: Creating Dynamic Styles
    • Summary
    • Q&A
    • Quiz
    • Exercises
  • 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

Using CSS Properties

CSS supports a wide variety of properties, such as color and text-align in the previous example. The following sections list some of the most useful CSS properties for aligning text, changing colors, working with fonts, and setting margins and borders.

Aligning Text

One of the most useful features of style sheets is the capability to change the spacing and alignment of text. Most of these features aren't available using standard HTML. You can use the following properties to change the alignment and spacing of text:

• letter-spacing— Specifies the spacing between letters.
• text-decoration— Allows you to create lines over, under, or through the text, or to choose blinking text. The value can be none (default), underline, overline, line-through, or blink. Blinking text is supported by Netscape 4 only.
• vertical-align— Allows you to move the element up or down to align with other elements on the same line. The value can be baseline, sub, super, top, text-top, middle, text-bottom, and bottom.
• text-align— Specifies the justification of text. This can be left, right, center, or justify. The justify option is supported by Netscape 6 and Internet Explorer 5.0 and later only.
• text-transform— Changes the capitalization of text. capitalize makes the first letter of each word uppercase; uppercase makes all letters uppercase; and lowercase makes all letters lowercase.
• text-indent— Allows you to specify the amount of indentation for paragraphs and other elements.
• line-height— This allows you to specify the distance between the top of one line of text and the top of the next.

Changing Colors and Background Images

You can also use style sheets to gain more control over the colors and background images used on your Web page. CSS includes the following properties for this purpose:

• color— Specifies the text color of an element. This is useful for emphasizing text or for using a specific color scheme for the document. You can specify a named color (for example, red) or red, green, and blue values (for example, #0522A5).
• background-color— Specifies the background color of an element. By setting this value, you can make paragraphs, table cells, and other elements with unique background colors. As with color, you can specify a color name or numeric color.
• background-image— Specifies a GIF format image to be used as the background for the element.
• background-repeat— Specifies whether the background image is repeated (tiled). The image can be repeated horizontally, vertically, or both.
• background-attachment— Controls whether the background image scrolls when you scroll through the document. fixed means that the background image stays still while the document scrolls; scroll means the image scrolls with the document (like background images on normal Web documents).
• background-position— Allows you to offset the position of the background image.
• background— This provides a quick way to set all of the background elements in this list. You can specify all of the attributes in a single background rule.

Working with Fonts

Style sheets also allow you to control the fonts used on the Web document and how they are displayed. You can use the following properties to control fonts:

• font-family— Specifies the name of a font, such as arial or helvetica, to use with the element. Because not all users have the same fonts installed, you can list several fonts. The CSS specification also supports several generic font families that are guaranteed to be available: serif, sans-serif, cursive, fantasy, and monospace.
• font-style— Specifies the style of a font, such as normal, italic, or oblique.
• font-variant— This value is normal for normal text, and small-caps to display lowercase letters as small capitals.
• font-weight— Allows you to specify the weight of text: normal or bold. You can also specify a numeric font weight for a specific amount of boldness.
• font-size— The point size of the font.
• font— This is a quick way to set all the font properties in this list. You can list all the values in a single font rule.

Margins and Borders

Last but not least, you can use style sheets to control the general layout of the page. The following properties affect margins, borders, and the width and height of elements on the Web page:

• margin-top, margin-bottom, margin-left, margin-right— These properties specify the margins of the element. You can specify the margins as an exact number or as a percentage of the page's width.
• margin— Allows you to specify a single value for all four of the margins.
• width— Specifies the width of an element, such as an image.
• height— Specifies the height of an element.
• float— Allows the text to flow around an element. This is particularly useful with images or tables.
• clear— Specifies that the text should stop flowing around a floating image.

Units for Style Sheets

Style sheet properties support a wide variety of units, or types of values you can specify. Most properties that accept a numeric value support the following types of units:

• px: Pixels (for example, 15px). Pixels are the smallest addressable units on a computer screen or other device. In some devices with non-typical resolutions (for example, handheld computers) the browser may rescale this value to fit the device.
• pt: Points (for example, 10pt). Points are a standard unit for font size. The size of text of a specified point size varies depending on the monitor resolution. Points are equal to 1/72 of an inch.
• ex: Approximate height of the letter x in the current font (for example, 1.2ex).
• em: Approximate width of the letter m in the current font (for example, 1.5em). This is usually equal to the font-size property for the current element.
• %: Percentage of the containing object's value (for example, 150%).

Which unit you choose to use is generally a matter of convenience. Point sizes are commonly used for fonts, pixel units for the size and position of layers or other objects, and so on.

Share This