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">
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;
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.
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;
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;
Search WWH ::

Custom Search