HTML and CSS Reference
In-Depth Information
Appendix D
CSS Properties and
Values
This appendix provides a brief review of Cascading Style Sheets (CSS) concepts and
terminology, and lists CSS level 1, 2, and 3 properties and values. The CSS3 properties
and values are indicated with a NEW icon. CSS3 utilizes a modularized approach to style
sheets, which allows CSS to be updated in a more timely and flexible manner. Many of the
new properties are not supported by all browsers as of yet. As stated previously, CSS3, like
HTML5, is a moving target. Browsers adapt new properties on an ongoing basis and will
continue to do so.
CSS Concepts and Terminology
CSS supports three types of style sheets: inline, embedded (or internal), and external (or
linked). A
style
is a rule that defines the appearance of an element on a Web page. Inline
styles are used to change the appearance (or style) for individual elements, such as a
heading or a paragraph. A
style sheet
is a series of rules that defines the style for a Web
page or an entire Web site. The
style statement
changes that specific element, but does
not affect other elements in the document. With an embedded style sheet, you add the
style sheet within the <style></style> container between the <head></head> tags of the
HTML document. An embedded, or internal, style sheet allows you to define the style
for an entire Web page. With a linked, or external, style sheet, you create a text file that
contains all of the styles that you want to apply, and save the text file with the file exten-
sion .css. You then add a link to this external style sheet on any Web page in the Web site
in which you want to use those styles. External style sheets give you the most flexibility
and are ideal to apply the same formats to all of the Web pages in a Web site. External
style sheets also make it easy to change formats quickly across Web pages.
The part of the style statement that identifies the page element that you want to
change is called the selector. In the example below, the selector is the h1 (heading size 1)
element. The part of the style statement that identifies how the element(s) should appear
is called the declaration. In this example, the declaration is everything between the curly
brackets {color: red}. This includes the property named color and the value named red.
h1 {color: red;}
