Defines the presentation of the page (the way things appear on the page).
You create style rules to define the page styles.
Enables the separation of the document presentation from the document content.
The term cascade means the priority level of how styles are applied.
Inline styles
Can override an embedded or external style rule.
Coded into each each HTML element each time you want to override the default, embedded, or external style.
Written inside an element tag much like an element attribute.
Affects only the element that contains the CSS code. For example
<p style="font-size: x-large; color: #ff9900">
This sets the font-size to x-large. The relationship between sizes is not precisely
defined in CSS, but there is a suggested scaling factor of about 1.2. The default size is
medium which is approximately 12 pt.
Also, the color is set to the hex value #ff9900. (see color names that validate below)
Embedded styles
Written in the head section of the page inside an HTML style tag.
Can override an external style rule.
Written for each element type, not each individual element.
Embedded Styles are written in the head between style tags. Syntax:
<style type="text/css"> (your css code)
</style>
The format for the css code is the same as the format for external styles. See below.
External styles
Linked from the head section of a page, but written as an external file.
Applies to all pages that link to the page.
Syntax for external style
selector {property:value}
Example will change the text of your page to blue: body {color: blue;}
Example will change the text inside of p tags: (see centering problems below)
p
{text-align:center;
color:black;
font-family:arial;
}
Do not start your external CSS page with the HTML page template. Only CSS is written on
an external style page.
Syntax for linking to external style
<link href="address of css page" rel="stylesheet" type="text/css" />
The link in the head page of the HTML page will link to the CSS page.
The link tag is self-closing.
Do not put the link tag inside of style tags. External styles do not use
the style tag.
The optional attribute media specifies the medium or media to which the style sheet should be applied. Possible values are
screen - for computer screens
print - for output to a printer (will show in print preview mode)
projection - for projectors
aural - for speech synthesizers
braille - for presentation on braille tactile feedback devices
tty - for character cell displays (using a fixed-pitch font)
tv - for televisions
all - for all output devices
Be very careful using CSS if your pages are used in multiple formats. The
settings for printer and screen are different on the browser. If someone
prints your page, it does not look the same as on the screen because the CSS for
the screen is ignored by the printer.
Full property table recommendation 23 April 2009 for CSS
There is some confusion about what web safe colors mean. This is a very old term that means nothing now.
A few years ago, many monitors did not have the color spectrum that current monitors have.
Because of that, the 216 web safe colors were established as working on multiple browsers.
Don't worry about that at all anymore.
But, the bigger problem is that there are only 16 colors that will validate in CSS.
