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
.
