Chapter 2 introduce cascading style sheets. This chapter include content: Cascading style sheet basics, creating styles, using styles, manipulating styles, text formatting with CSS. Inviting you to refer.
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 Creating Styles 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 Fontfamily 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 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 blocklevel 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 .. .Cascading Style Sheet Basics Cascading Style Sheet Basics Creating Styles Using Styles Manipulating Styles Text Formatting with CSS Cascading Style Sheet Basics CSS... 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... 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