Professional Documents
Culture Documents
PROJECT 6: CASCADING STYLE SHEETS
Showcolate (USA) has contacted you to build a Web site to promote their franchising business.
They want a Web site that they can easily alter in minimum time, whenever they need to. The
Web site should project a consistent look and style in all its pages. The Web pages should be made
‘printerfriendly’, enabling only specific page elements relevant for print. Showcolate wants
complete control over the layout and design of the Web site. Your task is to create and apply a
Cascading Style Sheet (CSS) for the Web site to take control over the layout and maintain
consistency throughout the Web pages.
A style sheet offers a great deal of flexibility in applying styles. You can apply one style to a
single element of a page or many elements at once. You can apply similar styles to multiple Web
pages in a Web site, or use different styles for different pages. You can either create the complete
style sheet first and then apply styles to the Web page, or create styles one after the other while
building the Web page simultaneously.
Prior HTML knowledge is not necessary for you to create a style sheet in Dreamweaver. You are
required to define rules in a style sheet. A rule consists of a selector (an HTML element such as
h1, ul, p, body, etc.) and attributes (font, color, width, height, etc.) applied to the selector. You can
create different selectors in a style sheet and apply different attributes to them. For example, if you
want to create a style for the body of a Web page, define a rule in the style sheet which contains a
selector (body) and the attributes you apply. Whenever you want to modify the body of the page,
simply modify the rule you have defined. A style sheet is a collection of all such defined rules.
Dreamweaver uses different types of selectors; you will learn how to use them as you move on.
Before creating a cascading style sheet either for a single Web page or for the entire Web site
you need to have a clear idea how the Web page or site should look. This helps you figure out
what styles are to be created in the style sheet to design the page or site according to the
requirements. You can visualize the whole layout including fonts, colors, margins, header, and
Page 2 of 109
footer prior to creating the style sheet.
Styles are of three types: External styles, Embedded styles, and Inline styles. How to use these
styles is discussed in detail in the following section.
DREAMWEAVER FOUNDATIONS
EXTERNAL, EMBEDDED, AND INLINE STYLE SHEETS
Dreamweaver contains three types of styles: External styles, Embedded styles, and Inline styles.
You can make the best use of styles only when you have a clear idea of these style types. The real
purpose and potential of a style can be achieved substantially only when you choose the
appropriate style type. However, all three types of styles can be applied to the same HTML page
at the same time.
External Style: An external style sheet is a separate file with CSS rules, which can be attached to
a number of HTML pages. As a single external style sheet can customize many Web pages at a
time, it can be used to maintain the entire Web site easily and quickly. This advantage of using an
external style sheet makes it preferable to most Web developers. You can attach different external
style sheets to different HTML pages, but note that one HTML page does not take more than one
external style sheet.
An external style sheet is saved as a .css file and is uploaded to the Web server along with the
Web pages to which the file is attached (ensure that the .css file is saved in the same location
where all the Web pages are stored). This facility of uploading a single .css file to manage all the
Web pages makes the external style more preferable to the other two styles. As embedded and
inline styles are to be applied directly in HTML pages, you need to upload all the pages to modify
the styles. This can prove to be tedious and timeconsuming.
You can use two methods to work with an external style sheet: link method and import method.
Though link method is the default method in Dreamweaver, you can also use the import method.
When you use a link method to attach a style sheet (for example, styles.css) to an HTML page, a
code is added above the style tags in the following way:
<link href="Styles.css" rel="stylesheet" type="text/css" />.
If the import method is used to attach the same style sheet, a code is added within the style tags in
the following way:
<style type="text/css">
<!
@import url("Styles.css");
>
</style>
Page 3 of 109
You can use either method, but compared to the import method, the link method supports all
browsers in a better way.
Embedded Style: An embedded style is a style that is embedded directly in the HTML page
within style tags (<style>…</style>). An embedded style affects only the particular HTML page
in which it is placed. By using an embedded style, you can control the elements throughout the
page. The two tags <style> and </style> denote the beginning and ending of the style. Though
most Web designers prefer to use an embedded style within header tags, it can be placed
anywhere in a page.
For example, when you apply an embedded style to a heading and paragraph, the code will be:
<style type="text/css">
<!
H1 {
fontfamily: Arial;
}
P {
color: Blue;
}
>
</style>
The set of tags <! and > are used to prevent a few old browsers from displaying the style rules.
Inline Styles: An inline style is used to apply directly and instantly to an individual element
within a tag, affecting only that single element of the HTML page. By applying an inline style,
you can define specific attributes to an element within a tag. An inline style can be applied easily
and quickly, but it is limited only to the tag in which the element is found.
For example, if you apply a font size and color to a paragraph, the inline style looks as follows:
<P style="fontsize: 10pt; color: blue"> </P>
Though you may use any of the three styles, the external style is recommended.
Create Element Selectors
As discussed earlier, a style sheet is a collection of defined rules which are made up of
selectors and the attributes applied to them. Creating selectors in a style sheet is
crucial. You can use different kinds of selectors in a style sheet, and element selectors
are basic and easytouse selectors. An element selector selects an HTML element
(such as p, body, h1) in an HTML page and applies certain attributes to it. For
Page 4 of 109
example, if you create an element selector for the main heading in an HTML page
with the color blue, the structure of the element selector looks like:
h1 {
color: blue;
In this exercise, you will create a new cascading style sheet and a few element
selectors in it.
1. If Dreamweaver is not open, launch it now.
2. Choose File>New.
3. In the New Document dialog box, choose Blank Page.
4. Choose CSS from the Page Type list and click the Create button.
01_DW_06.TIF
A new cascading style sheet is created.
Page 5 of 109
02_DW_06.TIF
5. Choose File>Save on the menu or press Command/ControlS to save the page. In
the Save As dialog box, navigate to the CSS folder in the root of the Showcolate
Web site and name the page as ‘master.css’.
The new cascading style sheet is saved with the name master.css. You will create all
types of selectors in this style sheet. Ensure that while naming a style sheet, you have
selected the Style Sheets (*.css) extension in the Save as type box just below the File
name box.
Page 6 of 109
03_DW_06.TIF
6. Choose Window>CSS Styles or click CSS in the panels list to view the CSS panel.
Page 7 of 109
04_DW_06.TIF
You can see master.css in the CSS panel with no styles defined. The styles that you
define will be displayed in the list. You can also open the CSS panel by using
Shift+F11.
Page 8 of 109
05_DW_06.TIF
DREAMWEAVER FOUNDATIONS
CSS PANEL IN DEPTH
The CSS panel plays a significant role in creating and modifying styles. CSS styles are displayed
in two modes All mode and Current mode. The All mode displays external and embedded
styles, but omits inline styles. The Current mode displays the style of the current selection,
irrespective of the type of style – whether external, embedded or inline.
Page 9 of 109
The All mode has two panes All Rules and Properties.
All Rules pane: It lists all the created styles.
Properties pane: It displays the properties of the selected style.
The Current mode has three panes Summary for Selection pane, Rules pane, and Properties
pane.
Summary for Selection pane: It displays the properties and values applied to a selection.
Rules pane: It displays either the rules attributed to the selection or the information of the
selected property in the Summary for Selection pane. The two buttons at the top right of the
Rules pane help you switch between these two options.
Properties pane: It displays the properties of the selected rule.
When you select a rule, the properties and values of the rule are displayed in the Properties pane.
Dreamweaver enables you to modify the properties of the rule or set new properties to the rule in
the Properties pane itself. There are three ways in which you can view the properties and values in
the Properties pane Show category view, Show list view, and Show only set properties. You can
choose any of the three views, but by default, you can see the Show only set properties option.
Make your choice by clicking the appropriate button at the bottom left of the Properties pane.
Show category view: It lists the properties and values of the selected rule into nine
categories that are seen in the CSS Rule definition dialog box Type, Background, Block,
Border, Box, List, Positioning, Extensions, and Tables, Content, Quotes. In this view, you
can add new properties in a category by clicking the + sign of the category.
Show list view: It lists all the CSS properties in the alphabetical order. Those properties that
are attributed to the selected rule appear in blue.
Show only set properties: It displays only the list of attributed properties and an option to
add a new property. By clicking the Add Property button at the bottom of the list, you can
choose any of the new properties that are found in the dropdown list in an alphabetical
order. This is a handy option because it lists only those properties that are set and enables
you to create a new property easily.
There are four icons at the bottom right of the Properties pane.
Attach Style sheet: This icon is used to attach an external style sheet to the HTML page.
You can browse and attach the saved style sheet to the HTML page using the import or link
method.
New CSS Rule: This icon is used to create a new CSS rule. You can create different types of
selectors, such as element selectors, class selectors, and pseudo selectors.
Edit Style...: This icon is used to edit an existing CSS rule. When you select a rule and click
this icon, the CSS Rule definition dialog box is displayed. You can modify properties and
Page 10 of 109
save changes.
Delete CSS Rule (or Property): This icon is used to delete an entire rule, or just a single
property of the rule.
7. Click the New CSS Rule icon at the bottom right of the Properties pane.
06_DW_06.TIF
The New CSS Rule dialog box is displayed with three types of selectors: Class, Tag,
and Advanced.
07_DW_06.TIF
Page 11 of 109
8. In the New CSS Rule dialog box, click the Tag radio button.
9. In the Tag field, type ‘body’ or select ‘body’ from the dropdown list.
10. In the Define in area, click ‘This document only’ radio button.
08_DW_06.TIF
11. Click OK.
You can see a new element selector ‘body’ created in master.css. It defines the body of
the document. Body includes contents such as images, text, colors, graphics etc. The
properties and values of the selector are displayed within parentheses. Note that each
property is separated by a semi colon. The ‘body’ selector is also displayed in the All
mode in the CSS Panel.
Page 12 of 109
09_DW_06.TIF
The CSS Rule definition for body dialog box is also displayed. In this dialog box, you
can define the properties and values for the body selector.
10_DW_06.TIF
DREAMWEAVER FOUNDATIONS
Page 13 of 109
can specify values individually (top, right, bottom, left) or select the check box Same for all.
List: To specify the list settings. Type specifies the type of a list from the given options –
disc, circle, square, decimal, lowerroman, upperroman, loweralpha, and upperalpha. The
Bullet list image can be set by typing the path or by browsing the image from the location.
Position specifies the list position as inside or outside i.e., the list either wraps and indents or
wraps to the left margin.
Positioning: To specify the position of the CSS elements. Type determines the position of
the element as absolute, fixed, relative, and static. Absolute type enables the element stay
stable on the page, irrespective of the positioning of the other elements. In fixed type, the
element is positioned according to the window size. In relative type, the element position is
based on the position of other elements on the page. In static type, the element is positioned
as it appears in an HTML page. Width and height determine the width and height of the
element. Visibility displays the element in three states: Inherit, visible, and hidden. If no
visibility property is selected, the element shows the inherit property of the element’s parent.
The visible option displays the element. The hidden option hides the element. Zindex shows
the depth of an element. Elements with high Zindex appear above the elements with low z
index. Overflow determines how the element should appear when the element exceeds the
allotted space – visible, hidden, scroll, or auto. Placement specifies where the element can be
positioned. Clip specifies the visible parts of an element.
Extensions: To give a page break and apply visual effects. Page break option sets a page
break for printing before or after the element. You can select a page break option from the
dropdown list. Cursor specifies the point type when you place the pointer over the element.
Filter changes the appearance of the element when you select a filter effect from the drop
down list.
12. In the CSS Rule definition for body dialog box:
Click Type in the Category pane. In the Font dropdown list, click ‘Arial,
Helvetica, sansserif’ combination. In the Size text box, type ‘100’ and select ‘%’
from the adjacent dropdown list. In the Color text box, type ‘#666’ or select the
color using the color picker.
Page 15 of 109
11_DW_06.TIF
Click Background in the Category pane. In the Background color text box, type
‘#999’ or select the color using the color picker.
12_DW_06.TIF
In the Box pane, type ‘0’ in the top text boxes of the Padding and Margin areas.
Select Same for all check boxes in both areas to apply the same value for right,
bottom, and left positions.
Page 16 of 109
13_DW_06.TIF
13. Click OK.
All the properties and values attributed to the ‘body’ selector are displayed within
parentheses.
14_DW_06.TIF
14. Click the New CSS Rule icon at the bottom right of the Properties pane. In the
New CSS Rule dialog box, click the Tag radio button.
15. In the Tag field, type ‘h1’ or select ‘h1’ from the dropdown list. Click OK.
Page 17 of 109
15_DW_06.TIF
The CSS Rule definition for h1 dialog box is displayed. H1 defines the largest heading
in the document.
16. In the CSS Rule definition for h1 dialog box:
Click Box in the Category pane. Type ‘0’ in the top text boxes of the Padding and
Margin areas. Select Same for all check boxes in both areas to apply the same
value for right, bottom, and left positions. Click OK.
16_DW_06.TIF
A new element selector ‘h1’ is created in master.css. The properties and values
attributed to ‘h1’ are displayed within parentheses.
Page 18 of 109
17_DW_06.TIF
You are now creating different types of element selectors. You can modify their
properties and values in the CSS Rule definition box.
17. Repeat steps 14, 15 and 16 to create element selectors h2, h3, and h4 with the
same padding and margin values.
18_DW_06.TIF
H2, h3, and h4 define other headings subsequent to h1.
Page 19 of 109
18. Click the New CSS Rule icon and type or select ‘a’ in the Tag field. Click OK.
19_DW_06.TIF
The element selector ‘a’ defines an anchor which is used to create a link to another
document or to create a bookmark inside the same document.
19. In the ‘CSS Rule definition for a’ dialog box:
Click Type in the Category pane. Type ‘#999’ in the color text box or select the
color using the color picker. Select the none check box in the Decoration area.
20_DW_06.TIF
20. Click OK.
The element selector ‘a’ is created in master.css.
Page 20 of 109
21_DW_06.TIF
21. Click the New CSS Rule icon and type or select ‘li’ in the Tag field.
22_DW_06.TIF
The element selector ‘li’ defines a list in the document.
22. In the CSS Rule definition for li dialog box:
Click List in the Category pane. Type or select ‘none’ in the Type field.
Page 21 of 109
23_DW_06.TIF
23. Click OK.
DREAMWEAVER FOUNDATIONS
USING THE LIST PROPERTIES
List Properties allow you to place the listitem marker. You can also change between different list
item markers, or set an image as the listitem marker.
Internet Explorer, Firefox, and Netscape are the browsers that support the CSS List Properties.
Some of the list properties are:
Liststyle property: Used for setting all the properties for a list in one declaration. You can
control the appearance of ordered and unordered lists in one declaration.
Liststyleimage: Replaces the listitem marker with an image. You can use an image for the
bullet of unordered list
Liststyleposition: Places the listitem marker in the list. You can control the position of
ordered and unordered lists
Liststyletype: Sets the type of the listitem marker. You can control the type of bullet of
the ordered and unordered lists.
24. Repeat steps 21 and 22 to create element selector ‘ol’.
The element selectors ‘ol’ defines an ‘ordered list’ in the document.
Page 22 of 109
25. Repeat steps 14, 15, and 16 to create element selectors ‘ul’ and ‘form’ with the
same padding and margin values.
‘ul’ defines an unordered list in the document. Form contains text fields, check boxes
and certain other things to enable a user to send in his data.
24_DW_06.TIF
25_DW_06.TIF
In this exercise, you have created different element selectors in master.css, each of
which has its own function. You can create many such selectors in this way.
DREAMWEAVER FOUNDATIONS
Page 23 of 109
GROUPING SELECTORS
When two or more selectors have the same properties and values, they can be grouped just to
avoid repetition and to save time and space. All types of selectors (element selectors, class
selectors, and pseudo selectors) can be grouped. In the first exercise, ‘Create Element Selectors’,
you have created four separate element selectors: h1, h2, h3, and h4 with the same properties and
values as shown below:
h1 { margin: 0px;
padding: 0px;
}
h2 { margin: 0px;
padding: 0px;
}
h3 { margin: 0px;
padding: 0px;
}
h4 { margin: 0px;
padding: 0px;
}
However, instead of defining them separately, you can group them as follows:
h1, h2, h3, h4 { margin: 0px;
padding: 0px; }
To modify the properties and values of these selectors, you do not have to modify them four
times. When grouped, they can be modified all at once.
Create Class Selectors
A class selector is used when the same style is to be applied to many elements for
more than one time, that is, if you apply a class selector to one or more elements, the
same style is applied to the elements every time they appear in the Web page. Unlike
an element selector, which is used only once for one element, a class selector is used
to repeat the same style throughout the page.
A class selector can also be applied to multiple Web pages by using an external style
sheet. For example, if you want the main header to take the same style throughout the
Web site, you do not need to change the header element in every page. You can just
Page 24 of 109
define a class for the header, and all the Web pages will take the same header style.
Class selectors are key to the effects brought out by cascading style sheets.
A class selector always starts with a dot. For example,
.heading
fontsize: 70%
color: #670
In this exercise, you will create a class selector.
1. Click the New CSS Rule icon at the bottom right of the Properties pane.
26_DW_06.TIF
2. In the New CSS Rule dialog box, click the Class radio button. In the Name text
box, type ‘clear’ and click OK.
Page 25 of 109
27_DW_06.TIF
3. In the CSS Rule definition for .clear dialog box:
Click Box in the Category pane. In the Box pane, select ‘none’ from the Clear
dropdown list.
28_DW_06.TIF
Click Type in the Category pane. Type ‘0’ in the line height text box and select
‘multiple’ from the adjacent dropdown list. In the Size text box, type ‘.01’ and
select ‘ems’ from the adjacent dropdown list.
Page 26 of 109
29_DW_06.TIF
4. Click OK.
The class selector ‘.clear’ is created in master.css. It specifies the sides of an element
thereby not allowing other floating elements (floating elements are images or text
elements that appear in other elements).
30_DW_06.TIF
Create ID Selectors
Id selectors are assigned to elements individually in an HTML page. Unlike a class
selector, which can be used for more than one element any number of times, an ID
selector is used for a single element and only for once in a Web page. An ID selector
always starts with a pound (#) sign. For example,
Page 27 of 109
#header {
float: left;
width: 800px;
background: #A84726;
In this exercise, you will create ID selectors.
1. Click the New CSS Rule icon at the bottom right of the Properties pane.
2. In the New CSS Rule dialog box, click the Advanced radio button. In the Selector
text box, type ‘#wrapper’ and click OK.
31_DW_06.TIF
3. In the CSS Rule definition for #wrapper dialog box:
Click Box in the Category pane. Deselect the Same for all check box in the
Margin area. Type ‘0’ in Top and Bottom text boxes and select ‘auto’ in the Right
and Left text boxes. Type ‘850’ in the Width text box and select ‘pixels’ from the
adjacent dropdown list.
Page 28 of 109
32_DW_06.TIF
In the Background pane, click the Browse button of the Background image text
box. Navigate to the ‘images’ folder of the Showcolate root folder and select
‘shadow.jpg’. Alternatively, type “../images/shadow.jpg” in the Background image
text box.
33_DW_06.TIF
Page 29 of 109
34_DW_06.TIF
In the Positioning pane, select ‘relative’ from the Type dropdown list.
35_DW_06.TIF
Click OK.
Page 30 of 109
An ID selector ‘#wrapper’ is created in master.css. Wrapper covers all the elements in
the document. It includes a background image which gives a shadow effect to the left
and right sides of the document.
36_DW_06.TIF
DREAMWEAVER FOUNDATIONS
UNDERSTANDING THE CSS BOX MODEL
The term 'box model' is used in creating CSSbased layouts and design. Any HTML element can
be considered a box.
A box model is a specification, that is, it specifies how a box is related to its attributes. If a box is
said to be 50 pixels wide and 100 pixels long, it is inferred that the browser should draw a box 50
pixels wide and 100 pixels long. There are more attributes that can be added like background
color, padding, margins, borders etc.
A box is made up of four parts: Margin, Border, Padding, and Content.
Margin: It is the outside part. It is invisible. It has no background color. Margin does not obstruct
the elements within it.
Border: It lies inside the margin. It specifies the visible portion of the element.
Padding: It lies inside the border. It is the area between the content area of the box and its border.
Content: It lies inside the padding. If you define a width and height for your box using CSS, you
Page 31 of 109
are defining the content area. Padding, border and margin must be added to the content to
calculate the total space occupied by the box.
Consider the example:
box {
width: 200px;
border: 10px solid #99c;
padding: 20px;
margin: 20px;
}
If you apply the above style, you get a pale blue area of 240 pixels comprising of 200 pixels of
content and 20 pixels padding. The border is 10 pixels wide on either side. The margin is 20
pixels on either side. This makes the total width of the box 300 pixels.
4. Repeat steps 1 and 2 to create an ID selector ‘#wrapperContainer’. In the CSS
Rule definition for #wrapperContainer dialog box:
Click Box in the Category pane. Deselect the Same for all check box in the
Margin area and type ‘25’ in the Left text box.
Click OK.
Page 32 of 109
37_DW_06.TIF
An ID selector ‘#wrapperContainer’ is created in master.css. WrapperContainer
enables the text to start after the margin.
38_DW_06.TIF
DREAMWEAVER FOUNDATIONS
FLOATING CONTENT
The Float property is used to float images. A float is basically a way of using your browser to
position something relative to the content which follows it. Floats can be used both with images
and text. This type of usage is referred to as text wrapping. Fundamentally, floats are used for
placing images within the content.
Page 33 of 109
Float property provides high level of positioning control for selected elements within the normal
page flow. Unlike positioned elements using absolute, relative, or fixed values, floats exhibit a
close integration with the content of their parent container. A floated image allows text wrap. The
float property conserves space by allowing adjacent elements to flow around the floated image.
In effecting floating content, the floating elements are used whose rendering boxes are shifted to
the left or right side of the current. Content boxes that follow are rendered along the side of the
floated element right side of the elements float to the left, and the left side of the elements float
to the right. This property specifies an element to float to the left, right, or specifies no float at
all.
Consider the following example:
img.test { float: left }
<img src=”image.gif” mce_src=”image.gif” style=”float: left”>Type some text.
The following are the possible floating values that are used:
Inherit: Sets the value of this property to that of the parent
None: Element box will not float
Left: Element box floats to the left resulting the content flowing around it to the right.
Right: Element box floats to the right resulting the content flowing around it to the left.
5. Repeat steps 1 and 2 to create an ID selector ‘#header’. In the CSS Rule
definition for #header dialog box:
Click Background in the Category pane and type ‘#A84726’ in the Background
color text box.
Page 34 of 109
39_DW_06.TIF
Click Box in the Category pane. Select ‘left’ from the Float dropdown list. Type
‘800’ in the Width text box and select ‘pixels’ from the adjacent dropdown list.
40_DW_06.TIF
In the Border pane, deselect the three Same for all check boxes in the Style,
Width, and Color areas. Select ‘solid’ from the Bottom dropdown list in the
Page 35 of 109
Style area. Type ‘3’ in the Bottom text box in the Width area, and select ‘pixels’
from the adjacent dropdown list. Type ‘#3B1814’ in the Bottom text box in the
color area.
41_DW_06.TIF
Click OK.
An ID selector ‘#header’ is created in master.css. Header is located at the top of the
document which includes links to other pages of the Showcolate Web site.
Page 36 of 109
42_DW_06.TIF
DREAMWEAVER FOUNDATIONS
SCROLLING CONTENT
The scrolling content property enables you to create a box of scrollable content in your page
without using a frame. Essentially, it enables you to manage content if the content of an element
overflows its area. This provides you with the same visual and usability effect that a frame offers.
Moreover, it is search engine friendly.
Consider the following example:
<div style="overflow: auto; width: 100px; height: 60px; border: solid 1px red ;"> Type text</div>.
To create a scrolling effect for a div containing text, the <div> can be set to a certain height and
width.
Normally, the following properties are applied in creating scrollable areas:
Overflow: auto: It inserts a scrollbar horizontal, vertical or both if required. It is the most
preferred property.
Overflow: visible: It enables the block to expand to view the content.
Overflow: hidden: Allows the block to only show content that fits in the block. The
remaining content is clipped and not hidden. Scrollbars are absent.
6. Repeat steps 1 and 2 to create an ID selector ‘#logo’. In the CSS Rule definition
for #logo dialog box:
Page 37 of 109
Click Box in the Category pane. Select ‘right’ from the Float dropdown list. Type
‘228’ in the Width text box and select ‘pixels’ from the adjacent dropdown list.
Deselect the Same for all check box in the Margin area. Type values 18, 12, 0, and
12 in the Top, Right, Bottom, and Left text boxes respectively, and select ‘pixels’
from the adjacent dropdown lists.
43_DW_06.TIF
Click OK.
An ID selector ‘#logo’ is created in master.css. It is the company logo displayed at the
top right of the header.
Page 38 of 109
44_DW_06.TIF
7. Repeat steps 1 and 2 to create an ID selector ‘#logoAnim’. In the CSS Rule
definition for #logoAnim dialog box:
Click Box in the Category pane. Select ‘right’ from the Float dropdown list. Type
‘225’ in the Width text box and select ‘pixels’ from the adjacent dropdown list.
Deselect the Same for all check box in the Margin area. Type ‘12’ in the Right
text box and select ‘pixels’ from the adjacent dropdown list.
Click OK.
Page 39 of 109
45_DW_06.TIF
46_DW_06.TIF
An ID selector ‘#logoAnim’ is created in master.css. It is the animation of the
company logo at the top right of the header.
DREAMWEAVER FOUNDATIONS
WORKING WITH SELECTORS BASED ON CONTEXT
Selectors are the names that you give to your different styles. In the style definition, you define
how each selector should work. In the body section of your page, you refer to these selectors to
activate the styles.
Consider the following example:
<HTML>
<HEAD>
<style type="text/css">
I. Head {color:blue; fontsize:10px; fontfamily:verdana; textdecoration:underline}
</style>
</HEAD>
<BODY>
<b> This is normal bold</b><br>
<b class="headline"> This is headline style bold</b>
</BODY>
</HTML>
Page 40 of 109
8. Repeat steps 1 and 2 to create an ID selector ‘#uniNav’. In the CSS Rule
definition for #uniNav dialog box:
Click Type in the Category pane. Type ‘.7’ in the Size text box, and select ‘ems’
from the adjacent dropdown list. Select ‘bold’ from the Weight dropdown list.
47_DW_06.TIF
In the Box pane, select ‘left’ from the Float dropdown list. Type ‘150’ in the
Width text box and select ‘pixels’ from the adjacent dropdown list. Deselect the
Page 41 of 109
Same for all check box in the Padding area. Type ‘5’ in Left text box and select
‘pixels’ from the adjacent dropdown list.
48_DW_06.TIF
Click OK.
49_DW_06.TIF
An ID selector ‘#uniNav’ is created in master.css. It specifies the links portion at the
top left of the header.
9. Repeat steps 1 and 2 to create an ID selector ‘#uniNav ul’. In the CSS Rule
definition for #uniNav ul dialog box:
Page 42 of 109
Click Box in the Category pane. In the Box pane, deselect the Same for all check
box in the Margin area. Type values 7, 0, 5, and 20 in the Top, Right, Bottom, and
Left text boxes respectively, and select ‘pixels’ from the adjacent dropdown lists.
50_DW_06.TIF
Click OK.
51_DW_06.TIF
An ID selector ‘#uniNav ul’ is created in master.css. It is the unordered list of the links
in the uniNav portion of the header.
10. Repeat steps 1 and 2 to create an ID selector ‘#uniNav ul li’. In the CSS Rule
Definition for uniNav ul li dialog box, click OK.
Page 43 of 109
52_DW_06.TIF
An ID selector ‘#uniNav ul li’ is created in master.css.
11. Repeat steps 1 and 2 to create an ID selector ‘#uniNav ul a’. In the CSS Rule
definition for #uniNav ul a dialog box:
Click Type in the Category pane. Type ‘#FFF’ in the Color text box.
53_DW_06.TIF
Click OK.
Page 44 of 109
54_DW_06.TIF
An ID selector ‘#uniNav ul a’ is created in master.css. It specifies links to the ‘uniNav
ul li’ in the header.
12. Repeat steps 1 and 2 to create an ID selector ‘#tagWrap’. In the CSS Rule
definition for #tagWrap dialog box:
Click Box in the Category pane. In the Box pane, select ‘left’ in the Float drop
down list. Type ‘800’ in the Width text box and select ‘pixels’ from the adjacent
dropdown list.
55_DW_06.TIF
Click OK.
Page 45 of 109
56_DW_06.TIF
An ID selector ‘#tagWrap’ is created in master.css. It includes all the body part of the
document excluding the header.
13. Repeat steps 1 and 2 to create an ID selector ‘#tagline’. In the CSS Rule
definition for #tagline dialog box:
In the Box pane, select ‘left’ from the Float dropdown list. Type values 400 and
269 in the Width and Height text boxes respectively. Select ‘pixels’ from the
adjacent dropdown lists.
57_DW_06.TIF
In the Background pane, click the Browse button of the Background image text
box. Navigate to the ‘images’ folder of the Showcolate root folder and select
‘tagline.jpg’. Alternatively, type “../images/tagline.jpg” in the Background image
Page 46 of 109
text box. Select ‘norepeat’ from the Repeat dropdown list. Select ‘left’ from the
Horizontal position dropdown list and ‘top’ from the Vertical position drop
down list.
58_DW_06.TIF
59_DW_06.TIF
Click OK.
Page 47 of 109
60_DW_06.TIF
An ID selector ‘#tagline’ is created in master.css. It covers the left side image below
the header.
DREAMWEAVER FOUNDATIONS
EMBEDDING BACKGROUND IMAGES USING CSS DEFINITIONS
CSS allows you to repeat the background image vertically, horizontally, or appear just for once. To
place a background image using css, the code in the style tag under the property ‘body’ will be as
follows:
backgroundimage; url: image location;
backgroundrepeat: type of repeat element
backgroundposition: type of position
backgroundattachment: type of attachment
Place the url of the image where the "image location" text appears.
Background image can be repeated in different ways. Replace the "type of repeat element" with
the following settings:
Repeat: Repeats the image vertically and horizontally
Norepeat: Will not repeat the image
Repeatx: Repeats the image horizontally
Repeaty: repeats the image vertically
You can position your background image using three different ways. This can be done by
Keywords: Use words like Top, Center, Left, Right, Bottom, etc
Page 48 of 109
Percentages: Use percentage values
Pixel Values: Use pixel values
There are two different background attachments:"fixed" and "scroll". ‘Fixed’ will make the
background stay in place while the rest of the document scrolls over it. ‘Scroll’ will have the
document scroll with the document, and it will repeat itself. In the above code, “background
image; url: image location”, replace "type of attachment" with ‘fixed; or scroll’.
14. Repeat steps 1 and 2 to create an ID selector ‘#styleImg’. In the CSS Rule
definition for #styleImg dialog box:
Click Box in the Category pane. In the Box pane, select ‘right’ from the Float
dropdown list. Type ‘400’ in the Width text box, and select ‘pixels’ from the
adjacent dropdown list.
61_DW_06.TIF
Click OK.
Page 49 of 109
62_DW_06.TIF
An ID selector ‘#styleImg’ is created in master.css. It covers the right side image
below the header.
15. Repeat steps 1 and 2 to create an ID selector ‘#video’. In the CSS Rule definition
for #video dialog box:
Click Positioning in the Category pane. In the Positioning pane, select ‘absolute’
from the Type dropdown box. Type ‘340’ in the Width text box and select ‘pixels’
from the adjacent dropdown list.
63_DW_06.TIF
In the Placement area, type values 335 and 215 in the Top and Left text boxes
respectively. Select ‘pixels’ from the adjacent dropdown lists.
Page 50 of 109
64_DW_06.TIF
Click OK.
65_DW_06.TIF
An ID selector ‘#video’ is created in master.css. It covers showcolate video image in
the images portion below the header.
16. Repeat steps 1 and 2 to create an ID selector ‘#contentgroup’. In the CSS Rule
definition for #contentgroup dialog box:
Click Type in the Category pane. Type ‘.75’ in the Size text box, and select ‘ems’
from the adjacent dropdown list.
Page 51 of 109
66_DW_06.TIF
In the Background pane, type ‘#FFF’ in the Background color text box.
67_DW_06.TIF
In the Box pane, select ‘left’ from the Float dropdown list. Type ‘800’ in the
Width text box and select ‘pixels’ from the adjacent dropdown list. In the
Padding area, deselect the Same for all check box. Type ‘15’ in Bottom text box
Page 52 of 109
and select ‘pixels’ from the adjacent dropdown list.
68_DW_06.TIF
In the Border pane, deselect the three Same for all check boxes in the Style,
Width, and Color areas. Select ‘solid’ from the Top dropdown list in the Style
area. Type ‘3’ in the Top text box in the Width area and select ‘pixels’ from the
adjacent dropdown list. In the Color area, type ‘#3B1814’ in the Top text box.
Page 53 of 109
69_DW_06.TIF
Click OK.
70_DW_06.TIF
An ID selector ‘#contentgroup’ is created in master.css. It includes the whole content
area above the footer.
17. Repeat steps 1 and 2 to create an ID selector ‘#contentmain’. In the CSS Rule
definition for #contentmain dialog box:
Page 54 of 109
Click Box in the Category pane. In the Box pane, select ‘left’ from the Float drop
down list. Type ‘530’ in the Width text box and select ‘pixels’ from the adjacent
dropdown list. In the Padding area, deselect the Same for allcheck box. Type
values 15, 0, 10, and 25 in Top, Right, Bottom, and Left text boxes respectively
and select ‘pixels’ from the adjacent dropdown lists.
71_DW_06.TIF
Click OK.
72_DW_06.TIF
An ID selector ‘#contentmain’ is created in master.css. It includes the main content of
Page 55 of 109
the document. When you attach the print.css to see the document in a print, only the
main content will appear.
18. Repeat steps 1 and 2 to create an ID selector ‘#contentmain p’. In the CSS Rule
definition for #contentmain p dialog box:
Click Type in the Category pane. In the Type pane, type ‘1.75’ in the Line height
text box and select ‘ems’ from the adjacent dropdown list.
73_DW_06.TIF
In the Box pane, deselect the Same for all check box in the Margin area. Type
‘13’ in the Top text box and select ‘pixels’ from the adjacent dropdown list.
Page 56 of 109
74_DW_06.TIF
Click OK.
75_DW_06.TIF
An ID selector ‘#contentmain p’ is created in master.css. It specifies the paragraph
style to the ‘content main’.
19. Repeat steps 1 and 2 to create an ID selector ‘#contentmain h1, #contentmain
h2’ by grouping two ID selectors. In the CSS Rule definition for #contentmain
h1, #contentmain h2 dialog box:
Click Type in the Category pane. Type ‘2.15’ in the Size text box, and select ‘ems’
from the adjacent dropdown list. Select ‘lighter’ from the Weight dropdown list.
In the Color text box, type ‘#3B1814’.
Page 57 of 109
76_DW_06.TIF
Click OK.
77_DW_06.TIF
An ID selector #contentmain h1, #contentmain h2’ is created in master.css. It
specifies the headings of the ‘content main’.
20. Repeat steps 1 and 2 to create an ID selector ‘#contentmain h1’. In the CSS Rule
definition for #contentmain h1 dialog box:
Click Box in the Category pane. In the Margin area, deselect the Same for all
check box. Type ‘5’ in the Bottom text box and select ‘pixels’ from the adjacent
dropdown box.
Page 58 of 109
78_DW_06.TIF
Click OK.
79_DW_06.TIF
An ID selector ‘#contentmain h1’ is created in master.css. It specifies the first
heading of the contentmain.
21. Repeat steps 1 and 2 to create an ID selector ‘#contentmain h2’. In the CSS Rule
definition for #contentmain h2 dialog box:
Click Type in the Category pane. Type ‘1.5’ in the Size text box, and select ‘ems’
from the adjacent dropdown list. Select ‘lighter’ from the Weight dropdown list.
In the Color text box, type ‘#A84726’.
Page 59 of 109
80_DW_06.TIF
Click Box in the Category pane. In the Margin area, deselect the Same for all
check box. Type values 7, 0, 12, and 0 in Top, Right, Bottom, and Left text boxes
respectively and select ‘pixels’ from the adjacent dropdown lists.
81_DW_06.TIF
Click OK.
Page 60 of 109
82_DW_06.TIF
An ID selector ‘#contentmain h2’ is created in master.css. It specifies the second
heading of the ‘contentmain’.
22. Repeat steps 1 and 2 to create an ID selector ‘#contentmain h3’. In the CSS Rule
definition for #contentmain h3 dialog box:
Click Type in the Category pane. Type ‘1.2’ in the Size text box, and select ‘ems’
from the adjacent dropdown list. Select ‘lighter’ from the Weight dropdown list.
In the Color text box, type ‘#A84726’.
83_DW_06.TIF
Page 61 of 109
Click OK.
84_DW_06.TIF
An ID selector ‘#contentmain h3’ is created in master.css. It specifies the third
heading of the ‘contentmain’.
23. Repeat steps 1 and 2 to create an ID selector ‘#contentmain a’. In the CSS Rule
definition for #contentmain a dialog box:
Click Type in the Category pane. In the Decoration area, select the underline
check box.
Page 62 of 109
85_DW_06.TIF
Click OK.
86_DW_06.TIF
An ID selector ‘#contentmain a’ is created in master.css. It specifies a link to another
web page from ‘contentmain’.
24. Repeat steps 1 and 2 to create an ID selector ‘#contentmain .contactCont p’. In
the CSS Rule definition for #contentmain .contactCont p dialog box:
Click Box in the Category pane. In the Margin area, deselect the Same for all
check box. Type values 1, 0, 4, and 20 in Top, Right, Bottom, and Left text boxes
Page 63 of 109
respectively and select ‘pixels’ from the adjacent dropdown lists.
87_DW_06.TIF
Click OK.
An ID selector ‘#contentmain .contactCont p’ is created in master.css.
88_DW_06.TIF
Note that, a class selector ‘contactCont’ is created here within the ID selector
‘contentmain’ and the paragraph properties are defined. In this way, you can create a
class selector within an id selector.
25. Repeat steps 1 and 2 to create an ID selector ‘p#mission’. In the CSS Rule
definition for p#mission dialog box:
Page 64 of 109
Click Type in the Category pane. In the Type pane, select ‘italic’ from the Style
dropdown list. Select ‘bold’ from the Weight dropdown list. Select ‘normal’ from
the Line height dropdown list.
89_DW_06.TIF
In the Box pane, deselect the Same for all check box in the Margin area. Type
‘13’ in the Top text box and select ‘pixels’ from the adjacent dropdown list.
Page 65 of 109
90_DW_06.TIF
Click OK.
91_DW_06.TIF
An ID selector ‘p#mission’ is created in master.css. It specifies the paragraph style to
the ‘mission statement’ in contentmain.
26. Repeat steps 1 and 2 to create an ID selector ‘#contentside’. In the CSS Rule
definition for #contentside dialog box:
Click Box in the Category pane. In the Box pane, select ‘right’ from the Float
dropdown list. Type ‘240’ in the Width text box and select ‘pixels’ from the
adjacent dropdown list.
Page 66 of 109
92_DW_06.TIF
Click OK.
93_DW_06.TIF
An ID selector ‘#contentside’ is created in master.css. It includes the side content to
the right side of the document besides the contentmain.
27. Repeat steps 1 and 2 to create an ID selector ‘#contentsideCont’. In the CSS
Rule definition for #contentsideCont dialog box:
Click Type in the Category pane. Type ‘1’ in the Size text box and select ‘ems’
from the adjacent dropdown list.
Page 67 of 109
94_DW_06.TIF
In the Background pane, select ‘paper.gif’ by clicking the Browse button or type
“../images/paper.gif” in the Background image text box. Select ‘norepeat’ from
the Repeat dropdown list. Select ‘left’ from the Horizontal position dropdown
list and ‘top’ from the Vertical position dropdown list.
95_DW_06.TIF
Page 68 of 109
96_DW_06.TIF
Click Box in the Category pane. In the Box pane, type values 160 and 205 in the
Width and Height text boxes respectively. Select ‘pixels’ from the adjacent drop
down lists. In the Padding and Margin areas, deselect the Same for all check
boxes. In the Padding area, type values 30, 25, 5, and 20 in Top, Right, Bottom,
and Left text boxes respectively. In the Margin area, type values 45, 0, 0, and 15 in
Top, Right, Bottom, and Left text boxes respectively. Select ‘pixels’ from the
adjacent dropdown lists.
Page 69 of 109
97_DW_06.TIF
Click OK.
98_DW_06.TIF
Page 70 of 109
An ID selector ‘#contentsideCont’ is created in master.css. It covers the side content
portion to the right side of the document besides the contentmain.
28. Repeat steps 1 and 2 to create an ID selector ‘#contentsideCont p’. In the CSS
Rule definition for #contentsideCont p dialog box:
Click Type in the Category pane. Type ‘1.1’ in the Size text box and select ‘ems’
from the adjacent dropdown list. Type ‘#353535’ in the Color text box.
99_DW_06.TIF
Click Box in the Category pane. In the Padding area, deselect the Same for all
check box. Type ‘8’ in the Bottom text box.
Page 71 of 109
100_DW_06.TIF
Click OK.
101_DW_06.TIF
An ID selector ‘#contentsideCont p’ is created in master.css. It specifies the
paragraph style to the contentsideCont.
29. Repeat steps 1 and 2 to create an ID selector ‘#contentsideCont .author p’. In
Page 72 of 109
the CSS Rule definition for #contentsideCont .author p dialog box:
Click Type in the Category pane. Select ‘normal’ from the Line height drop
down list.
102_DW_06.TIF
Click Box in the Category pane. In the Margin area, deselect the Same for all
check box. Type values 1, 0, 52, and 0 in Top, Right, Bottom, and Left text boxes
respectively and select ‘pixels’ from the adjacent dropdown lists.
Page 73 of 109
103_DW_06.TIF
Click OK.
104_DW_06.TIF
An ID selector ‘#contentsideCont .author p’ is created in master.css. Note that, a class
selector ‘author’ is created within the ID selector ‘contentsideCont’ and the
paragraph properties are defined. It specifies a paragraph style to the name of the
author in the contentsideCont.
30. Repeat steps 1 and 2 to create an ID selector ‘#footer’. In the CSS Rule definition
Page 74 of 109
for #footer dialog box:
Click Type in the Category pane. Type ‘0.7’ in the Size text box, and select ‘ems’
from the adjacent dropdown list. Type ‘#FFF’ in the Color text box.
105_DW_06.TIF
In the Background pane, type ‘#A84726’ in the Color text box.
106_DW_06.TIF
Page 75 of 109
In the Box pane, select ‘left’ from the Float dropdown list. Type ‘800’ in the
Width text box and select ‘pixels’ from the adjacent dropdown list. In the
Padding area, deselect the Same for all check box. Type values 8, 0, 25, and 0 in
Top, Right, Bottom, and Left text boxes respectively and select ‘pixels’ from the
adjacent dropdown lists.
107_DW_06.TIF
Click OK.
Page 76 of 109
108_DW_06.TIF
An ID selector ‘#footer’ is created in master.css. Footer is located at the bottom of the
document which includes contact information and other links.
31. Repeat steps 1 and 2 to create an ID selector ‘#footer p’. In the CSS Rule
definition for #footer p dialog box:
Click Box in the Category pane. In the Padding and Margin areas, deselect the
Same for all check boxes. In the Padding area, type values 15, 0, 5, and 25 in Top,
Right, Bottom, and Left text boxes respectively. In the Margin area, type values
10, 0, 21, and 0 in Top, Right, Bottom, and Left text boxes respectively. Select
‘pixels’ from the adjacent dropdown lists.
Page 77 of 109
109_DW_06.TIF
110_DW_06.TIF
Page 78 of 109
An ID selector ‘#footer p’ is created in master.css. It specifies the paragraph style to
the footer content.
32. Repeat steps 1 and 2 to create an ID selector ‘#footer p .author’. In the CSS Rule
definition for #footer p .author dialog box:
Click Box in the Category pane. In the Margin area, deselect the Same for all
check box. Type ‘10’ in the Top text box and select ‘pixels’ from the adjacent drop
down list.
Click OK.
An ID selector ‘#footer p .author’ is created in master.css. Note that a class selector
‘author’ is created within the ID selector ‘footer p’.
111_DW_06.TIF
33. Repeat steps 1 and 2 to create an ID selector ‘#footer a’. In the CSS Rule
definition for #footer a dialog box:
Click Type in the Category pane. Select the underline check box in the
Decoration area. Type ‘#FFF’ in the Color text box.
Click OK.
Page 79 of 109
112_DW_06.TIF
An ID selector ‘#footer a’ is created in master.css. It specifies a link to another web
page from ‘footer’.
34. Repeat steps 1 and 2 to create an ID selector ‘#containerBot’. In the CSS Rule
definition for #containerBot dialog box:
In the Background pane, select ‘shadowbottom.jpg’ by clicking the Browse
button or type “../images/shadowbottom.jpg” in the Background image text box.
Select ‘norepeat’ from the Repeat dropdown list. Select ‘left’ from the
Horizontal position dropdown list and ‘bottom’ from the Vertical position drop
down list.
In the Box pane, type values 850 and 30 in the Width and Height text boxes
respectively. Select ‘pixels’ from the adjacent dropdown lists. In the Margin area,
deselect the Same for all check box. Type 0, auto, 0, and auto in Top, Right,
Bottom, and Left text boxes respectively.
Click OK.
Page 80 of 109
113_DW_06.TIF
An ID selector ‘#containerBot’ is created in master.css. ContainerBot specifies a
shadow effect to the bottom of the document.
35. Repeat steps 1 and 2 to create an ID selector #home, #homelink a, #about,
#aboutlink a, #products, #productslink a, #faq, #faqlink a, #franchisee,
#franchiseelink a, #locations, #locationslink a, #contact, #contactlink a, #login,
#loginlink a by grouping several ID selectors. In the CSS Rule definition dialog
box:
In the Type pane, type ‘#E1957B’ in the Color text box.
Click OK.
114_DW_06.TIF
Page 81 of 109
This is for applying a color to the links when they are clicked. Here, when you are
creating #home, #homelink a, the color of the link will be #E1957B. These links are
created for the uniNav list in the header portion.
36. Repeat steps 1 and 2 to create an ID selector ‘#faq #contentmain p’. In the CSS
Rule definition for #faq #contentmain p dialog box:
Type Box in the Category pane. In the Margin area, deselect the Same for all
check box. Type ‘21’ in the Left text box and select ‘pixels’ from the adjacent
dropdown list.
Click OK.
115_DW_06.TIF
An ID selector ‘#faq #contentmain p’ is created in master.css. It specifies the
paragraph style to the ‘faq contentmain’.
Create PseudoClass Selectors
Class selectors and id selectors are based on elements within the document tree.
Pseudoclass selectors are used where no CSS element is available. For example, a
pseudoclass selector can represent the state of a hyperlink displaying certain states
like ‘active’ and ‘visited’. A pseudoclass selector simply refers to an element in a
certain state. A pseudoclass selector always begins with a colon (:).
The four pseudoclass selectors are:
a: link: Refers to a hyperlink that is not visited
a: visited: Refers to a hyperlink that is visited
a: hover: Refers to a hyperlink when the mouse pointer is hovering over the
hyperlink
a: active: Refers to an active hyperlink
In this exercise, you will create pseudoclass selectors.
Page 82 of 109
1. Click the New CSS Rule icon at the bottom right of the Properties pane.
2. In the New CSS Rule dialog box, click the Advanced radio button. In the Selector
text box, type or select ‘a:visited’. Click OK.
116_DW_06.TIF
3. In the CSS Rule definition for a:visited dialog box:
Click Type in the Category pane. Type ‘#B5A48C’ in the Color text box.
Click OK.
A pseudoclass selector ‘a:visited’ is created in master.css.
117_DW_06.TIF
4. Repeat steps 1 and 2 to create a pseudoclass selector ‘a:hover’. In the CSS Rule
definition for a:hover dialog box:
Click Type in the Category pane. Type ‘#E1957B’ in the Color text box.
Click OK.
A pseudoclass selector ‘a:hover’ is created in master.css.
5. Repeat steps 1 and 2 to create a pseudoclass selector ‘#uniNav ul a:hover’. In the
CSS Rule definition for #uniNav ul a:hover dialog box:
Page 83 of 109
Click Type in the Category pane. Type ‘#E1957B’ in the Color text box.
Click OK.
A pseudoclass selector ‘#uniNav ul a:hover’ is created in master.css.
6. Repeat steps 1 and 2 to create a pseudoclass selector ‘#contentmain a:hover’. In
the CSS Rule definition for #contentmain a:hover dialog box:
Click Type in the Category pane. Type ‘#E1957B’ in the Color text box.
Click OK.
A pseudoclass selector ‘#contentmain a:hover’ is created in master.css.
7. Repeat steps 1 and 2 to create a pseudoclass selector ‘#footer a:hover’. In the
CSS Rule definition for #footer a:hover dialog box:
Click Type in the Category pane. Type ‘#E1957B’ in the Color text box.
Click OK.
A pseudoclass selector ‘#footer a:hover’ is created in master.css.
118_DW_06.TIF
A cascading style sheet allows you to create a mediaspecific style. You might have observed that
when a Web page is printed, unwanted images and links also get printed along with the required
text. A print style sheet can prevent this from happening. Creating a style sheet for print prints
only the specified content and disables the remaining content. Links such as ‘Printerfriendly
version’ or ‘Print this document’ in Web sites have a print style sheet attached.
If you want certain styles not to be displayed in the browser, you can create a separate style sheet
called a designtime style sheet to hide such styles. Using a designtime style sheet, you can
show or hide styles in a browser.
Some browsers might not support certain styles you have used, or you want to give a choice of
styles to the user. In such cases, you can use alternate style sheets. However, the efficacy of
alternate style sheets varies from browser to browser.
DREAMWEAVER FOUNDATIONS
WORKING WITH DESIGN-TIME STYLE SHEETS
Applying styles to a Web page is, in fact, a matter of experimenting. While you design a Web
page, you try a certain style and then you change it. You keep on trying styles in this way till you
are content with the appearance of the Web page. Sometimes you may find certain styles
displaying incorrectly in Dreamweaver and you want to try some different styles only to appear
in the design view. For these purposes, you can use a specific cascading style sheet called design
time style sheet.
A designtime style sheet is a separate style sheet – in addition to the main cascading style sheet –
which affects only the design view in Dreamweaver. A designtime style sheet allows you to
display or hide styles in the Dreamweaver, but it prevents these styles to appear in the browser
when the Web site goes live.
To attach a designtime style sheet to an HTML page, choose Text>CSS Styles and click Design
time. In the Designtime Style Sheets dialog box, click the ‘+’ sign to navigate and select a style
sheet. To show the style sheet at design time, select it in the ‘Show only at design time’ box. To
hide a style sheet at design time, select it in the ‘Hide at design time’ box. To remove a style sheet,
click the ‘‘ sign.
DREMWEAVER FOUNDATIONS
WORKING WITH ALTERNATE STYLE SHEETS
Usually style sheets are associated with HTML documents using the link element. So, it is
important to use the element's attributes properly. The use of the title attribute is very important
so that HTML categorizes style sheets according to the presence or absence of a title.
If you include the title attribute, you can see that the particular style sheet always affects the
document.
Page 85 of 109
There are three kinds of style sheets:
Persistent: This has no title attribute. A document may refer to one or more persistent style
sheets.
Preferred: This style sheet carries a value supplied for the ‘rel’ attribute. (‘rel’ attribute is
used to define the relationship between the linked file and the HTML document.
Alternate: You can select this style sheet as an alternative to the preferred style sheet.
An alternate style sheet relationship is specified with a REL attribute value of the alternate style
sheet.
Consider the following example:
<link href="main.css" title= "abc" rel="stylesheet" type="text/css" >
<link href="main.css" title= "abc" rel="alternate stylesheet" type="text/css">
Here rel="Alternate StyleSheet" defines an alternate style. You can choose the alternate style to
replace the preferred style sheet.
Your document doesn't need to have a single style sheet. You can give it a default style and any
number of alternatives. Links with the same title are automatically combined into one style sheet.
In a document that refers to alternate style sheets, you can use preferred style sheet as long as you
do not select the alternate style sheet. Once you select the alternate style sheet, the preferred style
sheet will no longer be used. But, you can always reselect the preferred style sheet.
Create a Print Style Sheet
Creating a print style sheet is the same as creating any other cascading style sheet. A
print style sheet determines the layout of a Web page. When the Web page is printed,
it prints in a userfriendly way, that is, only the specified content is printed and all the
unwanted images and links are disabled.
In this exercise, you will create a print style sheet.
1. If Dreamweaver is not open, launch it now.
2. Choose File>New.
3. In the New Document dialog box, choose Blank Page.
4. Choose CSS from the Page Type list and click the Create button.
A new cascading style sheet is created.
Page 86 of 109
5. Choose File>Save on the menu or press Command/ControlS to save the page. In
the Save As dialog box, navigate to the CSS folder in the root of the Showcolate
Web site and name the page as ‘print.css’.
119_DW_06.TIF
The new cascading style sheet is saved with the name print.css.
6. Click the New CSS Rule icon at the bottom right of the Properties pane.
7. In the New CSS Rule dialog box, click the Tag radio button. In the Tag field, type
‘body’ or select ‘body’ from the dropdown list. Click OK.
120_DW_06.TIF
Page 87 of 109
8. In the CSS Rule definition for body dialog box:
Click Type in the Category pane. In the Font dropdown list, click ‘Times New
Roman, Times, serif’. In the Size text box, type ‘13’ and select ‘points’ from the
adjacent dropdown list. In the Color text box, type ‘black’.
Click Background in the Category pane. In the Background pane, type ‘white’ in
the Background color text box.
An element selector ‘body’ is created in print.css.
121_DW_06.TIF
9. Repeat steps 6 and 7 to create an element selector ‘h1’. In the CSS Rule
definition for h1 dialog box:
Click Type in the Category pane. In the Size text box, type ‘20’ and select ‘points’
from the adjacent dropdown list.
An element selector ‘h1’ is created in print.css.
10. Repeat steps 6 and 7 to create an element selector ‘h2’. In the CSS Rule
definition for h2 dialog box:
Click Type in the Category pane. In the Size text box, type ‘15’ and select ‘points’
from the adjacent dropdown list.
An element selector ‘h2’ is created in print.css.
11. Click the New CSS Rule icon at the bottom right of the Properties pane. In the
New CSS Rule dialog box, click the Advanced radio button.
12. In the Selector text box, type #header, #tagline, #contentside, #styleImg, .clear,
#footer and click OK.
Page 88 of 109
13. In the CSS Rule #header, #tagline, #contentside, #styleImg, .clear, #footer
definition dialog box:
In the Block pane, select ‘none’ from the Display dropdown list.
Click OK.
An ID selector #header, #tagline, #contentside, #styleImg, .clear, #footer is created in
print.css.
14. Repeat step 11 and 12 to create an ID selector #container. In the CSS Rule
definition for #container dialog box:
Click Box in the Category pane. In the Margin area, select Same for all check
box. Type ‘0’ in the Top text box.
Click OK.
An ID selector ‘#container’ is created in print.css.
15. Repeat steps 11 and 12 to create an ID selector ‘#mainContent’. In the CSS Rule
definition for #mainContent dialog box:
In the Box pane, select ‘auto’ in the Width text box. In the Padding area, select
the Same for all check box and type ‘0’ in the Top text box.
In the Border pane, select the Same for all check box in the Width area and type
‘0’ in the Top text box.
Click OK.
An ID selector ‘#mainContent’ is created in print.css.
Page 89 of 109
122_DW_06.TIF
Use a Tracing Image
There might be instances where you want to design a prototype of the layout of a Web
site in the form of an image in a graphic program (such as Photoshop), or use a certain
image as a layout of your Web page. ‘Tracing Image’ is a feature in Dreamweaver
which helps you in such cases.
The Tracing Image feature allows you to use an image in your HTML page to recreate
the image effect in the page layout. The image appears in the background in Design
view. You can trace the image to design tables, layers, etc. You can set the opacity and
change the position of the image. The tracing image appears only in Dreamweaver and
does not appear in the browser. Once you design the layout of the Web page, you can
hide the tracing image. A tracing image can be a JPEG, GIF, BMP, or PNG file.
In this exercise, you will create an HTML page and insert a tracing image in it.
1. If Dreamweaver is not open, launch it now.
Page 90 of 109
2. Choose File>New.
3. In the New Document dialog box, choose Blank Page.
4. Choose HTML from the Page Type list and click the Create button.
A new HTML page is created.
5. Choose File>Save on the menu or press Command/ControlS to save the page. In
the Save As dialog box, navigate to the root of the Showcolate folder and name
the page as ‘index.html’.
The new HTML page is saved with the name index.html. You will apply all styles to
this HTML page. Ensure that while naming an HTML page, you have selected the
HTML Documents (*.htm, *.html, *.hta, *.htc, *.xhtml) extension in the Save as type
box just below the File name box.
123_DW_06.TIF
6. Keep index.html open.
8. In index.html, choose View>Tracing Image on the menu and click Load.
Page 91 of 109
124_DW_06.TIF
The Select Image Source dialog box is displayed.
9. In the Look in dropdown list, navigate to the image ‘showcolate.jpeg’ in Images
folder in the root of the Showcolate folder and click OK.
Page 92 of 109
125_DW_06.TIF
The Adobe Dreamweaver CS3 dialog box is displayed.
11. Set transparency of the image to 40 by moving the Transparency slider. Click
OK.
126_DW_06.TIF
Page 93 of 109
The tracing image ‘showcolate.jpeg’ appears in index.html.
127_DW_06.TIF
Insert Div Tags
The div tags in an HTML page define divisions or sections. Div tags divide a Web
page into different sections. By inserting div tags in an HTML page, you can apply
styles to individual sections efficiently. And when you want to modify the style of a
section, you can just modify the style in the CSS panel.
So far, you have created a style sheet (master.css) and an HTML page (index.html).
Now, you will attach the master.css to index.html and insert div tags in it.
1. Open the index.html page. In the CSS panel, click the Attach Style Sheet icon at
the bottom right of the properties pane.
The Attach External Style Sheet dialog box is displayed.
2. Click the Browse button to navigate to the CSS folder in the root of the
Showcolate Web site and select the master.css file. Click OK.
3. In the ‘Add as’ area, click the Link radio button.
4. In the Media dropdown list, select ‘screen’. Click OK.
128_DW_06.TIF
Master.css is attached to index.html. You can see all the styles of master.css listed in
the CSS panel.
DREAMWEAVER FOUNDATIONS
WORKING WITH THE <SPAN> AND <DIV> TAGS
Both span and div tags are used to apply styles in an HTML page. Both these tags are used to
format portions of a Web page. But, they cannot be used interchangeably and there is some
distinguishing difference between the two as they serve two different purposes.
Span tag: A span tag is used for ‘inline’ content, primarily for a small portion. It is used within a
piece of text such as a headline or a paragraph. A span tag does not use a line break in the text.
Using a span tag, you can apply certain styles to text such as highlighting the text, applying color
to the text, or setting a background image for the text. A span tag applies styles to the text even in
the middle of a sentence.
For example, if you apply a span tag for the text “A span tag can change font in the middle of a
sentence” in the following way,
A span tag can <span style="font:18pt verdana">change font</span> in the middle of a sentence
the text will appear as shown below:
A span tag can change font in the middle of a sentence
Div tag: A div tag is used for a division which generally has a group of larger portions such as
paragraphs or images. When a div tag is used, a linebreak is inserted before and after it.
Anything that follows a div tag goes to the next line. Using div tags, you can divide a Web page
into different divisions. You can position the elements contained within a div tag and for this
reason, div tags are used for tablebased Web designs.
If you apply a div tag for the text “Using div tags, you can divide a Web page into different
divisions” in the following way,
Using div tags, you can divide a Web page <div style="textalign:center"> into different divisions.
</div>
the div tag works as shown below:
Using div tags, you can divide a Web page
into different divisions
5. Choose Insert>Layout Objects on the menu and click Div Tag.
Page 96 of 109
129_DW_06.TIF
The Insert Div Tag dialog box is displayed.
6. In the ID dropdown list, select the div tag ‘wrapper’.
7. In the Insert dropdown list, select ‘At insertion point’. Click OK.
130_DW_06.TIF
Placeholder text is displayed as ‘Content for id "wrapper" Goes Here’. Select the
placeholder text in the inserted div and press the Delete key.
Note: As the div tags are created, you can see them
displayed in the tag editor just above the Properties
Inspector. If you select a div tag, the name is displayed
in the list.
Page 97 of 109
8. Repeat steps 5 and 6 to insert the div tag ‘wrapperContainer’. In the Insert drop
down list, select ‘At insertion point’. Click OK. Select the placeholder text in the
inserted div and press the Delete key.
9. Repeat steps 5 and 6 to insert the div tag ‘header’. In the Insert dropdown list,
select ‘At insertion point’. Click OK. Select the placeholder text in the inserted
div and press the Delete key.
10. Repeat steps 5 and 6 to insert the div tag ‘logoAnim’. In the Insert dropdown
list, select ‘At insertion point’. Click OK. Select the placeholder text in the
inserted div and press the Delete key.
11. Repeat steps 5 and 6 to insert the div tag ‘uniNav’. In the Insert dropdown list,
select ‘After start of tag’. In the adjacent dropdown list, select <div
id="header”>. Click OK. Select the placeholder text in the inserted div and press
the Delete key.
12. Repeat steps 5 and 6 to insert the div tag ‘tagWrap’. In the Insert dropdown list,
select ‘After tag’. In the adjacent dropdown list, select <div id="header”>. Click
OK. Select the placeholder text in the inserted div and press the Delete key.
13. Repeat steps 5 and 6 to insert the div tag ‘tagline’. In the Insert dropdown list,
select ‘At insertion point’. Click OK. Select the placeholder text in the inserted
div and press the Delete key.
An image is displayed in the inserted div.
14. Repeat steps 5 and 6 to insert the div tag ‘video’. In the Insert dropdown list,
select ‘Before end of tag’. In the adjacent dropdown list, select <div
id="tagline”>. Click OK. Select the placeholder text in the inserted div and
press the Delete key.
15. Choose Insert>Image Objects and click Rollover Image. In the Image name text
box, type ‘video’. Click the Browse button of the Original Image field. Navigate to
the ‘images’ folder of the Showcolate root folder and select ‘videoUp.jpg’. Click
the Browse button of the Rollover Image field to select the image ‘videover.gif’. In
the Alternate text field, type ‘Download Showcolate Video’. Click the Browse button
of the ‘When clicked, Go to URL’ text box to navigate to the flash folder in the
Showcolate root folder and select the flash file ‘showcolateflash.swf’. Click OK.
16. Repeat steps 5 and 6 to insert the div tag ‘styleImg’. In the Insert dropdown list,
Page 98 of 109
select ‘After tag’. In the adjacent dropdown list, select <div id="tagline”>. Click
OK. Select the placeholder text in the inserted div and press the Delete key.
17. Repeat steps 5 and 6 to insert the div tag ‘contentgroup’. In the Insert drop
down list, select ‘After tag’. In the adjacent dropdown list, select <div
id="styleImg”>. Click OK. Select the placeholder text in the inserted div and
press the Delete key.
18. Repeat steps 5 and 6 to insert the div tag ‘contentmain’. In the Insert dropdown
list, select ‘At insertion point’. Click OK. Select the placeholder text in the
inserted div and press the Delete key.
19. Repeat steps 5 and 6 to insert the div tag ‘contentside’. In the Insert dropdown
list, select ‘After tag’. In the adjacent dropdown list, select <div id="content
main”>. Click OK. Select the placeholder text in the inserted div and press the
Delete key.
20. Repeat steps 5 and 6 to insert the div tag ‘contentsideCont’. In the Insert drop
down list, select ‘At insertion point’. Click OK. Select the placeholder text in the
inserted div and press the Delete key. Open the Content.txt file in the Showcolate
root folder and copy the text under the heading ‘content_sideCont text’ and paste
it in the area of the div tag ‘contentsideCont’.
21. Repeat steps 5 and 6 to insert the div tag ‘footer’. In the Insert dropdown list,
select ‘After tag’. Select <div id="contentgroup”> in the adjacent dropdown
list. Click OK. Select the placeholder text in the inserted div and press the Delete
key. Copy the footer text from the Content.txt file and paste it in the footer.
22. Choose Insert>Layout Objects on the menu and click Div Tag. In the Class text
box, select ‘clear’. In the Insert dropdown list, select ‘After tag’. Select <div
id="wrapper”> in the adjacent dropdown list. In the code view, type ‘ ’ in
place of ‘Content for class "clear" Goes Here’. Click OK.
23. Repeat steps 5 and 6 to insert the div tag ‘containerBot’. In the Insert dropdown
list, select ‘At insertion point’. Click OK. Select the placeholder text in the
inserted div and press the Delete key.
As you go on inserting div tags in the index.html, you can view the page in the
browser. Press F12 for a quickview of the page in the browser.
Page 99 of 109
131_DW_06.TIF
Create links
Links used in a Web page help users to navigate from that Web page to other specified
locations. When a link is clicked, a new Web page will be displayed in the browser.
In this exercise, you will create links (in index.html), which will take the users to other
specified web pages of the Showcolate Web site. You can refer to project1 to learn
more about creating links in a Web page.
1. Open index.html in design view.
2. Place the cursor in the uniNav div tag. Choose Insert>Tag. In the Tag chooser
dialog box, click the Plus (+) sign beside the HTML tags folder and click ‘Lists’.
Select ul in the adjoining display area and click Insert.
Page 100 of 109
132_DW_06.TIF
The Tag Editor – ul dialog box is displayed.
133_DW_06.TIF
3. Click OK and close the Tag Chooser dialog box.
4. Select the design view and repeat steps 2 and 3 to insert ‘li’.
5. Type and select the text ‘Home’ in the uniNav div tag area. Rightclick <li> in the
tag editor. Choose Set ID and click homelink in the list.
Page 101 of 109
134_DW_06.TIF
Page 102 of 109
135_DW_06.TIF
<li#homelink> is created in the tag editor.
136_DW_06.TIF
6. Select the text ‘Home’ in the uniNav tag. Click and drag the Point to File button
to index.html in the files panel.
Page 103 of 109
137_DW_06.TIF
The Home link is created. You can press F12 to check in the browser whether or not
the link is working. When you place the cursor on the link, the color will change.
7. Type and select the text ‘About Showcolate’ in uniNav below the Home link.
Rightclick <li> in the tag editor. Choose Set ID and click aboutlink in the list.
Select About Showcolate. Click and drag the Point to File button to about.html in
the files panel.
‘About Showcolate’ link is created.
8. Type and select the text ‘Our Products’ in uniNav. Rightclick <li> in the tag
editor. Choose Set ID and click productslink in the list. Click and drag the Point
to File button to products.html in the files panel.
‘Our Products’ is created.
9. Type and select the text ‘FAQ’ in uniNav. Rightclick <li> in the tag editor.
Choose Set ID and click faqlink in the list. Click and drag the Point to File button
to faq.html in the files panel.
‘FAQ’ link is created.
10. Type and select the text ‘Become a Franchisee’ in uniNav. Rightclick <li> in the
tag editor. Choose Set ID and click franchiseelink in the list. Click and drag the
Point to File button to franchisee.html in the files panel.
‘Become a franchisee’ link is created.
11. Type and select the text ‘Locations’ in uniNav. Rightclick <li> in the tag editor.
Choose Set ID and click locationslink in the list. Click and drag the Point to File
button to locations.html in the files panel.
‘Locations link’ is created.
Page 104 of 109
12. Type and select the text ‘Contact’ in uniNav. Rightclick <li> in the tag editor.
Choose Set ID and click contactlink in the list. Click and drag the Point to File
button to contact.html in the files panel.
‘Contact’ link is created.
13. Type and select the text ‘Franchisee Login’ in uniNav. Rightclick <li> in the tag
editor. Choose Set ID and click loginlink in the list. Select Franchisee Login in the
uniNav tag. Click and drag the Point to File button to login.html in the files
panel.
‘Franchisee Login’ link is created.
14. In the footer area, select the text ‘info@showcolate.com’. In the Link field of the
Properties Inspector, type mailto:info@showcolate.com
138_DW_06.TIF
15. Select Live Remote Assistance. In the Link field of the Properties Inspector, type
http://www.gotoassist.com/ph/txwi.
Save the Page as Template
A template works as a parent document. You can create any number of documents out
of a template. All such documents will have the same format and structure as the
template. If you save index.html as a template, you can create similar HTML pages out
of it with the same structure of the elements such as head and body. A template proves
quite useful when you design a big Web site: you need not create each HTML page
separately; moreover, all Web pages will have a consistent look and uniform
appearance. Any page can be modified later on, if needed.
1. Open index.html in Dreamweaver.
Page 105 of 109
2. Choose File>Save as Template.
The Save As Template dialog box is displayed.
3. In the Site dropdown box, ensure that Showcolate is selected. In the Save as text
box, type ‘template’.
139_DW_06.TIF
You can type text in the Description text box for your reference.
4. Click Save.
The index.html is saved as a template. The template is displayed in the Templates
folder in the Files panel with the extension .dwt (template.dwt).
140_DW_06.TIF
5. Select ‘logoAnim’ div tag. Choose Insert>Template Objects and click Editable
Page 106 of 109
Region.
The New Editable Region dialog box is displayed.
In a template, you can define certain regions as editable, which enables you to modify
those regions in other pages created out of that template.
6. In the Name text box, type ‘header image’. Click OK.
7. Follow steps 5 and 6 in div tags styleImg. and content main. Type ‘image’ for
styleImg. and ‘content’ for content main. in the Name text box.
141_DW_06.TIF
You have created a template out of which you can create any number of Web pages,
which can be individually altered, if needed.
Page 107 of 109
Complete the Home Page
The page index.html is saved as a template. In this exercise, you will complete the
index.html page which is the home page of Showcolate Web site.
1. Select and delete the text in the div tag area ‘logoAnim’. Choose Insert>Media
and click Flash.
The Select File dialog box is displayed.
2. Navigate to the Flash folder in the Showcolate root folder and select the flash
object ‘showcolatelogoanimado175x110’.
142_DW_06.TIF
The Object Tag Accessibility Attributes dialog box is displayed.
3. Click OK.
The flash object is inserted in the header.
Page 108 of 109
4. Select the delete the text in the div tag area ‘styleImg’. Choose Insert>Image and
navigate to the folder ‘images’ in the Showcolate root folder and select the image
‘styHome’.
143_DW_06.TIF
The image is inserted.
5. Select the div tag contentmain. Copy the content_main text from the
‘Content.txt’ file in the Showcolate root folder and paste it in the contentmain
area.
Page 109 of 109
144_DW_06.TIF
Press F12 to view the home page in a browser.