Random Recipes

Adobe Dreamweaver CS3: Using Cascading Style Sheets  Using the CSS Styles Tab  Creating Cascading Style Sheets  Creating Style S heets & Formatting  Editing Fonts, Color, Links, Lists & Images Setting up a page for Cascading Style Sheets (CSS) may be overwhelming, but you can master this seemingly complicated process by using Dreamweaver's CSS Styles tab to create and modify CSS styl es in Dreamweaver. This document describes accessing and using the CSS Styles tab, the tool that you will use to create and define CSS styles. Accessing the CSS Styles Tab Be fore you can begin creating CSS styles, you need to open the CSS Styles tab. After you have accessed the CSS Styles tab, you can begin creating and applying styles in embedded styles sheets or external style sheets. 1. To access the CSS Styles tab, from the Window menu, select CSS Styles OR Press [ Shift ] + [ F11 ] The CSS Styles tab appears. Understanding the CSS Styles Tab The CSS Styles views: Apply Styles and Edit Styles. To use Cascading Style Sheets effectively, it is important to understand and become comfortable using both of these views. Apply Styles View The Apply Styles window lists the different custom styles that have been appl ied to a web page or to specific elements on a web page. In the Apply Styles window, styles are identified by name, which is preceded by an icon indicating the style type (external or embedded). This information can be helpful if you have multiple custom s tyles assigned to the same document. Use the Apply Styles view to apply existing styles to elements on the web page. For more information on applying styles, see Applying Styles. NOTE: If you have not yet defined any CSS styles, the A pply Styles view will only show one entry: No CSS Style . As you define custom styles, those styles are added to the view. Edit Styles View The Edit Styles window lists all of a web page's CSS styles and their characteristics. The style names are listed in the left column of the Edit Styles window, and their corresponding descriptions are listed on the right. Use the Edit Styles window to modify existing styles. If you add a new style, it will automatically be added to the list. C S S Styles Toolbar In addition to the Apply Styles and Edit Styles windows, the CSS Styles tab also features a Button Function Attach an existing external CSS style sheet Create a new embedded or external CSS rule Edit an existing CSS style Creating Style Sheets Dreamweaver allows you to create embedded styles, which define styles within the individual web page's HTML code, or external style sheets , which define styles by linking a web page to a style sheet file (.css). This document explains the three different types of CSS styles and shows you how to create and attach, or re ference, both types of style sheets. NOTE: For more information on types of style sheets and the advantages of using CSS, refer to styles, refer to Formatting wit h CSS Styles and Using the CSS Rule Definition Dialog Box. For information on accessing and using the CSS Styles tab, refer to Using the CSS Styles Tab.  Types of Styles  Creating Cascading Style Sheets  Attaching Style Sheets Types of Styles Dreamweaver allows you to define three different types of CSS styles: class, tag, and advanced (selectors). Types of Styles: Class Class, or custom, styles are applied to individual eleme nts of a web page. They are very useful because they allow designers to create style variations and apply them to existing HTML tags, text, or objects at any time. Class styles give designers the maximum flexibility that tag and advanced (which both define the style of tags at each occurrence) do not offer. As class styles are defined, style definitions are stored in the CSS portion of a document. However, when you apply a class style to a pre - existing HTML tag, a special class property is added to the HTM L code (e.g., H1 class="titleH1 ;<&#xlass;&#x=-5";ti-;tl-;Ϥ";"). When you apply a class style to a section of text or object that is not an HTML tag, the selection of text cannot be identified by an individual tag. Thus, instead of a simple class property, a spas-1;�pa4;&#xn000;n tag is also added to the HTML as a text wrap (e.g., span class="title"spa;&#xn -6;Äla;&#xss=-;"t-;it-;le";ကReview for Test 1/sp; n00;/span). Since applying a class style removes formatting properties from the HTML, using class styles can greatly reduce the length of the HTML code but can also be unwise if your page viewers are using browsers that do not support CSS. For additional information on the HTML considerations of custom styles, refer to Formatting with CSS Styles. Types of Styles: Tag HTML code consists of tags that indicate how web pages should be displaye d. Each tag has a default style applied each time the tag is used (e.g., Heading 1 ). When you use CSS to redefine the style of HTML tags, all text or elements within those tags are updated to reflect changes. Types of Styles: Advanced (Selectors) Advanced CSS styles are defined much like HTML tags. However, unlike HTML tags, which can be defined through the Properties pane or in the HTML code itself, CSS selectors can be defined only in style sheets. Dreamweaver allows you to define styles for four differen t types of CSS selectors: link, visited link, hover, and active link. Selector Function a: link Defines the style of an idle link a: visited Defines the style of a previously visited link a: hover Defines the style of a link when the mouse travels over it a: active Defines the style of an active link Creating Cascading Style Sheets You can create CSS style sheets at any time in the design process. Although there are two ty pes of CSS and three types of styles, the process for creating styles is similar in both types of style sheets. 1. If you have not saved your web page, save it 2. Access the CSS Styles tab 3. From the CSS Styles tab, click NEW CSS RULE The New CSS Rule dialog b ox appears. 4. To determine the type of style you will be defining, for Selector Type , select the desired option For a discussion of these options, refer to Types of Styles. The dialog box refreshes with options appropriate to your selection. 5. In the Name text box, type the class name OR From the Tag or Selector pull - down list, select HTML tag or CSS Selector for which you are creating the style 6. If you are creating an external style sheet, from the Define in pull - down list, select (New Style Sheet File) If you are creating an embedded style, for Define in , select This document only 7. Click OK NOTE: If you are creating an embedded style, the CSS Style Definition dialog box appears. Go to Step 9. 8. If you are creating an external style sheet, the Save Style Sheet File As dialog box appears a. Using the Save in pull - down list, select a save location for the style sheet b. In the File name text box, type a name for the style sheet c. Click SAVE The new style sheet is saved as a separate file. The CSS Style Definition dial og box appears. 9. From the Category section, select the style element you would like to redefine Options for that category appears on the right side of the dialog box. 10. Select the desired options HINT: For more information on style definition, refer to Usi ng the CSS Rule Definition Dialog Box. 11. Repeat steps 9 and 10 until your new style definitions are complete 12. Click OK NOTES: The CSS style will be added to the style sheet. Embedded styles will automatically apply to corresponding elements on the web page. External styles will automatically apply to corresponding elements on all pages which reference the style sheet. Unlike embedded style sheets, an external style sheet is treated as a separate file. To view or edit the new styles, you must open the style sh eet file. Attaching Style Sheets After you have created an external style sheet, you need to attach the style sheet to the files that will reference it. If you have created an embedded style sheet, this step is unnecessary because the style sheet is already attached to the file you are working on. 1. Open the web page that will link to the style sheet 2. From the Design pane, select the CSS Styles tab 3. From the CSS Styles tab, click ATTACH STYLE SHEET The Attach External Style Sheet dialog box appears. 4. To select a style sheet file, a. Click BROWSE... The Select Style Sheet File dialog box appears. b. Using the Look in pull - down list, locate and select the style sheet c. Click OK 5. From the Media pull - down list, select the type of media your style sheet applies to 6. For Add as , select Link or Import HINT: Most web designers choose to attach style sheets using Link , which uses a LINK&#x-5LI;NK; tag in the HEADH-7;-8A;퐀 section of the HTML. However, web pag es using both embedded and external style sheets should reference the style sheet using Import , which uses the @im@im;&#x-2po;&#xrt00;port tag in the HEADHEA;]-7; section of the HTML. 7. Click OK The external style sheet is now attached to the file, and all style definitions automat ically apply to the web page. Formatting with CSS Styles After you have created an embedded or external style sheet, you can apply the created style to text, objects, or elements as you create your web page. You may also find that you want to edit a creat ed style, or even delete the created style altogether. Applying Styles In order to view the formatting created by a cascading style sheet, the styles need to be applied to the desired text or tag(s). HTML Tags and CSS Selectors When you redefine an existing HTML tag or CSS selector, the style definition is automatically applied to the HTML code. Custom Styles Since custom styles are not attached to a specific HTML tag when the y are created, you need to apply them to individual page elements. You can customize the appearance of elements on a web page using both Class (custom) styles and Tag styles. Applying Custom Styles to a Selected Element: CSS Pane 1. Select the text or eleme nt you wish to apply the Class style to OR Place the insertion point on the same line with the text or element you wish to apply the Class style to 2. From the CSS Styles pane, click ALL 3. In the All Rules scroll box, right - click the desired Class style » select Apply NOTES: All Class styles are designated with a period (.) preceding the name (e.g., .greentext, .allcaps). The style is applied. Applying Custom Styles to a Selected Element: Design View 1. From the Design view, select the text or element 2. Ri ght click your selection » select CSS Styles » the Class style to apply Applying Custom Styles to a Selected Element: Properties Pane 1. In the Design view, select the object or text that you want to apply the Class style to 2. In the Properties pane, from th e S tyle pull - down list, select the appropriate Class style Editing Styles As you are designing your web pages, you may decide that you would like to change a style that you have a lready defined. For information on using the Editing Styles view, see Edit Styles. 1. From the CSS Styles pane, click ALL 2. In the All Rules scroll box, select the style you want to edit 3. Right click your selection » select Edit... OR From the CSS pane too lbar, click EDIT STYLE The CSS Rule definition dialog box appears. 4. For the appropriate categories, make the desired changes 5. To test the results, click APPLY To cancel the changes, click CANCEL To accept the changes, click OK As your web page develops, you might decide that you would like to delete a style or style sheet. 1. From the CSS Styles pane, click ALL 2. In the All Rules scroll box, select the style 3. Right click your selection » select OR From the CSS Styles toolbar, click DELETE CSS RULE The style sheet entry is removed from the CSS Styles pane, and the style definition is removed from all applicable tags on your web page s. Specifying Fonts With CSS You are able to make changes to the font of a specific tag or selected text using Cascading Style Sheets (CSS). In doing this, you increase the possibility that a browser will display your page as intended. For example, not a ll browsers will be able to view your chosen font, so you are allowed to list several fonts in order of preference. The browser will then select the first one it is able to view correctly. This document will instruct you on how to specify your font selecti ons using CSS. Specifying Fonts: Using the Tag Selector CSS allows for individualized text formatting to occur with relative ease. The Tag option allows you to redefine the formatting of any HTML tag (e.g., h1h1-;退, pp-9;, bodyKod;&#x-19y; ) in your page. As an 1. In the CSS Styles pane, click NEW CSS RULE The New CSS Rule dialog box appears. 2. For S elector Type , select Tag 3. From the Tag pull - down list, select the tag EXAMPLE: Select h1 4. To create an external CSS file (.css), for Define in, select New Style Sheet File To create an internal or embedded style sheet, select This document only NOTES: You a re able to link an external CSS file to several documents. For more information about linking external style sheets refer to Creating Styles: Attaching Style Sheets. An embedded style sheet is located in the headhe4;­-9; section of the document it was created fo r. The style settings for that style sheet apply only to that document. 5. Click OK The CSS Rule definition dialog box appears. 6. Under Category , select Type 7. From the Font pull - down list, select a desired font set 8. To test the results, click APPLY To cance l the changes, click CANCEL To accept the changes, click OK If OK is selected, changes will automatically apply to all affected tag(s). Specifying Fonts: Using the Class Selec tor The Class option allows you to create a custom style that can be applied to selected text. Once a Class style has been created, that style can be applied to any element on a page. As an example, t can be applied to an organization name wherever it appears on the web page. 1. From the CSS Styles pane, click NEW CSS RULE The New CSS Rule dialog box appears. 2. For Selector Type , select Class 3. In the Name text box, type a descriptive name that will make clear the function/purpose of this class style NOTE: All class style names must began with a period (.). EXAMPLE: Type .UWEC 4. Click OK The CSS Rule definition dialog box appears. 5. Under Category , select Type 6. From the Font pull - down list, select a desired font set 7. To cancel the changes, click CANCEL To accept the changes, click OK 8. To apply this style, select an instance of the text that is to be altered using this style 9. In the Properties pane, from the Style pull - down list, select the name of the class style Specifying Fonts: Using the Advanced Selector The Advanced option allows you to create styles for the different link options, a:active , a:link , a:hover , and a:visited . These link options are also known as pseudo - class selectors. As an example, these steps will instruct how to specify a bold weight for an a:visited link. 1. From the CSS Styles pane, click NEW CSS RULE The New CSS Rule dialog box appears. 2. Select Advanced 3. In the Selector text box, type the appropriate pseudo - class selector(s) OR From the Selector pull - down list, select the appropriate pseudo - class selector EXAMPLE: Type or select a:visited HINT: I f the pull - down option is used, only one pseudo - class selector can be selected. If the text box option is used, one or more pseudo - class selectors can be specified. 4. Click OK The CSS Rule definition dialog box appears. 5. Under Category , select Type 6. From the Weight pull - down list, make the desired selection EXAMPLE: Select Bold NOTES: The numerical values in this selection indicated the level of boldness that will be added to the text. The values range from 100 (least bold) to 900 (bold). 7. To test the results, click APPLY To cancel the changes, click CANCEL To accept the changes, click OK If OK is selected, changes will automatically be applied to all affected link(s). Applying Color with CSS Cascading Style Sheets (CSS) allow you to apply color to a page's background, selected text, elements, links, and various tags. There are three selector types that can be used to apply color to a document using CSS: Class , Tag , and Advanced . This document will review these three selector types and give examples fo r using each of them. Applying Color to Body Elements: Using the Tag Selector The Tag option allows you to redefine the formatting of any HTML tag (e.g., h1h1-;退, pp-9;, bodyKod;&#x-9y2;) i n your page. As an example, these instructions will define the font color for the paragraph, pp-9;, tag. 1. From the CSS Styles pane, click NEW CSS RULE The New CSS Rule dialog box appears. 2. For Selector Type , select Tag 3. From the Tag pull - down list, selec t the desired HTML tag EXAMPLE: Select p 4. To create an external CSS file (.css), for Define in, select New Style Sheet File To create an internal or embedded style sheet, select This document only NOTES: You are able to link an external CSS file to severa l documents. For more information about linking external style sheets refer to Attaching Style Sheets. An embedded style sheet is located in the headhe4;­-9; section of the document it was created for. The style settings for that style sheet apply only to that d ocument. 5. Click OK The CSS Rule definition dialog box appears. 6. Under Category , select Type 7. In the Color text box, type the appropriate hexadecimal color value OR From the Color box, select the desired color EXAMPLE: Type #9999CC HINT: For more inform ation on selecting hexadecimal color values, refer to Web Publishing: Color Names and Numbers. 8. To test the results, click APPLY To cancel the changes, click CANCEL To accept the changes, click OK NOTE: If OK is selected, changes will automatically apply to all effected tag(s). Applying Color to Specific Text: Using the Class Selector The Class option allows you to create a custom style that can be applied to selected text. Once a Class style has been created, that style can be applied to any element on a page. As an example, wherever it appears on the web page. 1. From the CSS Styles pane, click NEW CSS RULE The New CSS Rule dialog box appears. 2. For Selector Type , select Class 3. In the Name text box, type a descriptive name that will make clear the function/purpose of this Class style NOTE: All Class style names must began with a period (.) EXAMPLE: Type . name 4. Click OK The CSS Rule definition dialog box appears. 5. Under Category , select Type 6. In the Color text box, type the appropriate hexadecimal color value EXAMPLE: Type #9999CC HINT: For more information on selecting hexad ecimal color values, refer to Web Publishing: Color Names and Numbers. 7. To cancel the changes, click CANCEL To accept the changes, click OK 8. To apply this style, select an instance of the text that is to be altered using this style 9. In the Properties pane, fr om the Style pull - down list, select the name of the Class style Applying Color to Links: Using the Advanced Selector The Advanced Selector option allows you to create styles for the different link options a:active , a:link , a:hover , and a:visited . These link options are also known as pseudo - class selectors. As an olor and decoration for an a:visited link. 1. From the CSS Styles pane, click NEW CSS RULE The New CSS Rule dialog box appears. 2. For Selector Type , select Advanced 3. In the Selector text box, type the appropriate pseudo - class selector(s) OR From the Selec tor pull - down list, select the appropriate pseudo - class selector HINT: If the pull - down option is used, only one pseudo - class selector can be selected. If the text box option is used, one or more pseudo - class selections can be selected EXAMPLE: Type or s elect a:visited Formatting Links Using CSS Cascading Style Sheets (CSS) are a collection of rules that impact the style of elements and specified tags on a web page. This page will explain how to use a Cascading Style Sheet to will impact the look of an active link, a visited link, and a hover link. Formatting Active Links 1. In creating a style for an active link, there are a number of different ele ments (e.g., text, text color, decoration, background color) that can be adjusted. This section will explain how to set decoration for an active link. 2. From the CSS Styles pane, click NEW CSS RULE The New CSS Rule dialog box appears. 3. For Selector Type , select Advanced 4. In the Selector text box, type the appropriate pseudo - class selector(s) OR From the Selector pull - down list, select the appropriate pseudo - class selector HINT: If the pull - down option is used, only one pseudo - class selector can be select ed. If the text box option is used, one or more pseudo - class selections can be selected EXAMPLE: Type or select, a:active 5. Click OK The CSS Rule definition dialog box appears. 6. Under Category , select Type 7. For Decoration , select the desired option EXAMP LE: select underline 8. To test the results, click APPLY To cancel the changes, click CANCEL To accept the changes, click OK If OK is selected, changes will automatically be applied to all affected link(s). Formatting Visited Links In creating a style for a visited link, there are a number of different elements (e.g., text, text text color for a visited link. 1. From the CSS Styles pane, click NEW CSS RULE The New CSS Rule dialog box appears. 2. For Selector Type , select Advanced 3. In the Selector text box, type the appropriate pseudo - class selector(s) OR From the Selector pull - down l ist, select the appropriate pseudo - class selector HINT: If the pull - down option is used, only one pseudo - class selector can be selected. If the text box option is used, one or more pseudo - class selections can be selected EXAMPLE: Type or select, a:visite d 4. Click OK The CSS Rule definition dialog box appears. 5. Under Category , select Type 6. In the Color text box, type the appropriate hexadecimal color value OR From the drop - EXAMPLE: Type #9999CC HINT: For more informat ion on selecting hexadecimal color values, refer to Web Publishing: Specifying Colors. 7. To test the results, click APPLY To cancel the changes, click CANCEL To accept the changes, click OK If OK is selected, changes will automatically be applied to all affe cted link(s). Formatting Hover Links In creating a style for the appearance of a link when users hold their cursor over the link, there are a number of different elements (e. g., text, text color, decoration, background color) that can hovered over. 1. From the CSS Styles pane, click NEW CSS RULE The New CSS Rule dialog box appears. 2. For Selector Type , select Advanced 3. In the Selector text box, type the appropriate pseudo - class selector(s) OR From the Selector pull - down list, select the appropriate pseudo - class selector HINT: If the pull - down option is used, only one pseudo - class sel ector can be selected. If the text box option is used, one or more pseudo - class selections can be selected EXAMPLE: Type or select, a:hover 4. Click OK The CSS Rule definition dialog box appears. 5. Under Category , select Background 6. In the Background colo r text box, type the appropriate hexadecimal color value OR From the drop - EXAMPLE: Type #000066 7. To test the results, click APPLY To cancel the changes, click CANCEL To accept the changes, click OK If OK is selected, chang es will automatically be applied to all affected link(s). 4. Click OK The CSS Rule definition dialog box appears. 5. Under Category , select Type 6. In the Color text box, type the appropriate hexadecimal color value EXAMPLE: Type #9999CC HINT: For more info rmation on selecting hexadecimal color values, refer to Web Publishing: Color Names and Numbers 7. For Decoration , select the desired option EXAMPLE: Select none 8. To test the results, click APPLY To cancel the changes, click CANCEL To accept the changes, clic k OK If OK is selected, changes will automatically be applied to all effected link(s). Formatting Lists with CSS positions are created in a uniform manner. Wh en defining a list type, there are two options to choose from: a numbered list, which is classified as an ordered list (ol0;ol), and a bulleted list, which is classified as an unordered list (ul0;ul). The style options available will vary depending on the list type selected. This document will use the example of creating a style for a bulleted list (&#x-4ul;ul). 1. From the CSS tab, click NEW CSS RULE The New CSS Rule dialog box appears. 2. For Selector Type , select Tag 3. From the Tag pull - down list, select the appr opriate tag for your list (e.g., ul or ol) EXAMPLE: Select ul 4. To create an external CSS file (.css), for Define in, select New Style Sheet File To create an internal or embedded style sheet, select This document only NOTES: You are able to link an externa l CSS file to several documents. For more information about linking external style sheets refer to Using the CSS Styles Tab. An embedded style sheet is located in the headhe4;­-9; section of the document it was created for. The style settings for that style shee t apply only to that document. 5. Click OK The CSS Rule Definition dialog box appears. 6. From the Category list, select List 7. From the Type pull - down list, select a desired list style EXAMPLE: Select square NOTE: List style options will vary depending on the type of list that was declared in the New CSS Rule dialog box. 8. a. Click BROWSE... The Select Image Source dialog box appears. b. Using the Look in pull - down list, navigate to and select the image c. Click OK 9. OPTIONAL: From the Position pull - down list, select inside or outside EXAMPLE: Select inside NOTE: Inside will wrap the list item to the left margin, Outside will wrap the list item and indent it. 10. To test the results, click APPLY To cancel the changes, click CANCEL To accept the changes, click OK Aligning Images Using CSS Image alignment refers to the actual location of the image in relation to text or other images on the web page. Adjusting the alignment of an image allows you to control the amount of white space between the image and surrounding text or other images, thus creating a more visually appealing web design. Image alignment specifications can be individually customized using a Cascading Style Sheet (CSS). This page will explain how to create a Cascading Style Sheet that will allow you to customize an image's alignment. Adjusting Image Alignment: Using the Tag Selector Using the Tag selector to adjust a applied uniformly to every image on the page. These instructions use the example of an image which will float right and have a specified margin around it. 1. In the CSS Styles pane, click NEW CSS RULE The New CSS Rule dialog box appears. 2. For Selector Type , select Tag 3. From the Tag pull - down list, select img 4. To create an external CSS file (.css), for Define in, select (New Style Sheet File) To create an internal or embedded style sheet, select This document only NOTES: You are able to link an external CSS file to several documents. For more information about linking external style sheets refer to Attaching Style Sheets. An embedded style sheet is located in the headhe4;­-9; section of the docum ent it was created for. The style settings for that style sheet apply only to that document. 5. Click OK The CSS Rule definition dialog box appears. 6. Under Category , select Box The Box options appear. 7. From the Float pull - down box, make the appropriate sel ection EXAMPLE: Select right Text, layers, and tables will float to the left of the image. 8. Under Margin , deselect Same for all 9. Under Margin , in the Right text box, type a desired value amount EXAMPLE: Type 0 10. Under Margin , in the Top , Bottom , and Left t ext boxes, type a value EXAMPLE: Type 5 This specifies that 5 pixels will separate the image's borders from elements on the top, bottom, and left of it. 11. Click OK Adjusting I mage Alignment: Using the Class Selector Using the Class selector to adjust an image's alignment attributes will allow settings to be applied to any selected image on the page. Once a class style has been created, it is selected from the Class pull - down l ist in the Properties pane. These instructions use the example of an image which will float right and have a specified margin around it. 1. In the CSS Styles pane, click NEW CSS RULE The New CSS Rule dialog box appears. 2. For Selector Type , select Clas s 3. In the Name text box, type a descriptive name that will make clear the function/purpose of this class style NOTE: All class style names must begin with a period (.). EXAMPLE: Type .pic 4. To create an external CSS file (.css), for Define in, select New Styl e Sheet File To create an internal or embedded style sheet, select This document only NOTES: You are able to link an external CSS file to several documents. For more information about linking external style sheets refer to Attaching Style Sheets. An embedd ed style sheet is located in the headhe4;­-9; section of the document it was created for. The style settings for that style sheet apply only to that document. 5. Click OK The CSS Rule definition dialog box a ppears. 6. Under Category , select Box The Box options ap pear. 7. From the Float pull - down list, make the appropriate selection EXAMPLE: Select right Text, layers, and tables will float to the left of the image. 8. Under Margin , deselect Same for all 9. In the Right text box, type a desired value amount EXAMPLE: Type 0 10. In the Top , Bottom , and Left text boxes, type a value EXAMPLE: Type 5 This specifies that 5 pixels will separate the image's borders from elements on the top, bottom, and left of it. 11. Click OK