|
26 Cascading Style Sheets (CSS) I - Basics
CSS provides a more capable replacement to the use of attributes within tags to control how an HTML
is formatted. Instead of using attributes
for
every tag on the HTML page, CSS allows the creation of a
single set of rules which can control the display of one, or all, tags
in
the entire documents. Even better,
the CSS rules can be kept
in
external files
-
to be applied to every web page on a web site, controlling
the look of a web site from a single, common set of rules.
There are roughly 3 ways
in
the CSS rules, or styles, can be applied.
1. Placed within the HTML document between a
<
style
></
style
>
tag pair.
2. Placed within an individual HTML tag
3. Placed
in
a separate file which can be called by the HTML page.
Style rules are written to apply to the contents of one or more HTML tags. In
this
example, a style
rule is written which applies to all
<
h2
>
tags, causing the text to be displayed
in
green. When placed
in
the
<
head
>
section of the HTML page, every
<
h2
>
in
the entire document will be affected.
<
style
>
h2
{
color
:
green
}
</
style
>
The rule takes the form of tag
{
attribute
:
value
}
More than one attribute can be placed
in
a rule like the following example, where the
attribute
:
value pairs are separated by semicolons.
<
style
>
h2
{
color
:
green ; font
-
weight
:
bold
}
</
style
>
More than one rule can be included between the
<
style
>
tags. In
this
next example, a second rule is
added to make the content of all
<
p
>
tags green also.
<
style
>
h2
{
color
:
green
}
p
{
color
:
green
}
</
style
>
This could be written as a single rule, like
this
, where multiple HTML tags are listed
in
front of the
one or more attribute
:
pairs
<
style
>
p h2
{
color
:
green ; font
-
weight
:
bold
}
</
style
>
You can give an individual rule a name of its own, which would be called a
class
, like
this
:
<
style
>
.myclassname
{
color
:
green
}
//note the dot-name nomenclature at the start of the rule
</
style
>
Then,
in
any HTML tag where you want the rule to apply, add the
class
attribute like the next example
to have the rule apply to
this
instance of the HTML tag
:
<
p
class
=
"myclassname"
>
You can narrow down the range of HTML tags to which a
class
applies by changing the classname
as shown
in
the next example
:
<
style
>
p.myclassname
{
color
:
green
}
</
style
>
Here, the
class
would only apply to
<
p
>
tags whose
class
attribute is
'myclassname'
. The rules would
not apply to any other type of HTML tag, regardless of what the value of the
class
attribute.
If desired, you can write a style which can be applied to one, and only one, element of a given type of
HTML tag
-
such as a specific instance of a
<
p
>
or an
<
h3
>
tag. This is done by setting the HTML
tag
'id'
attribute to a unique value, as
in
the following example
:
<
style
>
#uniqueID
{
color
:
green
}
//note the # sign which starts the rule
</
style
>
This rule would apply to the tag whose id was set to
'uniqueID'
, as
in
this
HTML tag example
:
<
p id
=
'uniqueID'
>
Used
in
this
way, the rule can be applied to only one tag of a particular HTML tag type, but there
can be multiple (different) HTML tags types which have the id, as
in
these examples of HTML tags
:
<
p id
=
'uniqueID'
>
<
h2 id
=
'uniqueID'
>
<
div id
=
'uniqueID'
>
Finally, the ID definition can be restricted to apply to a single HTML tag type by placing the HTML tag
in
front of the pound sign, like
this
:
<
style
>
p#uniqueID
{
color
:
green
}
</
style
>
The p# which starts the rule means
this
applies to the single
<
p
>
tag which has a matching ID.
Another use
for
the ID of an element is found
with
the getElementByID() method of the document
object. By assigning an HTML tag (element)
with
an ID attribute value, the getElementByID()
method can be use to get a reference to that element
for
use within your JavaScript programs.
Here
's an example:
<
p id
=
"unique"
>
Content of the tag
</
p
>
Finally, CSS recognizes comments, which is text surrounded by
/* and */
|
