Вы находитесь на странице: 1из 38
CSS Essentials Using Dreamweaver CS3 University of California at Berkeley Haas School of Business
CSS Essentials
Using Dreamweaver CS3
University of California at Berkeley
Haas School of Business
CSS Essentials Using Dreamweaver CS3 University of California at Berkeley Haas School of Business
CSS Essentials Using Dreamweaver CS3 University of California at Berkeley Haas School of Business
AcademyX © 2008 All rights reserved 601 Montgomery St. Suite 409 San Francisco, California 94111

AcademyX © 2008 All rights reserved

601 Montgomery St. Suite 409 San Francisco, California 94111 United States of America

(415) 392-8024 http://www.academyx.com/

St. Suite 409 San Francisco, California 94111 United States of America (415) 392-8024 http://www.academyx.com/
CSS Essentials Using Dreamweaver CS3 1. Basics of CSS 2. CSS in Dreamweaver CS3 3.

CSS Essentials Using Dreamweaver CS3

1. Basics of CSS

2. CSS in Dreamweaver CS3

3. CSS for Layout

4. CSS Combinations

5. Resources Appendix A: CSS

Copyright © 2008
Copyright © 2008

Copyright © 2008

3

1. Basics of CSS Copyright © 2008 Copyright © 2008 4

1. Basics of CSS

Copyright © 2008
Copyright © 2008

Copyright © 2008

4

1-1: HTML and CSS Together  Cascading Style Sheets (CSS) is the standard style language

1-1: HTML and CSS Together

Cascading Style Sheets (CSS) is the standard style language for the Web, and it allows you to control how HTML elements appear in a browser. For example, you can use CSS to define how <h1> or <p> elements look on all the pages in your site.

HTML and CSS are both interpreted by the browser

HTML structures the content

CSS modifies its presentation

Copyright © 2008
Copyright © 2008

Copyright © 2008

5

1-2: Web Browsers  Different web browsers interpret HTML and CSS differently  At a

1-2: Web Browsers

Different web browsers interpret HTML and CSS differently

At a bare minimum you should test your website in Internet Explorer and Firefox

They are the most popular web browser and will show you how your pages appear to the largest segment of your audience.

Although traditionally you can only run one version IE on your Windows desktop, you should consider testing the pages on different versions of IE because they render CSS differently. You may find this tool useful for running multiple versions of IE http://tredosoft.com/Multiple_IE

You should, of course, also check your web pages in other browsing environments as well

Safari (both Mac and Windows)

Opera

Netscape and Mozilla

Mobile browsers, too.

Copyright © 2008
Copyright © 2008

Copyright © 2008

6

1-3: Valid HTML and DOCTYPE  The browser needs to know what version of HTML

1-3: Valid HTML and DOCTYPE

The browser needs to know what version of HTML you are employing in order to work well with CSS

The DOCTYPE declaration starts the document

If you don’t include a DOCTYPE declaration, the browser will interpret the HTML code in Quirks mode

TRY IT:

1. Open 01exr_basics.html in any browser

2. View the source code

3. Review the DOCTYPE declaration and the use of XHTML with the instructor

declaration and the use of XHTML with the instructor DOCTYPE for XHTML transitional Copyright © 2008

DOCTYPE for XHTML transitional

Copyright © 2008
Copyright © 2008

Copyright © 2008

7

1-4: Location of CSS Rules  CSS directions can either be  Grouped together into

1-4: Location of CSS Rules

CSS directions can either be

Grouped together into stylesheet files

External to the HTML document

<link rel="stylesheet" type="text/css" href="file.css" />

Internal or embedded within the HTML document

<style type="text/css"> CSS code </style>

Individually applied inline - within an element

<element style="CSS code"></element>

TRY IT:

1. Open 01sol_basics.html in any browser

2. View the source code for inline style rules

3. Open 02sol_rules.html in any browser

4. View the source code for internal stylesheet rules

Reference to an external CSS file An internal CSS stylesheet An inline style instruction
Reference to an
external CSS file
An internal CSS
stylesheet
An inline style
instruction
Copyright © 2008
Copyright © 2008

Copyright © 2008

8

1-5: Structure of a CSS Rule  A CSS rule  selects an item for

1-5:

Structure of a CSS Rule

A CSS rule

selects an item for modification

assigns one or more property values

CSS rules ascribe values to properties for a selected element using a basic syntax of property : value;

color : red;

background-color : yellow;

A stylesheet is a group of rules

Rules are read top-down in the stylesheet

Later rules augment or update earlier rules

The rule
The rule

p

color : red;
color : red;
One or more property assignments
One or more
property
assignments
The selected item or selector
The selected
item or
selector
Copyright © 2008
Copyright © 2008

Copyright © 2008

9

1-6: Tag Selectors and Sizes  Rules can be created for Tag (also called Element)

1-6: Tag Selectors and Sizes

Rules can be created for Tag (also called Element) Selectors. These rules will modify all instances of that tag in the web page.

Selectors. These rules will modify all instances of that tag in the web page. Copyright ©
Selectors. These rules will modify all instances of that tag in the web page. Copyright ©
Selectors. These rules will modify all instances of that tag in the web page. Copyright ©
Copyright © 2008
Copyright © 2008

Copyright © 2008

10

1-7: IDs and Classes  ID selectors let you select one item in a web

1-7: IDs and Classes

ID selectors let you select one item in a web page based upon its unique identifier that is set in the HTML

<div id=“header"> xyz </div>

HTML  <div id=“header"> xyz </div>  Class selectors let you select all items in a

Class selectors let you select all items in a web page that are members of a class specified in the HTML

<p class=“blurbtitle1"></p> <p><span class=“namebold"> xyz </span></p>

class=“namebol d"> xyz </span></p>  Elements can be assigned both class and id properties
class=“namebol d"> xyz </span></p>  Elements can be assigned both class and id properties

Elements can be assigned both class and id properties

Class characteristics override default element properties

Id characteristics override class and default properties

Copyright © 2008
Copyright © 2008

Copyright © 2008

11

2. CSS in Dreamweaver CS3 Copyright © 2008 Copyright © 2008 12

2. CSS in

Dreamweaver CS3

Copyright © 2008
Copyright © 2008

Copyright © 2008

12

2-1: Creating an External Stylesheet using a Starter Page  In Dreamweaver, you can create

2-1: Creating an External Stylesheet using a Starter Page

In Dreamweaver, you can create a new, external stylesheet with pre-set rules by using CSS Starter Pages. You can modify the rules afterwards.

TRY IT:

1. Open Dreamweaver.

2. If necessary, define a local site to the class exercises folder.

3. Go to File New…

4. In the New Document dialog box, select Page from Sample on the left.

5. Under Sample Folder, select CSS Style Sheet.

6. Under Sample Page, select the stylesheet that you would like to use.

7. Click Create.

8. Save the file in your local site folder as test_starter.css.

Click Create. 8. Save the file in your local site folder as test_starter.css . Copyright ©
Copyright © 2008
Copyright © 2008

Copyright © 2008

13

2-2: Creating a Blank External Stylesheet  You can also create a blank external stylesheet

2-2: Creating a Blank External Stylesheet

You can also create a blank external stylesheet to start from scratch.

TRY IT:

1. In Dreamweaver, go to File New…

2. In the New Document dialog box, select Blank Page on the left.

3. Under Page Type, select CSS.

4. Click Create.

5. Save the file in your local site folder as test_blank.css.

4. Click Create. 5. Save the file in your local site folder as test_blank.css . Copyright
Copyright © 2008
Copyright © 2008

Copyright © 2008

14

2-3: Attaching an External Stylesheet  An external stylesheet must be attached to a web

2-3: Attaching an External Stylesheet

An external stylesheet must be attached to a web page before you can use those styles in the web page

If an external stylesheet is already attached, you will see it listed in the CSS Styles panel when you are viewing the web page

TRY IT:

panel when you are viewing the web page  TRY IT: 1. In Dreamweaver, open 03exr_external.html

1. In Dreamweaver, open 03exr_external.html.

2. In the CSS Styles panel, click the Attach Style Sheet button

3. In the dialog box, click Browse.

4. Select test_blank.css and click OK.

5. Click OK.

4. Select test_blank.css and click OK. 5. Click OK.  EXTRA PRACTICE:  Open 03lab_external.html and
4. Select test_blank.css and click OK. 5. Click OK.  EXTRA PRACTICE:  Open 03lab_external.html and

EXTRA PRACTICE:

Open

03lab_external.html

and attach test_starter.css.

Copyright © 2008
Copyright © 2008

Copyright © 2008

15

2-4: Creating a Tag Style Rule  TRY IT: 1. In 03exr_external.html, click the New

2-4: Creating a Tag Style Rule

TRY IT:

1. In 03exr_external.html, click the New CSS Rule button.

2. In the New CSS Rule dialog box, select Tag as the Selector Type.

3. From the Tag drop-down, select a tag, such as h1.

4. Make sure that test_blank.css is displayed in the Define in field.

5. Click OK.

6. In the CSS Rule Definition dialog box, select your options.

7. Click OK.

OK. 6. In the CSS Rule Definition dialog box, select your options. 7. Click OK. Copyright
OK. 6. In the CSS Rule Definition dialog box, select your options. 7. Click OK. Copyright
OK. 6. In the CSS Rule Definition dialog box, select your options. 7. Click OK. Copyright
Copyright © 2008
Copyright © 2008

Copyright © 2008

16

2-5: Editing a Style Rule  TRY IT: 1. In the CSS Styles panel, double-click

2-5: Editing a Style Rule

TRY IT:

1. In the CSS Styles panel, double-click a rule.

2. In the Style Definition dialog box, make your changes.

3. Click OK.

You can also make changes directly from the Properties list in the CSS Styles panel.

EXTRA PRACTICE:

In 03lab_external.html, edit some of the existing rules.

EXTRA PRACTICE:  In 03lab_external.html, edit some of th e existing rules. Copyright © 2008 Copyright
Copyright © 2008
Copyright © 2008

Copyright © 2008

17

2-6: Creating a Class Style Rule  To use a class style rule, you must

2-6: Creating a Class Style Rule

To use a class style rule, you must first define the rule and then apply it to selected text.

TRY IT:

1. Click the New CSS Rule button.

2. In the New CSS Rule dialog box, select Class as the Selector Type.

3. In the Name field, type the name of the class, such as .question. Class style names always begin with a period.

4. Make sure that test_blank.css is displayed in the Define in field.

5. Click OK.

6. In the CSS Rule Definition dialog box, select your options.

7. Click OK.

OK. 6. In the CSS Rule Definition dialog box, select your options. 7. Click OK. Copyright
Copyright © 2008
Copyright © 2008

Copyright © 2008

18

2-7: Creating an ID Style Rule  TRY IT: 1. Click the New CSS Rule

2-7: Creating an ID Style Rule

TRY IT:

1. Click the New CSS Rule button.

2. In the New CSS Rule dialog box, select Advanced as the Selector Type.

3. In the Selector field, type the name of the ID, such as #footer. ID style names always begin with a #.

4. Make sure that test_blank.css is displayed in the Define in field.

5. Click OK.

6. In the CSS Rule Definition dialog box, select your options.

7. Click OK.

OK. 6. In the CSS Rule Definition dialog box, select your options. 7. Click OK. Copyright
Copyright © 2008
Copyright © 2008

Copyright © 2008

19

2-8: Applying a Class or ID Style  TRY IT: 1. In Dreamweaver, select the

2-8:

Applying a Class or ID Style

TRY IT:

1. In Dreamweaver, select the text, object, or tag to which you want to apply a style.

2. In the Property Inspector, select a style from the Style drop-down list.

Inspector, select a style from the Style drop-down list.  To remove a style, select “none”

To remove a style, select “none” from the Style drop-down list.

Copyright © 2008
Copyright © 2008

Copyright © 2008

20

2-9: Automatic Styles in Dreamweaver  In recent versions of Dreamweaver, an internal style is

2-9: Automatic Styles in Dreamweaver

In recent versions of Dreamweaver, an internal style is automatically created if you format any text.

TRY IT:

1. Select some text.

2. Use the Properties panel to make some formatting changes, such as bold, italic, or a color.

3. Notice that the Style properties displays a new style, such as style1. Click the Code button to view the source code for the page and locate the internal style rules.

button to view the source code for the page and locate the internal style rules. Copyright
Copyright © 2008
Copyright © 2008

Copyright © 2008

21

3. CSS for Layout Copyright © 2008 Copyright © 2008 22

3. CSS for Layout

Copyright © 2008
Copyright © 2008

Copyright © 2008

22

3-1: IDs and Classes with DIVs  Elements like <div> and <span> are useful when

3-1:

IDs and Classes with DIVs

Elements like <div> and <span> are useful when you need to ascribe CSS properties to content

<div> is a block level element and can contain other blocks

<span> is an inline element which belongs inside a block

DIV tags are often used with IDs to identify and customize specific areas of a web page, such as the header, footer, left column, center column, right column

DIV tags are often nested to create structure

center column, right column  DIV tags are often nested to create structure Copyright © 2008
center column, right column  DIV tags are often nested to create structure Copyright © 2008
center column, right column  DIV tags are often nested to create structure Copyright © 2008
center column, right column  DIV tags are often nested to create structure Copyright © 2008
center column, right column  DIV tags are often nested to create structure Copyright © 2008
Copyright © 2008
Copyright © 2008

Copyright © 2008

23

3-2: Creating DIV sections  TRY IT: 1. Create a new, blank HTML page. 2.

3-2: Creating DIV sections

TRY IT:

1. Create a new, blank HTML page.

2. Attach test_blank.css as an external stylesheet.

3. In the Common toolbar, click the Insert DIV Tag button.

4. If the ID style has been defined already, select it from the ID drop-down and click OK.

5. Otherwise, type the name of a new ID, such as header, and click New CSS Style. Define a new ID style rule, including Box properties for Width and Height. Click OK to close the Insert Div Tag dialog box.

Height. Click OK to close the Insert Div Tag dialog box.  EXTRA PRACTICE:  Add
Height. Click OK to close the Insert Div Tag dialog box.  EXTRA PRACTICE:  Add
Height. Click OK to close the Insert Div Tag dialog box.  EXTRA PRACTICE:  Add

EXTRA

PRACTICE:

Add

additional

DIV

sections,

such as main, side1, middle, side2, footer.

Add

a

Background

property for

Background

color.

Copyright © 2008
Copyright © 2008

Copyright © 2008

24

3-3: Box Properties  The W3C CSS standard s uggests that every item within a

3-3: Box Properties

The W3C CSS standard suggests that every item within a browser window has a set of properties that control its "box", i.e., width & height, spacing and border

The spacing between an item’s content and its border is its padding, and the spacing outside of the border are the item’s margins. An item’s margins, padding and border can be defined for each of the four sides separately

margins, padding and border can be defined for each of the four sides separately Copyright ©
Copyright © 2008
Copyright © 2008

Copyright © 2008

25

3-4: Applying Box Properties  TRY IT: 1. Type some text in one of your

3-4: Applying Box Properties

TRY IT:

1. Type some text in one of your divisions. Notice

that

the text displays close to the edge of the

DIV

border.

2. In the CSS Style panel, double-click the ID of the division.

3. In the CSS Rule Definition dialog box, click the

Box category.

4. Enter values for padding and/or margin.

5. Click OK.

click the Box category. 4. Enter values for padding and/or margin. 5. Click OK. Copyright ©
Copyright © 2008
Copyright © 2008

Copyright © 2008

26

4. CSS Combinations Copyright © 2008 Copyright © 2008 27

4. CSS Combinations

Copyright © 2008
Copyright © 2008

Copyright © 2008

27

4-1: Resolving CSS Conflicts  Conflicts occur when text or objects are nested within several

4-1:

Resolving CSS Conflicts

Conflicts occur when text or objects are nested within several tags which have conflicting CSS rules applied to them

Below are some guidelines that affect how conflicts are resolved:

Many browsers give the end-user (user styles) great control over display.

Most browsers will honor CSS rules over default rules when they are explicitly defined for that element or item.

Browser assigned properties will often win out over “inherited” properties. For instance, the <em> will not inherit font- style:normal; because it has a built-in italic property.

If several style sheets are coded or referenced within a document, the one that occurs last (order of occurrence) in the markup is given precedence.

The closer a rule is to its usage (proximity), the higher the priority. An inline style will rank higher than an internal style, which will rank higher than an external style.

Class rules are prioritized over element rules.

ID rules are prioritized over class rules.

Inline styles are given greater weight than element rules, class rules, or ID rules.

If the phrase !important is added to a rule, that rule is ranked higher than competing rules.

Increased specificity of the selector will increase the weight of the rule. A rule that affects all <p> elements will be overridden by a rule that affects only the <p> elements nested inside of a <td> element.

Copyright © 2008
Copyright © 2008

Copyright © 2008

28

4-2: Pseudo-Selectors  Changing the properties of the first letter of a paragraph or the

4-2: Pseudo-Selectors

Changing the properties of the first letter of a paragraph or the first line of a paragraph can be done in CSS with a pseudo selector

p:first-letter { font-size : 1.5em; }

p:first-line { color : #333333; }

You can create rules to change the color of the hyperlinks in different states

a:link

a:visited

a:hover

a:active

The colon separates the parent item from its pseudo selector Font sizing is complicated by
The colon
separates the
parent item from its
pseudo selector
Font sizing is
complicated by cross
browser
interpretation issues.
Be sure to check
fonts in as many
different browsers as
possible
Copyright © 2008
Copyright © 2008

Copyright © 2008

29

4-3: Creating Pseudo-Selectors  TRY IT: 1. Click the New CSS Rule button. 2. In

4-3: Creating Pseudo-Selectors

TRY IT:

1. Click the New CSS Rule button.

2. In the New CSS Rule dialog box, select Advanced as the Selector Type.

3. In the Selector field, type the name of the pseudo-selector, such as p:first-line or a:link.

4. Make sure that test_blank.css is displayed in the Define in field.

5. Click OK.

6. In the CSS Rule Definition dialog box, select your options.

7. Click OK.

OK. 6. In the CSS Rule Definition dialog box, select your options. 7. Click OK. Copyright
Copyright © 2008
Copyright © 2008

Copyright © 2008

30

4-4: Advanced Selection  The CSS standard provides several other mechanisms for selecting items for

4-4: Advanced Selection

The CSS standard provides several other mechanisms for selecting items for modification, among them:

Group selection

Descendant selector

Child selector

Universal selector

You may group one or more selectors together if they have the same set of properties by using a comma

p:first-line, ol.myList { color : red; }

You may select the descendant(s) of an item by separating the two selectors with a space - only the item next to the curly brace is selected and the previous item(s) simply provide context

#myMainDiv p { font-family:serif;} -- selects any paragraph that is nested within the #myMainDiv

You may select only direct children excluding other descendants by separating the parent from the child with a >

#topSection > a { text-decoration: underline;} -- selects only direct children and nothing nested further

You can select everything on the page with an * or use it to specify context

* { margin: 0; }

Copyright © 2008
Copyright © 2008

Copyright © 2008

31

4-5: Applying Advanced Selection Rules  TRY IT: 1. Type some text into one of

4-5: Applying Advanced Selection Rules

TRY IT:

1. Type some text into one of your divisions. Be sure to press <Enter> so Dreamweaver can assign a tag to your text.

2. Select the text.

3. In the CSS Styles panel, click the New CSS Rule button.

4. Notice that the New CSS Rule dialog box displays a descendent selector, such as #header p.

5. Click OK.

6. Select your property options, such as font, size or color.

7. Click OK.

OK. 6. Select your property options, such as font, size or color. 7. Click OK. Copyright
Copyright © 2008
Copyright © 2008

Copyright © 2008

32

5. Resources Copyright © 2008 Copyright © 2008 33

5. Resources

Copyright © 2008
Copyright © 2008

Copyright © 2008

33

5-1: Resources  HTML & XHTML: The Definitive Guide by Chuck Musciano and Bill Kennedy

5-1: Resources

HTML & XHTML: The Definitive Guide by Chuck Musciano and Bill Kennedy

CSS: The Definitive Guide by Eric Meyer

Designing with Web Standards by Jeffrey Zeldman

HTML, XHTML & CSS by Elizabeth Castro

http://www.w3schools.com

http://www.w3.org

http://www.positioniseverything.net

Copyright © 2008
Copyright © 2008

Copyright © 2008

34

Appendix A Copyright © 2008 Copyright © 2008 35

Appendix A

Copyright © 2008
Copyright © 2008

Copyright © 2008

35

Basic CSS Selectors Selectors Example Rule Descriptions element p { color : blue; } Selects

Basic CSS Selectors

Selectors

Example Rule

Descriptions

element

p

{ color : blue; }

Selects every occurrence of a paragraph element.

.class

.legal { font-size : 75%; }

Selects only elements of that class. Classes may be used on multiple elements.

<p class="legal">

</p>

#id

#sideBar { background-color : #fefefe; }

Selects only the single identified element.

<div id="sideBar">

</div>

Ancestor

descendant

.nav a { color : red; }

Selects only those <a> tags nested inside the context. <div class="nav"><a> </a></div>

parent > child

#topPart > a { color : red; }

Selects only those <a> tags that are direct children of the topPart <div id="topPart"> <a>this link is selected</a> <p><a> this link is not selected</a></p> </div>

*

*

{ margin: 0 }

Selects universally

:active, :hover, :link, :visited, :focus

a:hover { font-weight : bold; }

Selects the <a> during the specified (hover) state only.

:first-letter, :first-line

p:first-letter

Selects only the specified component for modification.

blockquote:first-line

Copyright © 2008
Copyright © 2008

Copyright © 2008

36

Common CSS Properties Property Valid Values   Example color color   color : red;

Common CSS Properties

Property

Valid Values

 

Example

color

color

 

color : red;

background-color

color

 

background-color : #ffffcc;

background-image

url(image file) | none

 

background-image : url(tile.gif);

background-repeat

repeat | repeat-x | repeat-y | no-repeat

 

background-repeat : no-repeat;

background-attachment

scroll | fixed

 

background-attachment : fixed;

background-position

 

top | center | bottom

||

left | center | right

|| x

background-position : 15% 45%;

y

font-family

[font name or type]

 

font-family : Verdana, sans-serif;

font-style

normal | italic

 

font-style : italic;

font-variant

normal | small-caps

 

font-variant : small-caps;

font-weight

normal | bold

 

font-weight : bold;

font-size

value [unit]

 

font-size : 95%;

letter-spacing

normal | value [unit]

 

letter-spacing : 1.1em;

text-decoration

none | underline | overline | line-through | blink

text-decoration : none;

vertical-align

sub | super

 

vertical-align : super;

text-transform

capitalize | uppercase | lowercase | none

 

text-transform : lowercase;

text-align

left | right | center | justify

 

text-align : center;

text-indent

value [unit]

 

text-indent : 1ex;

line-height

normal | value [unit]

 

line-height : 4mm;

list-style-type

disc | circle | square | decimal | lower-roman | upper-roman | lower-alpha | upper-alpha | none

 

list-style-type : square;

list-style-image

url(file) | none

 

list-style-image : url(dot.gif);

list-style-position

inside | outside

 

list-style-position : inside;

Copyright © 2008
Copyright © 2008

Copyright © 2008

37

CSS Box and Affiliated Properties   All box properties below may be set for the

CSS Box and Affiliated Properties

 

All box properties below may be set for the individual sides of the box (top, right,

bottom or left) with the extension : margin-left: 5px; or with multiple values:

margin :

NOTE:

3px 5pt; If multiple values : property : top/bottom left/right; or property : top right bottom left;

 

margin (-left, -top, -right, - bottom)

value [unit]

margin : .5in;

 

padding (-left, -top, -right, - bottom)

value [unit]

padding : 5mm .3cm;

 

border-width (-left, -top, -right, - bottom)

value [unit] ||

thin | medium | thick | length

border-width : 3px 5px 3px 5px;

border-color (-left, -top, -right, - bottom)

color

border-color : #339933;

 

border-style (-left, -top, -right, - bottom)

none | solid | double | groove | ridge | inset | outset

border-style : solid;

 

border (-left, -top, -right, - bottom)

width style color

border : thin solid blue;

 

float

none | left | right

float : right;

clear

none | left | right | both

clear : left;

display

none | block | inline | list-item

display : block;

 

height, width

value [unit] | auto

height : 200px; width : 85%;

left, top

value [unit] | auto

top : 0px;

left : 30%;

overflow

visible | hidden | scroll | auto

overflow : scroll;

 

position

absolute | relative | static | fixed

position : absolute;

 

visibility

visible | hidden | inherit

visibility : visible;

 

z-index

auto | integer

z-index : 5;

Copyright © 2008
Copyright © 2008

Copyright © 2008

38