|
|
home > css
> getting started with style sheets
getting started with style sheets
- Copy the style sheet on the previous
page (the text with a grey background only) into a text
editor such as NotePad
- Save as main.css in the /styles/ folder of your web site
- In your html documents, add <link rel="stylesheet"
href="/styles/main.css"> somewhere in between the
<head> & </head>
- Experiment with different stylesheet attributes
and other html tags to get the effect you want
using style sheets in dreamweaver
- Copy the style sheet on the previous
page (the text with a grey background only) into a text
editor such as NotePad
- Save as main.css in the /styles/ folder of your web site
- In Dreamweaver, open the page (or template) you wish to
attach the style sheet to
- Go to "Window > CSS Styles"
- Click on the "Attach Style Sheet" icon,
and browse to the /styles/main.css file to attach it
- The style sheet is now applied to the page (or all pages
from a template)
- More information on style
sheets and dreamweaver
classes
- The .right element in the style sheet on the previous
page is a class
- This can be attached to any applicable html
tag
- e.g. <p class="right">Text here
will be aligned to the right.</p>
- You can also span classes in between html tags:
- <p>Paragraph with a <span class="red">red</span>
word</p>
- n.b.: You would need to create the class "red"
classes in dreamweaver
an existing class
- Select the text you would like to apply the class
to
- In the CSS Styles floating menu ("Window >
CSS Styles"), click on the class to apply
to create a new class
- Click on the "New Style" icon on the
CSS Styles floating menu
- Select "Make Custom Style" (Class)
- Give the class a name
- Use the interface to select attributes for the
new class
further resources
|
navigation