Cascading Style Sheets (CSS) give Web site developers more control over how pages are displayed
With CSS, designers can create style sheets that define how different elements, such as headers and links, appear
These style sheets can be applied to any Web page
"Cascading" means that multiple style sheets can be applied to the same Web page -- company, division, department, section ... all cascading down to influence the style of a page
Unlike HTML, CSS is designed solely to define appearance as efficiently as possible
CSS can exist either within HTML or as a linked document, letting developers separate a Web page's content (marked up in HTML) from its presentation (defined by CSS)
Style sheets are groups of style rules that define how an HTML element appears in a Web browser -- for example, an H3 heading could be red and italic
Can define styles either within an HTML document or in an external file related to the HTML document
As an external file, single style sheet can affect multiple pages -- even a whole site
More than one style sheet can be used on the same document
If there are conflicting styles for the same HTML element, innermost definition (one closest to the individual tag) wins
Can define styles in the body of the document by adding the style attribute to an HTML tag
One H3 header is red and italic
H3 is the selector
font-style: italic and color: red are property/value pairs
A partial list of property/value pairs....
font-family (font-family: "Helvetica")
font-family (font-family: "Helvetica", "Times Roman")
font-family (font-family: sans-serif)
font-size (font-size: 24pt)
font-size (font-size: 2em) -- twice normal size
font-style (font-style: italic)
font-weight (font-weight: bold)
line-height (line-height: p%) -- space between lines
color (color: red)
color (color: #24FE9C)
background-color
background-image
text-indent
text-align
text-transform
text-decoration
font-variant
position: absolute -- specify precise position
position: fixed -- element does not move when window scrolled up or down
position: relative -- relative to its natural location
z-index -- back-to-front positioning
Inline font-size, font-weight, color
Absolute positioning of elements
Best way to define styles for a single HTML document is within the head of the document
Place the selectors and their style definitions inside comment tags nested within a STYLE tag
CSS lets you specify style for all H3 tags in a single step by defining what is called a selector:
H3 { font-style: italic; color: red }
font-style: italic has the same
effect as
color: red has the same effect as
Once the style above is applied to the HTML document, every H3 element will be red and italic, while retaining its inherent HTML characteristics
All H3 headers are red and italic
Type attribute of STYLE tag defines type of style sheet being used -- in this case, CSS
A selector preceded by a period is a CLASS
.blue { color: blue }
Classes can be applied to any selector
Adding background images and indentation
<SPAN> ... </SPAN> is a Span
Style applied to a Span stays in effect for the whole Span
Relative positioning of elements using SPAN
<DIV> ... </DIV> is a Division
Style applied to a Division stays in effect for the whole Division
Divisions usually larger than Spans
Setting box dimensions and aligning text using DIV
Setting box dimensions and aligning text using scroll
Defining styles in the HTML document is useful if you want to affect only one Web page, but what if you want to use the same styles for several pages -- or even a whole site?
Create an external style sheet and link to it from your HTML documents
First, create a file (I will call mine sty.css) that contains just this text. (Any file name that ends in .css will work):
In any HTML document use a LINK tag to call the style sheet in the document's head:
Often a combination of methods is the best way to apply styles
Using a combination of methods
Selectors can be grouped:
If you have a standard style sheet for a group of Web pages (like sty.css), a simple edit of that style sheet effectively changes all the pages in that group.
How can I remove the underlining from hyperlinks?
Styles can be applied to link elements based on their state
A:link { color: green)
A:visited { color: black}
A:hover { color: white; background-color: blue}
(Some of the above about CSS is adapted from Get Started With Cascading Style Sheets and is used with permission.)