introducing cascading style sheets cascading style sheet basics creating styles using styles ...

Introducing Cascading Style Sheets

Cascading Style Sheet Basics Creating Styles Using Styles Manipulating StylesText Formatting with CSS

Cascading Style Sheet Basics

CSS has many benefits: The pages look great and load faster Make updating your site easier With CSS, you can control the

properties of the HTML tag Dreamweaver CS4 is better than

ever at displaying complex CSS based designs

Internal -External Style Sheets

Internal style sheet: new style you create gets added to a style sheet that’s stored in the Web page itself. Internal style sheets appear in the

<head> portion of a Web page. It contain styles that apply only to

that page. It is a good choice when you have

a very specific formatting task for a single page.


External style sheet: new style you create gets added to a style sheet that’s stored in another file. An external style sheet, on the

other hand, contains only styles—no HTML—and you can link it to numerous pages

In fact, you can link it to every page on your Web site to provide a uniform


You can create both types of style sheets easily in Dreamweaver.

A single Web page can have both an external and an internal style sheet.

You can even attach multiple external style sheets to a single page.

Types of Styles

Styles come in several different types. Class styles: is one that you create,

name, and attach manually to text or an HTML tag. Class styles work much like styles in word processing and page layout programs.

Types of Styles

ID styles: is a type of style that lets you format a unique item on a page. - Use ID styles to identify an object

(or an area of a page) that appears only once

- EX: a Web site’s logo, copyright notice, main navigation bar, or a banner

Tag style: It applies globally to an individual HTML tag.

Creating Styles

Phase 1: Set Up the CSS Type have many ways to create a new style: On the CSS Styles panel, click the

new style button, or right-click anywhere in the CSS Styles panel, and then, from the menu that appears, select New

Or choose Format ->CSS Styles -

>New.

Creating Styles

Creating Styles

Selector Type: - Choose the kind of style you wish

to create: Class, ID , or Tag.- Compound, to create more

advanced style types such as pseudo-classes, attribute selectors and descendent selectors.

Creating Styles

Selector Name: - If you selected Class from the

Selector Type menu, then style Class style names must begin

with a period .ClassName- If you selected ID style then

names begin with a #IDName- If you chose Tag instead, then,

from the Tag pop-up select the HTML tag you want to redefine.

Creating Styles

- If you selected the Compound option, then Dreamweaver lets you type any valid CSS selector type in the Selector field.

Rule Definition- Specifies where the CSS code

you create is stored.

Creating Styles

- This document only: applies only to the current Web page -> internal style sheet.

- New Style Sheet File: not only creates a new external CSS file but also adds the necessary code in the current document to link it to that file ->external style sheet (saved with the name ends in .css)

Creating Styles

Phase 2: Defining the Style The CSS Rule Definition window

provides access to all the available formatting for styling text and graphics.

The Property inspector’s CSS mode lets you quickly create styles for specific text formatting such as choosing a font or a font size

Creating Styles

The CSS Rule Definition window

Creating Styles

Creating a Style with the Property Inspector

Using Styles

Applying a Class Style: Applying a class style to text:

- Select some words- In the Property inspector, select

the style name from the class menu or in CSS mode.

Using Styles

Applying a Class Style:

Using Styles

Applying a Class Style: Applying a class style to objects

- Select the object.- Select tag at the bottom of the

document window.- Then right click on the tag name

and select Set Class-> the Style name.

Using Styles

Applying a Class Style: Applying a class style to objects

Using Styles

Applying IDs to a Tag: To apply an ID to text:

- Select the text, and use the ID menu in the HTM mode of the Property inspector.

- Apply each ID name only once per page, this menu lists only IDs that exist in your style sheet but haven’t yet been applied to a tag on the page.

Using Styles

Removing a Class Style: To remove a class style from text

- Select the text.- In Property inspector choose

None from the Class menu (HTML mode) or <Remove Class> from the Targeted Rule menu (CSS mode).

Using Styles

Removing a Class Style To remove a class style from

another object (like an image):- Select the object, and then, from

the Property inspector’s Class menu, choose None.

- Or Format ➝ CSS Styles ➝ None to remove a style from any selection.

Using Styles

Applying IDs to a Tag: For non-text elements:

- Select the element, and then, in the Property inspector, type the ID name into the ID field.

You can also use the Tag selector, use the Set ID menu in the contextual menu that appears when you right-click (Ctrl-click) the tag.

Using Styles

To remove an ID From a text element

- Select the text, and then, from the Property inspector’s ID menu, select None.

For non-text elements- Just select the element, and

then, in the Property inspector’s ID field, delete the ID name.

Using Styles

Linking to an External Style Sheet: Whenever you create an external

style sheet, Dreamweaver automatically links it to the current document.

To use its styles in a different Web page, you must attach it to the page.- On the CSS Styles panel,

click the Attach ExternalStyle Sheet button

Using Styles

In the Attach External Style Sheet window Click Browse. - File/URL: Select the CSS (.css) file

you wish to attach to the document.

Using Styles

If the style sheet you select is outside the current site, Dreamweaver offers to copy the style sheet file into your site’s root folder ->click Yes.- Add as: two different methods of

attaching an external style sheet to a Web page (Link or Import)

- Media: setting is optional and dictates when the styles from the style sheet are applied

Manipulating Styles

Editing Styles: Dreamweaver provides many ways to edit styles: In the CSS Styles panel, select a

style, and then click the Edit Style button

Double-clicking the name of a style in the CSS panel.

In the CSS Styles panel, right-click the name of a style-> choose Edit.

Manipulating Styles

Deleting a Style Click the name of the style-> Press

delete key, or click Trash icon at the bottom of the panel

Manipulating Styles

Renaming a Class Style: On the Property inspector, in the

Class menu, choose Rename.

From the top menu, choose the name of the style you wish to rename.

In the “New name” box, type the new style name ->OK

Text Formatting with CSS

Choosing a Font Applying font formatting: You can

use either- The Font menu in the Property

inspector’s CSS mode- Or the CSS Rule Definition

window’s Font-family menu


Choosing a Font Creating custom font lists: From the

Property inspector’s Font menu, select Edit Font List, select Format->Font ->Edit Font List.

1) Select a first-choice font from the list of “Available fonts”, or type in the font name.

2) Add the font to custom font list by clicking the << button


3) Your first-choice font appears in the “Chosen fonts” list.

4) Repeat steps 2 and 3 for each font you wish to include in your custom list


Changing the Font Size: You can use one of the two way: The Size menu in the Property

inspector’s CSS mode The CSS Rule Definition window’s

Font-size menu


The Font Size include 4 group: None: default size The numeric: 9->36 in pixels. The options xx-small->xx-large

indicate fixed sizes, replacing the sizes 1->7 used with the old HTML

The options: smaller and larger are relative sizes, meaning that they shrink or enlarge the selected text based on the default size.


Picking a Font Color: To set the color of text, use the CSS Color property. Use the Property inspector’s CSS

mode Or assign a text color in the Text

category of the CSS Rule Definition window.


CSS Type Properties in the Rule Definition Window: Type category lets you set

formatting options that affect text


- Font: choose a font from the Font menu.

- Size: pixels, ems, and percentages.

- Weight: Weight refers to the thickness of the font

- Style: italic, oblique, or normal- Variant: normal or small-caps


- Line Height: To create more space between lines.

- Case: you can automatically capitalize text.

- Decoration: This strange assortment of five checkboxes lets you dress up your text.

- Color: Set the color of the style’s text using Dreamweaver’s color box.


Block Properties: settings that affect how letters and words are displayed


Word spacing: adding or removing space between words.

Letter spacing: space between letters.

Vertical alignment: change the vertical placement of an object.

Text align: controls the alignment of a block-level element like a paragraph or table.


Text indent: indent the first line of a paragraph

Whitespace: This property controls how the browser displays extra white space.

Display defines: how a Web browser should display a particular element like a paragraph or a link.


List Properties: To control bulleted and numbered lists properties. Type: Select the type of bullet

you’d like to use in front of a list item.- disc, circle, square, decimal


Bullet image: control of your bullet icon- Click the Browse button, and

then, from your site folder, select a graphics file.

outside


Position: controls how the bullet is placed relative to the list item’s text.- The “outside” : the bullet

outside the margin of the text.- The “Inside”: bullet within the

text marginInside

introducing cascading style sheets cascading style sheet basics creating styles using styles ...

Documents

type of style

style class style names

kind of style

types of styles styles

internal style sheets

style sheet thats

types of style sheets

file external style