Introducing Cascading Style Sheets

Cascading Style Sheet Basics  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

Cascading Style Sheet Basics  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. – ID styles: format a unique item on a page.  Use ID styles to identify an object (or an area of a page) that appears only once – 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. – Selector Name:  If you selected Class from the Selector Type menu, then style Class style names must begin with a period.ClassName

Creating Styles  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.  If you selected the Compound option, then Dreamweaver lets you type any valid CSS selector type in the Selector field.

Creating Styles – Rule Definition  Specifies where the CSS code you create is stored.  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: 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 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.  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. – To remove an ID: 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.  Select a first-choice font from the list of “Available fonts”, or type in the font name.  Add the font to custom font list by clicking the << button

Text Formatting with CSS  Your first-choice font appears in the “Chosen fonts” list.  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 – 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.

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 indent: indent the first line of a paragraph – Whitespace: This property controls how the browser displays extra white space.

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