HTML and CSS Reference
In-Depth Information
exerCiSe: redeFining the deFault lOOk OF htMl tagS
This exercise shows how much you can achieve by redefining the default look of HTMl tags with type
selectors. Don't worry if you don't understand the properties and values. They will be described in detail in
subsequent chapters. in any case, you'll find most of them self-explanatory.
1. open
basic.html
in the
begin
folder for this chapter.
2. Create a subfolder called
css
within the
begin
folder.
3. Create a new blank file in the
css
folder and save it as
basic.css
.
4. Attach the new style sheet (
basic.css
) to the web page by adding the following
<link>
tag just before the closing
</head>
tag in
basic.html
:
<link href="css/basic.css" rel="stylesheet">
5.
Redefine the default settings for the
<body>
tag by adding the following style
definition to basic.css:
body {
background-color: #F7F7F7;
color: black;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
}
6.
save both pages, and load
basic.html
into a browser. The background color of the
page is now a very light gray, the text is black, and the default font has changed.
The font affects all text on the page because the headings, paragraphs, and list
items are all descendants of the
<body>
tag, so they inherit the style automatically.
strictly speaking, there's no need to specify the text color as black, because that's
the default. But it's always a good idea to specify both the background color and text
color in the
body
style rule.
7.
Change the font and text color for the headings by adding the following rule:
h1, h2, h3 {
font-family: Tahoma, Geneva, sans-serif;
color: teal;
}
8.
save the style sheet, and reload
basic.html
in a browser. The font and text color of
the headings has changed, overriding the
body
rule. The other text still inherits the
styles from the earlier rule. The order of the rules isn't important here. The headings
have changed because the
h1
,
h2
, and
h3
type selectors target them directly, so they
no longer inherit the font or text color from the
<body>
.
9. Change the text color of the
<dfn>
and
<code>
elements by adding the following
styles to
basic.css
:
dfn {
color: maroon;
}
