CSS Getting Started

Cascading Style Sheets

Getting started

Embedded CSS

place the following in the head element:

<style type="text/css">
<!-- hide styles from non-CSS browsers (not XHTML compliant)
  h5 { text-align:center; text-transform:uppercase;
       color:green; font-size:30pt; }
-->
</style>

place the following in the body element:
```
Hello<h5>hello</h5>hello
```

Inline CSS

place the following within an H5 tag in the body:

Hello
<h5 style="text-align:center; text-transform:uppercase;
              color:green; font-size:30pt;">
hello bob</h5>hello

Linked CSS

style sheets can also be contained in a separate file

example of separate stylesheet file:

store this in style1.css:

b {color:red;}
*.BOLDBLUE {color:blue;font-weight:bold;}

use it from this sample page:

<html><head>
<link rel="stylesheet" type="text/css" href="style1.css" media="all" />
</head>
<body>
<p class="BOLDBLUE">This is my test
  sheet<b> for </b> my external style.</p>
This is something else.
</body></html>

@imported stylesheets
- importing is similar to linking, but offers more possibilities for the future
- importing is useful for hiding advanced CSS from older browsers such as Netscape 4.x
- the following is a typical example (placed in head element):
```
<style type="text/css" media="all">
@import "wcil.css";
</style>
```
- in the sample just shown *.BOLDBLUE meant that all elements had access to this class
- .BOLDBLUE works the same as *.BOLDBLUE, except IE often interprets the * incorrectly
- if we typed p.BOLDBLUE, only p elements would have access
- class names are case-sensitive

Previous: CSS Overview

Next: CSS Properties

Navigation

Cascading Style Sheets

Getting started