Working with style classes - Wiley Publishing For Dummies HTML for Dummies, pdf

Sometimes you may want to create style rules that apply only to particular instances of an HTML markup element. For example, if you want to create a style rule that applies only to paragraphs that hold copyright information, you need a way to let the browser know that the rule has a limited scope.

To target a style rule more carefully, you can use the class attribute with a markup element. This bit of HTML has two kinds of paragraphs: a regular paragraph (without a class attribute) and a class attribute with the value of copyright:

This is a regular paragraph.

This is paragraph of class copyright.

To create a style rule that only applies to the copyright paragraph, add a period (.) and the value of the class attribute (copyright) after the paragraph selector in the style rule. The resulting rule looks like this:

p.copyright {font-family: Arial; font-size: 10pt; color: white;

background: black;}

This style rule specifies that all paragraphs of class copyright display white text on a black background in 10-point Arial font. Figure 11-3 shows how a browser applies the style rule only to a paragraph that has the proper class attribute defined.

Figure 11-3: Use classes to target your style rules more precisely.

You can also create style-rule classes that aren’t associated with any element, as in the following example:

.warning {font-family: Arial; font-size: 14pt; background: white; color: white;}

You can use this style class with any element by adding class="warning" to the element. Figure 11-4

shows how a browser applies the warning style to both the paragraph and heading, but not to the block quote in this HTML:

HTML 4 for Dummies, 4th Edition

Whether your goal is to build a simple, text-oriented Web site or one loaded with frames, graphics, and animation, this step- by-step book will put you on the right track.

Table of Contents

HTML 4 For Dummies, 4th Edition Introduction

Part I - Meeting HTML in Its Natural Environment

Chapter 1 - The Least You Need to Know about HTML and the Web Chapter 2 - HTML at Work on the Web

Chapter 3 - Creating Your First HTML Page Part II - Getting Started with HTML

Chapter 4 - Structuring Your HTML Documents Chapter 5 - Linking to Online Resources Chapter 6 - Finding and Using Images

Chapter 7 - Top Off Your Page with Formatting Part III - Taking HTML to the Next Level

Chapter 8 - HTML Tables Chapter 9 - HTML Frames Chapter 10 - HTML Forms

Part IV - Extending HTML with Other Technologies Chapter 11 - Getting Stylish with CSS

Chapter 12 - HTML and Scripting Chapter 13 - Making Multimedia Magic

Chapter 14 - Integrating a Database into Your HTML Chapter 15 - How HTML Relates to Other Markup Languages Part V - From Web Page to Web Site

Chapter 16 - Creating an HTML Toolbox Chapter 17 - Setting Up Your Online Presence Chapter 18 - Creating a Great User Interface Part VI - The Part of Tens

Chapter 19 - Ten Ways to Exterminate Web Bugs Chapter 20 - Ten HTML Do’s and Don’ts

Part VII - Appendixes Appendix A - HTML 4 Tags

Appendix B - HTML Character Codes Appendix C - Glossary

Index

Cheat Sheet- HTML 4 For Dummies, 4th Edition List of Figures

List of Tables List of Listings List of Sidebars

This is a paragraph of class warning.

<blockquote>This is a block quote without a defined class.</blockquote> This is a paragraph of class warning.