9 9 What You’ll Do Introduce Cascading Style Sheets Create a Web Page with a CSS Layout Create CSS Styles Apply Internal CSS Styles Apply and Modify External CSS Styles Remove Internal S
Trang 19
9
What You’ll Do
Introduce Cascading Style Sheets Create a Web Page with a CSS Layout Create CSS Styles
Apply Internal CSS Styles Apply and Modify External CSS Styles Remove Internal Styles
Use the CSS Styles Panel Edit CSS in the Properties Panel Set CSS Properties
Work with CSS Rules Disable or Enable CSS Rules Inspect CSS
Use the Relevant CSS Tab Work with ID Selectors Create and Apply an ID Selector Check for CSS Browser Compatibility Format CSS Code
Set CSS Styles Preferences Use Design-Time Style Sheets Optimize Web Pages
Working with Cascading
Style Sheets
Introduction
Cascading Style Sheets are one of the greatest things to
come along since the creation of the World Wide Web A hard
definition of CSS might go something like this: Cascading
Style Sheets (CSS) are a collection of formatting rules that
control the appearance of the content in a Web page
Using CSS styles to format a page separates content from
presentation This gives you greater flexibility and control
over the exact appearance of your Web pages With CSS you
can control text properties including specific fonts and font
sizes; bold, italics, underlining, and text shadows; text color
and background color, link color and underlining With CSS
controlling fonts, it ensures a more consistent treatment of
your page layout and appearance in multiple browsers
In this chapter you'll get an introduction to Cascading
Style Sheets: what they are, and how to use them efficiently
to create great Web content You'll also learn how CSS
func-tions, and how it's used to control multiple Web pages
With Dreamweaver and Cascading Style Sheets we're
get-ting closer and closer to the goal of What You See Is What You
Get, and I can't wait
Trang 2Cascading Style Sheets (CSS) are a revolution
in the world of web design Some of the
ben-efits include:
◆ The layout of many documents from one
single style sheet
◆ Precise control of layouts
◆ Application of different layout to different
media-types (screen, print, etc.)
◆ Many advanced and sophisticated
techniques
Many of the CSS properties are similar to
those of HTML Therefore, if you are
comfort-able designing Web pages using HTML code,
you will most likely recognize many of the
codes
CSS Versus HTML
If you wanted to change the color of the
back-ground of a Web page, the HTML code would
look like this:
<body bgcolor="#0000FF">
To write the same thing using CSS, would
look like this:
body {background-color: #0000FF;}
Incidentally, the code, in both cases, is
instructing the browser to paint the
back-ground in pure blue
CSS Breakdown
Cascading Style Sheets are broken down into
three sections: a selector, a property, and a
value In our example, body is the selector,
background-color is the property, and
#0000FF is the value
Create CSS Styles
There are three ways you can apply CSS to an
HTML document: Attributes, Tags, and
External Style Sheets
Attribute Styles
One way to apply CSS to HTML is by using the HTML attribute style CSS used in this way is coded directly into the HTML docu-ment For example, you can create your own named tags, and use them throughout the active document Building on the above example, it can be applied like this:
<html>
<head>
<title>Attribute Style Example<title>
</head>
<body style="background-color: #0000FF;">
<p>This page has a blue background</p>
</body>
</html>
NOTE Attribute styles are a one-shot deal
That is, they are applied to single areas of an HTML document such as a background color, or
a specific portion of text
Tag Styles
A second way to include CSS into an HTML document is to use the Tag Style method In this method you control the formatting of standard HTML tags For example, you could redefine the <H1> heading tag to always use
a specific font, size and justification or, in this example, use the <body> tag to paint the background blue
<html>
<head>
<title>Tag Style Example<title>
<style type="text/css">
body {background-color: #0000FF;}
</style>
</head>
Introducing Cascading Style Sheets
Trang 3<body>
<p>This page has a blue background</p>
</body>
</html>
NOTE A Tag style changes all instances of an
HTML tag throughout the active document, but
will not impact other Web documents
External Styles
This is the recommended way to create
styles Using this method you create a text
document (called a style sheet) This
docu-ment contains all of the formatting
informa-tion necessary to drive your Web page This
document is then attached to one or more
Web pages, and when the page loads, it gets
its formatting information from the external
style sheet The line of code must be inserted
in the header section of the HTML code
between the <head> and </head> tags Like
this:
<html>
<head>
<title>My document</title>
<link rel="stylesheet" type="text/css"
href="style/style.css" />
</head>
<body>
<p>This page has a blue background</p>
</body>
</html>
In the example, an external style sheet
(basi-cally, a text document) called style.css is used
to format the active Web document
Back to Basics
With all this talk of selectors, attributes, and
values, you might assume that we're about to
leave the Design mode of Dreamweaver and
go back to the basics of straight HTML cod-ing Well, you can do that, if you choose; how-ever, as you're about to find out, creating Cascading Styles Sheets is not difficult at all
As a matter of fact, Dreamweaver does most
of the work for you Now, isn't that nice of Adobe to provide us with so much help
Style Types
There are four types of styles, and as you might guess, each one performs a specific function when using Cascading Style Sheets
The four types of Styles are as follows:
◆ Class Creates a custom style that can be applied as a class attribute to a range or block of text
NOTE Class names must begin with a period and can contain any combination of letters and numbers If you don't enter a beginning period, Dreamweaver will enter it for you
◆ ID Creates a style and attaches it to a current HTML tag that contains a specific
ID attribute
NOTE ID names must begin with a pound (#) sign and can contain any combination of letters and numbers If you don't enter a beginning period, Dreamweaver will enter it for you
◆ Tag Redefines a current style and attaches it to a current HTML tag For example, changing the <body> tag so that each time it's applied the text is red
◆ Compound Defines specific formatting for a particular combination of tags or for all tags that contain a specific ID
attribute The selectors available from the pop-up menu are a:active, a:hover, a:link, and a:visited
Trang 4If you’re not sure where to start, you can create a Web page that already contains a CSS Layout Dreamweaver includes over 30 different CSS layouts The CSS layouts are divided into 4 categories based on the page’s column width: Fixed, Elastic, Liquid, or Hybrid Each of the built-in CSS layouts includes extensive comments that explain the lay-out, so beginning and intermediate designers can learn quickly After you select a CSS layout, you need to select the location (add to HTML head, create new file, or link to existing file) for the layout’s CSS style sheet A CSS layout can also be a starting point to create your own cus-tom template, which you can add to the list of layouts in the New Document dialog box
Creating a Web Page
with a CSS Layout
Create a Web Page with a CSS
Layout
Click the File menu, and then click
New.
The New Document dialog box
opens
Click the Blank Page category.
Select the Page Type you want
Select from the following CSS
Layouts:
◆ Fixed Column width is fixed (in
pixels) and remains the same in
a browser
◆ Elastic Column width is set
relative to the size of the text in
a browser (in ems)
◆ Liquid Column width is set
based on the percentage of the
browser’s width
◆ Hybrid Columns are set to a
combination of Fixed, Elastic,
and Liquid
Click the DocType list arrow, and
select the option you want
Click the Layout CSS list arrow,
and select the option you want:
◆ Add To Head Adds CSS for the
layout to the head of the new
page
6
5
4
3
2
1
2
5
4 3
Using Custom Layouts to Create New Documents
If you create a custom CSS layout, you can add it to the list of layouts
in the New Document dialog box When you create an HTML page with a CSS layout, the file needs to be saved with the htm extension and the CSS for the layout needs to reside in the head of the HTML page Move the saved HTML page to the following folder: Adobe Dreamweaver CS5\Configuration\Built-in\Layouts On Windows the Adobe Dreamweaver CS5 folder is located in the Program Files folder and on the Macintosh, the folder is located in the Applications folder
For Your Information
Trang 5◆ Create New File Add CSS for
the layout to a new external
CSS style sheet that attaches to
the new page
◆ Link To Existing File Attaches
an existing CSS file to the new
page
If you selected the Link To Existing
File option in the Layout CSS
menu, click the Attach Style Sheet
icon, select the CSS file you want
in the Attach External Style Sheet
dialog box, and then click OK.
Click Create.
If you selected the Create New
File option in the Layout CSS
menu, enter a name for the new
external file in the Save Style
Sheet File As dialog box
Create a CSS File
Click the File menu, and then click
New.
The New Document dialog box
opens
Select from the following methods:
◆ Blank Click the Blank Page
category, and then click CSS.
◆ Sample Click the Page from
Sample category, click CSS
Style Sheet, and then select the
sample you want
Click Create.
3
2
1
9
8
7
8
6 7
3 2
Trang 6As mentioned in the last section, CSS can be applied to an HTML docu-ment in one of three ways: Attributes, Tags, or Externally Although we will cover all three methods in this section, it's important to understand that the external method gives you the most control over the styles, once they've been created In the other two methods, the CSS styles created only apply to that one specific page, and changes to the styles must be performed by reopening the page The external method is like creating a text document of how you want a page or pages to display
Any changes to the formatting are performed to the text document
When the Web page opens, any changes made to the external docu-ment are immediately reflected in the active page… now that's what I call control
Creating CSS Styles
Create an Attribute or Tag Style
Open the Web page you want to
create a CSS style
Click the Format menu, point to
CSS Styles, and then click New.
Click the Selector Type list arrow
and then select a CSS style type:
◆ Attribute Style Select Class,
click the Name arrow, and then
select a style name, or type one
in Attribute style tags must
begin with a period
◆ Tag Style Select Tag, click the
Name arrow, and then select
an HTML tag (in this example,
body)
Click the Define In list arrow, and
then click (This Document Only).
Click OK.
Select a category, and then set the
properties you want for the CSS
style
Click OK.
7
6
5
4
3
2
1
4
5
7
6 3
Trang 7Create an External Style
Open the Web page you want to
create an external CSS style
Click the Format menu, point to
CSS Styles, and then click New.
Click the Class or Tag option (in
this example, tag)
Click the Name arrow, and then
select an HTML tag (in this
example, body.)
Click the Define In list arrow, and
then click New Style Sheet File.
Click OK.
Enter the file name for the CSS
style in the File Name input box
Leave the other options at their
default values, and then click
Save.
NOTE Dreamweaver creates a
folder in the active site called,
CSS, and this is where all style
sheets should be saved
Select a category, and then set the
properties you want for the CSS
style
Click OK.
10
9
8
7
6
5
4
3
2
8 7
10
9
See Also
See “Setting CSS Properties” on page
222 for information on setting CSS
properties for a rule
4
5 3