Site index | CSS Styles | Dreamweaver Extra

The use of CSS styles is now almost universal in web page design. Styles will control the appearance and the layout of the site.

Most site use an external CSS file so that the site style can be applied to all pages and style changes will cascade down through the pages.

CSS Locations

Within the text – inline CSS tags

At the top of the document within the head section as a style block

In an external CSS file linked to the web page

Dreamweaver will create these last two for you. You will need to type inline tags into the code.

 

CSS Syntax and Principles

So why do you need to know CSS syntax? Dreamweaver inserts the CSS code automatically into your document or external file , so it isn't obviously vital. However if you want to insert some custom CSS yourself or more importantly build a page directly from CSS for its layout it becomes somewhat more crucial.

Style command syntax is name colon value semicolon Case is insensitive

Eg color: red – within the bold tag it will be <b style=”color: red”>red text</a>

Within a style block or external file the syntax is b { color: red; }

Empty tag containers

There are two of these used to hold style commands <span> <div>

Eg <span style=”color: red”> this is red</span>

<div style=”color: red”> this is red</div>

If working with an advanced CSS tag (Set up in Dreamweaver as #box1 or whatever...)
<div id="box1">Content of box1...</div>

<div> is used as a block container to hold content specified for a block of content as in the <p> tag wheras <span> is used within a block to change style

This page is entirely laid out and styles using CSS.

 

 

Reference Files and Page Design

• CSS layout reference files contain refences to sample partially constructed pages. There are hyperlinks to these pages which can be saved and loaded into an editor

This page is entirely laid out and styles using CSS. There are no tables.