HTML and CSS Reference
In-Depth Information
The following code shows an example of an embedded style sheet to set the h1
heading to the Garamond font-family, point size 32. This code would be added between
the <head> and </head> tags within <style> </style> tags:
<style type=”text/css”>
<!--
h1 {font-family: Garamond;
font-size: 32pt;}
-->
</style>
In this embedded style, you identify the code as a style sheet by using the "text/css" type.
You should also use comment tags in your embedded (internal) style sheet. The comment
tags are positioned just after the start style <style> and just before the end style </style>
tags. The <!-- is used to start a comment, and the --> code is used to end the comment.
These comment lines tell the browser to ignore whatever is between the comment lines
if the browser cannot interpret the code between. So if your Web page user has a browser
that is not current, it may not be able to interpret embedded style sheets. An older
browser would see the start of the comment <!-- and disregard anything between that
line and the end of the comment -->. Enclosing your style sheet within comment lines is
a good Web development technique. The h1 (header size 1) element is the
selector
, and
the remainder of the code is the
declaration
. The declaration sets the values for two dif-
ferent properties. The first property-value statement sets the h1 font-family to Garamond.
The second property-value statement sets the font size to 32 point. The style statement
is enclosed in curly brackets and each property-value statement ends with a semicolon.
This statement tells the browser to display all h1 headers in 32-point Garamond font. You
could use this embedded style sheet to easily change all h1 headings, in lieu of making the
same change with an inline style in each individual heading tag.
The various types of Cascading Style Sheets allow you to control many different
property values for various elements on a Web page. Table 3-7 lists six main properties
and related options that are used in CSS. A complete list of properties and property values
that can be used in CSS is included in Appendix D.
HTML/CSS Terminology
In HTML, a
tag
is a special
instruction to the browser
to specify how the Web
page is displayed. Many
tags have attributes that
help to further modify
what is displayed. In CSS,
a style
statement
is made
up of a selector and a
declaration. The part
of the style statement
that identifies the page
element(s) is called
the
selector
. The part
of the style statement
that identifies how the
element(s) should appear
is called the
declaration
.
A declaration includes at
least one type of style, or
property, to apply to the
selected element.
Table 3-7 CSS Properties and Options
Property Name
Options That Can Be Controlled
background
• color
• image
• position
border
• color
•
style
• width
font
• family
• size
• style
• variant
• weight
list
• image
• position
• type
