HTML and CSS Reference
In-Depth Information
Element Selectors
As shown in the previous sections, the simplest rules can be applied to all occurrences of a
particular tag, such as <p> . These selectors are called element selectors and are simply used
as follows:
element-name { /* properties */ }
As an example, to set the line spacing for all paragraphs, use a rule such as the following:
p {line-height: 150%;}
To set a value for all elements, the wildcard selector * (asterisk) can be used. For example,
to remove the margins on all elements, use
* {margin: 0;}
To set a value for more than one but fewer than all elements, we can group elements by
separating them with a comma. For example, if you want the tags <h1> , <h2> , and <h3> to
have the same basic background and color, you could apply the following rule:
h1, h2, h3 {background-color: yellow; color: black;}
If it turns out that each particular heading should have a different custom size, you can
then add that characteristic by adding other rules:
h1 {font-size: 200%;}
h2 {font-size: 150%;}
h3 {font-size: 125%;}
The result, as we'll see later, is to combine all the rules to form the final rendered style.
Although associating all elements with a certain look is useful, very often designers want
to create very specific rules that are applied only to certain elements in a document or that
can be combined to form more complex rules.
id Selectors
By applying an id rule, a style can be applied to just a single tag. For example, if we name a
tag with a unique id attribute as follows
<tag id=" id-value "> Affected Text </tag>
we can then reference it with a CSS selector #id-value . For example,
<h1 id="FirstHeading"> This is the First Heading! </h1>
can be styled with
#FirstHeading {background-color: green;}
and this would apply a green background to the element that has its id attribute set to
FirstHeading .
Search WWH ::

Custom Search