|
|
CSS separates presentation and logical content.
There are three places to put CSS styles
- Linked: a separate file, linked to multiple XHTML pages.
- This maximizes re-usability. Write CSS styles in one
place, use them on multiple pages. A change to this one file
will change all pages that are linked to this file.
- Embedded: in the <head> section of an XHTML page.
- Re-use styles within page.
- Not as re-usable as linked sheets.
- If a CSS selector in an embedded section is identical to a CSS
selector in a linked stylesheet, the embedded section takes
precedence. Thus, this is ideal for overriding styles on a
page-specific basis.
- Inline: within a tag itself.
- Not re-usable at all.
- If a CSS selector in an inline section is identical to a CSS
selector in an embedded or linked stylesheet, the inline style takes
precedence. Thus, this is ideal for overriding styles on an
item-specific basis.
Examples
- Linked <link>
- <link
rel="stylesheet"
href="menu/ThemeOffice/theme.css"
type="text/css"
/>
- <link> element components:
- rel = style resource
- href = URL to file
- type MIME type for style sheets
- In this case., the page theme.css will hold the style information for this page.
- Embedded <head>
<head> <meta content="text/html; charset=ISO-8859-1"
http-equiv="content-type"> <style type="text/css">
a:link {text-decoration: none; font-family:arial, helvetica; font-size:14px;
color:white} a:visited
{text-decoration: none; font-family:arial, helvetica; font-size:14px;
color:white} a:active
{text-decoration: none; font-family:arial, helvetica; font-size:14px;
color:white} a:hover
{text-decoration: none; font-family:arial, helvetica; font-size:14px;
color:#B69243}
.class2 a:link
{text-decoration: none; font-family:arial, helvetica; font-size:8px; color:blue}
.class2 a:visited {text-decoration: none; font-family:arial, helvetica;
font-size:8px; color:blue} .class2
a:active {text-decoration: none; font-family:arial, helvetica; font-size:8px;
color:blue} .class2 a:hover
{text-decoration: none; font-family:arial, helvetica; font-size:8px; color:blue}
td {font-family:arial, helvetica; font-size:14px; color:white}
</style> </head>
<span style="border-collapse: separate; color: rgb(0, 0,
0); font-family: 'Times New Roman'; font-style: normal;
font-variant: normal; font-weight: normal; letter-spacing: normal;
line-height: normal; orphans: 2; text-align: auto; text-indent: 0px;
text-transform: none; white-space: normal; widows: 2; word-spacing:
0px; -webkit-border-horizontal-spacing: 0px; -webkit-border-vertical-spacing:
0px; -webkit-text-decorations-in-effect: none; -webkit-text-size-adjust:
auto; -webkit-text-stroke-width: 0px; font-size: medium; ">I
like Fuji apples.</style>
|