Introducing Cascading Style Sheets  Cascading Style Sheet Basics  Creating Styles  Using Styles  Manipulating Styles  Text 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 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.

Internal -External Style Sheets 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

Internal -External Style Sheets 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

 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 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 External Style 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

Text Formatting with CSS 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

Text Formatting with CSS 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

Text Formatting with CSS 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

Text Formatting with CSS 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.

Text Formatting with CSS 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.

Text Formatting with CSS CSS Type Properties in the Rule Definition Window:  Type category lets you set formatting options that affect text

Text Formatting with CSS  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

Text Formatting with CSS  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.

Text Formatting with CSS Block Properties: settings that affect how letters and words are displayed

Text Formatting with CSS  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 Formatting with CSS  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.

Text Formatting with CSS 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

Text Formatting with CSS  Bullet image: control of your bullet icon  Click the Browse button, and then, from your site folder, select a graphics file. outside

Text Formatting with CSS  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 margin Inside