Using CSS to build web pages 
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> 
<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. 
The term ‘selector’ is used to describe the CSS commands in the same way that HTML uses 
‘tag’ Sometimes the opening commands are termed tags <style>, <div> , class= etc 
CSS (Cascading Style Sheets) is a language for describing the rendering of HTML and XML 
documents on screen, on paper, in speech, etc. To bind style properties to elements in the 
document, CSS uses selectors, which are patterns that match one or more elements. 

http://www.w3.org/TR/2001/CR-css3-selectors-20011113/#selectors 

Locations for CSS 

(a) Within the text – inline CSS tags 
(b) At the top of the document within the head section as a style block 
(c) In an external CSS file linked to the web page 
Dreamweaver will create these last two (b) and (c) for you) 


The style is specified in a style block in the head of the document. 
Dreamweaver creates these as its selector type ‘Class’ 
CSS usage when building web pages 

(1) Inline CSS selectors 
The style(s) can be specified within any HTML markup tag within the document 
eg 
<b style=”color: red”>a line of red text</a> 

In a style block in the head this would look like this 

<style type=”text/css”> 
b { colour: red } 
</style> 

You could embed different styles of say text colour within the document paragraph by using 
<span>…… </span> 

Dreamweaver works with redefining specific tags using its selector type ‘Tag’ 

(2) CSS Classes 
These are like sub tags. They will allow you to have different variants of a tag within a 
block or content section. 

The CSS notation for a class tag is a dot before the name. The name can be anything you 
wish to use to describe the class 

Eg in the style block 

<style type=”text/css”>
.emphtext { font-weight: bold; color: red }
</style>


In the body of the text it would appear as 

<span class=”emphtext”> this is the red bold text</span> 

(3) CSS Sub Classes 
You can set up the selector sub class in DW but need to implement in the code using 
<span> or <div> as DW is not helpful 

Sometimes called ‘contextual selectors’ These allow you to set up strings of two or more
selectors which are then assigned properties
The selectors are separated by a space as shown below for the style block in the head


<style type="text/css">
.specialtext b { font-style: italic; font-weight: bold; color: #FFFF00 }



</style> 

On the page code this would look like this: 

<span class="specialtext">
<b>text with yellow text in a document which has italics used with bold</b>
</span>


(4) ID Attribute 
You can set up the selector ID attribute in DW but need to implement in the code using 
<span> or <div> as DW is not helpful 

A CSS id tag has a hash mark # for its identifier.
You can again call this identifier what you want and it is specified in the style block in the
head by this. 


<style type=”text/css”> 

#emphtext { font-weight: bold; color: red } 
</style> 

In the body of the page code it look like this. 

<span id=”emphtext”> this is the red bold text</span> 

id tag is supposed to occur only once in a page. This is mainly used for layout design. 
Each layout container with its positioning and size, colours etc will be given a unique id 
Otherwise not much used for formatting as a result as most people use classes. 

CSS Text Syntax 

Style Parameters Description Usage 
font-weight bold, normal, lighter, 
bolder 
font-weight: bold 
font-style normal, italics, 
oblique 
font-style: italic 
font-family serif, sans-serif, 
monospace 
font-family: serif * font-family: Verdana, 
Arial, Helvetica, sans-
serif; 
font-size xx-small, x-small, 
small, , medium, 
large, x-large, xxlarge 
in, cm, mm, pt, pc, 
em, px 
font-size: 90% 
font-size: x-large 


color red, blue, green, 
yellow, aqua,, black, 
fuchsia, gray, lime, 
maroon, navy, olive, 
purple, silver, teal, 
white 
#FF0000 etc 
Colourname can be 
used or the hex 
number of the 
colour 
Get hex number 
from DW palette in 
Property Inspector 
Changes the font colour 
Note USA spellings! 
font-variant 
font Font: bold 19pt 
Courier 
** Allows the 
specification of a 
number of text elements 
in one command 
vertical-text-align top, middle, bottom, 
text-top,, text-bottom 
Alignment of elements 
with lines of text 
letter-spacing in, cm, mm, pt, pc, 
em, px 
letter-spacing: 2px Used to stretch space or 
reduce space between 
letters 
line-height in, cm, mm, pt, pc, 
em, px or use use 
fractions 1.5, 2 etc 
line-height: 1.5 Used to stretch space or 
reduce space between 
lines 
text-decoration underline, 
overline,linethrough, blink 
text-decoration: 
underline 
Used to provide 
underlining etc 
vertical-align 
word-spacing in, cm, mm, pt, pc, 
em, px 
Used to stretch space or 
reduce space between 
words 
text-transform capitalize, uppercase, 
lowercase, none 
text-transform: 
capitalize 
text-align left, centre, right, 
justify 
As in a word processor 
for a block of text 

* Dreamweaver puts font-family into groups as shown here. You need to know if the fonts 
used are serif or sans-serif 
** Note the font: command allows you to specify a number of parameters on one line 


CSS General Tags


Tag Closing Tag Description 
<span </span> 
Specifies a nonbreaking CSS container; used 
within sentences or headers to change individual 
words 
style= Provides specific CSS styles to apply to the span 
class= Identifies which CSS class should be applied to 
the span 
id= Identifies which CSS ID should be applied to the 
span 
<div </div> Specifies a CSS container that acts identically to 
the <p> tag; forces a line break before and after 
style= Specifies CSS styles to apply to the div 
class= Identifies which CSS class should be applied to 
the div 
id= Identifies which CSS ID should be applied to the 
div 
<link References external CSS style sheet by name 
type= Specifies a type of external link; for CSS it should 
be text/css 
href= 
Indicates the URL of the style sheet; by 
convention, separate CSS style sheets are named 
with a .css filename suffix 
<style </style> 
Specifies a block for CSS style definitions on 
Web page; should appear within the 
<head></head> block of the page 
type= Specifies the type of style sheet being used; for 
CSS always use text/css 


Text Syntax


Style Exemplary Usage Description 
font-
weight Font-weight: bold Specifies how much or how little to 
embolden a text passage 
font-style Font-style: italic Specifies whether to italicize, oblique, 
or leave the text passage non-italicized 
font-
family Font-family: serif 
Specifies which typeface to use for the 
text passage, as a comma-separated 
list, or which font-family to use from a 
small predefined list 
font-size Font-size: 80% 
Specifies the type size of the text 
passage in one of a wide variety of 
different units and values 
color Color: green 
Specifies the text color in the text 
passage; can be color names or color 
values specified in a variety of ways 
font-
variant 
Font-variant: small-
caps 
Transforms the text passage based on 
the specified variation; only small-caps 
and none are defined 
letterspacing Letter-spacing: -3px 
Changes the interletter spacing (also 
known as the kerning) to make it larger 
or smaller than the default 
word-
spacing Word-spacing: 15px Increases or decreases the spacing 
between words in the text passage 
line-height Line-height: 1.25 
Changes the spacing between lines of 
text (also known as the leading); a 
variety of values are accepted, 
including fractional values such as 1.5 
(for one and a half times normal 
spacing), 2 (for double spacing), and 
so on 
text-align text-align:center Specifies alignment for a block of text 
vertical-
align Vertical-align: sub 
Specifies vertical alignment of a text 
passage relative to other text on the 
line 
text-
decoration 
Text-decoration: 
underline 
Specifies one or more of a variety of 
simple text decorations 
text-
transform 
Text-transform: 
capitalize 
Specifies one of a number of text 
transformations involving upper- and 
lowercase letters 
font Font: 22pt monospace 
Indicates shorthand CSS notation that 
allows the specification of a number of 
different font characteristics