CSS Tutorials:
linking CSS to html
There are many ways to link style sheets to HTML. If you
have an External Style Sheet (all
our Templates have an External Style Sheet) you can simple
link or import it to your html document. An
External
Style Sheet can be
written in any text editor. The file should not contain any
html tags and should be saved with a .css extension.
You
can also create an Internal Style
Sheet or Inline
Styles.
External Style Sheet
An External Style Sheet is ideal when the
style is applied to many pages. With an external style sheet,
you can change
the look of an entire Web site by changing one file. Each
page must link to the style sheet using the <link> tag.
The <link> tag goes inside the head section:
< head>
<link href="mystyle.css" rel="stylesheet" type="text/css">
</head> |
Dreamweaver gives you an
easy way to link a css file to your page. Use the CSS
Styles panel to create, view properties of, and apply
CSS styles to elements in a document.
To open the CSS Styles panel, do one of the following:
|
 |
-
The Link External
Style Sheet dialog box appears.
-
In the File/URL text box, enter the path to mystyle.css
or click Browse and in the dialog box that
appears navigate to the mystyle.css file, then
click OK to
select it.
-
In the Link External Style Sheet dialog box, for
Add As, select Link.
-
Click OK and the style attributes
are immediately applied.
|
|
A style sheet may be imported with CSS's @import statement.
The <style> tag goes inside the head section:
< style type="text/css" >
< !-- @import url(http://www.yoursitename.com/mystyle.css);-->
< /style>
|
The browser will read the style definitions from the file
mystyle.css, and format the document according to it. An example of a style sheet file is shown below:
hr {color: red}
p {margin-left: 20px}
body {background-image: url("images/back40.gif")}
|
Internal Style Sheet
An
internal style sheet should be used when a single document
has a unique style. You define internal styles in the head
section by using the <style> tag, like this:
< head>
< style type="text/css">
< !--
hr {color: red}p {margin-left: 20px}body {background-image: url("images/bkg.gif")}
-->
< /style>
< /head>
|
The Style attribute
may be applied to any Body element. Use this method when
a style is to be applied to a single occurrence of an element.
Inline Styles
To
use inline styles you use the style attribute in the relevant
tag.
The style attribute can contain any CSS property. The
example shows how to change the color and the left margin
of a paragraph:
< p style="color: red; margin-left:
20px">Paragraph Text</p>
|
Next step: Next
Step (coming
soon) |
