|
|
Free Open Book
Sams Teach Yourself JavaScript in 24 Hours |
|
Defining and Using CSS StylesYou can define a CSS style sheet within an HTML document using the <style> tag. The opening <style> tag specifies the type of style sheetCSS is currently the only valid typeand begins a list of styles to apply to the document. The </style> tag ends the style sheet. Here's a simple example: <style type="text/css">
H1 {color: blue;}
</style>
Because the style sheet definition itself doesn't create any output on the page, you should place the <style> tags in the <head> section of the HTML document. Watch Out! You can only use style sheet rules within the <style> tags. HTML tags are not valid within a style sheet. Creating RulesEach element within the <style> tags is called a rule. To create a rule, you specify the HTML elements that it will affect, as well as a list of properties and values that control the appearance of those elements. We'll look at the properties in the next section. As a simple example, the following style sheet contains a single rule. All Level 1 headings are blue: <style type="text/css">
H1 {color: blue;}
</style>
Each rule includes three components:
Each rule uses braces to surround the list of properties and values, and a semicolon after each value. The semicolon is optional if you are only specifying one property and value. You can specify multiple HTML tags for the selector, as well as multiple properties and values. For example, the following style sheet specifies that all headings are blue, italic, and centered: <style type="text/css">
H1,H2,H3,H4,H5,H6 {color: blue;
font-style: italic;
text-align: center; }
</style>
By the Way If you make a rule that sets the style of the <body> tag, it will affect the entire document. This becomes the default rule for the document, but you can override it with the styles of elements within the body of the page. Setting Styles for Specific ElementsRather than setting the style for all elements of a certain type, you can specify a style for an individual element only. For example, the following HTML tag represents a Level 1 heading colored red: <h1 style="color: red; text-align: center;">This is a red heading.</h1> This is called an inline style because it's specified in the HTML tag itself. You don't need to use <style> tags with this type of style. If you have used both, inline style rules override rules in a style sheetfor example, if the preceding tag appeared in a document that sets H1 headings to be blue in a style sheet, the heading would still be red. Using id AttributesYou can also create a rule within a style sheet that will only apply to a certain element. The id attribute of an HTML tag enables you to assign a unique identifier to that element. For example, this tag defines a paragraph with the id attribute intro: <p id="intro">This is a paragraph</p> After you've assigned this attribute to the tag, you can include rules for it as part of a style sheet. CSS uses the pound sign (#) to indicate that a rule applies to a specific id. For example, the following style sheet sets the intro paragraph to be red in color: <style type="text/css">
#intro {color: red;}
</style>
Watch Out! An id value should define a single element in a page. Most browsers will enable you to define more than one element with the same id value, but this is not valid and will not work consistently. It's best to use classes, as described in the next section, when you need to apply the same styles to multiple elements. Using ClassesAlthough the id attribute is useful, you can only use each unique id value with a single HTML tag. If you need to apply the same style to several tags, you can use the class attribute instead. For example, this HTML tag defines a paragraph in a class called smallprint: <p class="smallprint">This is the small print</p> To refer to a class within a style sheet, you use a period followed by the class name. Here is a style sheet that defines styles for the smallprint class: <style type="text/css">
.smallprint {color: black;
font-size: 10px; }
</style>
By the Way You can use a class on any number of elements within a page. You can also define multiple classes for an element, separated by spaces: class="smallprint bold". When you do this, the CSS rules for all of the classes will be applied to the element. 
|
Main Menu |
| 500 Juegos Gratis | 500 Giochi Gratis | 500 Jeux Gratuits | 500 Jogos Gratis | 500 Kostenlose Spiele |
