Survey
* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
Basic Dreamweaver Lesson 4 Cascading Style Sheets INTRODUCTION TO CASCADING STYLE SHEETS (CSS) Cascading Style Sheets were created as the answer to the limitations of HTML, and they are the current standard for layout and formatting of web pages. CSS is a collection of styles that is either inserted in the head of the HTML of a web page and used throughout that page (an internal style sheet), or is attached as an external document and used throughout the entire web site (an external style sheet). A CSS style is a rule that defines the appearance of an element in a web page either by redefining an existing HTML tag or by creating a custom style. CSS styles define the appearance and position of text and graphics, and control most aspects of Web page layout. When you create a CSS style, first you choose a selector type, then you choose the the selector name, and finally, you choose the location of the style. The four types of CSS selectors are: Class – can be applied to any tag even if that tag has been redefined or has other styles applied to it. The class selector is the most versatile. ID – similar to class, but can only be used once in a page. These are frequently used to create page layouts where you define each section of a page only once. Tag – changes the appearance of an HTML tag, such as all of the <p> tags. Compound – combination of the ID, class, and tag styles, and is used to redefine formatting for a group of tags only when those tags appear in the defined order. For example, if you define the footer area of the page using an ID style, you could create a compound style that tells the browser to display any text in a paragraph tag inside that area of the page in a smaller font size. The declaration defines the attributes that are included in the style. The eight categories of attributes that you can combine to create a style are as follows: Type – Font and type settings and attributes such as font family, font size, color, decoration, and weight. Background – A color or an image, fixed or scrolling, that can be placed behind a page element such as a block of text. Block – Spacing and alignment settings for tags and attributes, including spacing between words, letters, and lines of text. Also includes indention. Box – Attributes that control the placement of elements in the page. List – The number format and its position used with ordered lists and the bullet shape or image and its position used with unordered lists. Positioning – Attributes that determine how a tag or selected content is positioned on the page. Extensions – Attributes that control page breaks during printing, the appearance of the pointer when positioned over objects in the page, and special effects added to the objects. Most browsers do not support ALL extensions’ attributes. The term cascading means that if an attribute is defined in two styles that affect the same object, the style that is “closer” to the object in the code will override the value of the attribute in the tag that is farther away from the object in the code. Web Technologies I Basic Dreamweaver Lesson 4 – Cascading Style Sheets Page 1 CREATE CSS FORMATTING FOR TAGS If previously closed, define your Next Best Fest site, and open the index.html file 1. Double-click the CSS Styles tab to expand the panel Existing Styles group, and then click the All button if necessary, and drag the bottom border of the panel down to expand the Properties For portion of the panel (see illustration to the right). 2. In the CSS Styles panel, click the New CSS Rule button. 3. For the Selector Type, change the drop-down to the Tag option. Properties of Attach existing Existing Style 4. Click the Selector Name drop-down arrow, and external CSS find the <h2> tag 5. Click the Rule Definition drop-down, and make sure (This document only) is selected to create an internal style sheet. New CSS Edit CSS 6. Hit OK. Rule Rule 7. In the Type Category, set the font-size to 20px and the color to #666633, then click OK. 8. Notice that the text “Welcome to the Next Best Fest Website” changes appearance because it uses the <h2> tag. CREATING CSS CLASSES 1. In the CSS panel, click the New CSS Rule. 2. Change the Selector type to Class. 3. In the Selector Name box, type .sub2 (you must include the period before the name of the class). 4. Make sure the Rule Definition box is set to This Document Only, then hit OK. 5. Set the Type to font-size 20 px, and the color to #ccccff. In the Background category, set the background color to #666633. Click OK. 6. In the Document window, position the insertion point after the text at the bottom of the home page, and press ENTER twice to move down four lines. 7. Type Rumor Has It, then press SHIFT+ENTER to insert a line break and move to the next line. 8. Type It looks like amazing things might just come in small packages. It is possible that Little Kiss might be making the rounds at the next Next Best Fest. More info coming soon. 9. Select the Rumor Has It text in the Document Window. 10. In the Property Inspector, click on the button for Class in the HTML portion. Choose the sub2 style. 11. Click anywhere in the page to deselect. Web Technologies I Basic Dreamweaver Lesson 4 – Cascading Style Sheets Page 2 CREATING AN EXTERNAL STYLE SHEET Locating all of the styles for a Web site in one place is one of the greatest advantages of using CSS styles. An external style sheet enables you to separate the style of the Web site from the content of the Web site, enabling you to make stylistic changes throughout the site by updating a single file. 1. In the CSS Styles panel, select ALL RULES by clicking the first style in the list, pressing and holding the SHIFT key, and clicking the last style in the list. Release the SHIFT key and all styles should be selected. 2. Right-click the selected styles, and then click Move CSS Rules on the context menu. 3. In the Move To dialog box, click the A new style sheet option button, then click OK. 4. In the Save as box, create a new folder by clicking the folder icon, and naming it stylesheets. 5. Inside the folder, save the style sheet as nbf_styles. 6. Click the Save button. 7. Click the New CSS Rule botton in the CSS panel. 8. Set the Selector Type to ID, the selector name to #nav (IDs must have a # sign in front of them), and set the Rule Definition to nbf_styles.css. The style will now be saved in the external style sheet. 9. In the Box category, set the Float list to right, then hit OK. 10. Back in the Document window, select the links at the top of the page. 11. In the Property Inspector, set the ID drop-down box to Nav. This assigns the section an ID of nav, and floats it to the right. EDITING CSS STYLES 1. In the CSS panel, click on the h1 tag so that it is selected. 2. Click the pencil icon in the bottom of the CSS panel to open the CSS Styles dialog box. Hit Cancel. 3. In the bottom of the CSS panel, click the AZ icon to view all available properties. 4. Scroll down to find font-weight, and change the drop-down menu to read normal. 5. Select the h2 tag, and use either method to edit the style to also have a normal fontweight. 6. To temporarily disable a property setting without deleting it, hover your mouse to the left of the property name and click the Disable icon. Click it again to enable it. 7. Go to File > Save All to make sure both the index.html and nbf_styles.css page saved. 8. To view the external style sheet, click its name at the top of the document window. When finished, click on the Source Code link next to it. Web Technologies I Basic Dreamweaver Lesson 4 – Cascading Style Sheets Page 3