[PDF] Cours de base pour apprendre CSS3 : Les Tags | Cours informatique

(1)

P

ROJECT

6:

C

ASCADING

S

TYLE

S

HEETS

Showcolate (USA) has contacted you to build a Web site to promote their franchising business. They want a Web site that they can easily alter in minimum time, whenever they need to. The Web site should project a consistent look and style in all its pages. The Web pages should be made ‘printer-friendly’, enabling only specific page elements relevant for print. Showcolate wants complete control over the layout and design of the Web site. Your task is to create and apply a Cascading Style Sheet (CSS) for the Web site to take control over the layout and maintain consistency throughout the Web pages.

C

REATING

C

ASCADING

S

TYLE

S

HEETS

A Cascading Style Sheet is a collection of formatting rules for designing the layout of a Web page. These rules are defined to give a specific look and style to a Web page. By attaching a style sheet to the Web page and applying styles to the content of the page, you can control the

complete layout of the Web page. Just as an HTML page builds the structure of the Web page, a style sheet controls the design of the content. In other words, a style sheet formats the entire content of the Web page, such as fonts, typefaces, colors, margins, header, and footer according to your requirements. With a style sheet, you need not modify each element of a Web page separately. Simply change the style applied to a group of elements, and all elements in the group will be modified accordingly. This makes your work simple and easy, and gives a consistent look and style to the Web page. Using style sheets ultimately makes it easy to maintain your Web site. A style sheet offers a great deal of flexibility in applying styles. You can apply one style to a single element of a page or many elements at once. You can apply similar styles to multiple Web pages in a Web site, or use different styles for different pages. You can either create the complete style sheet first and then apply styles to the Web page, or create styles one after the other while building the Web page simultaneously.

Prior HTML knowledge is not necessary for you to create a style sheet in Dreamweaver. You are required to define rules in a style sheet. A rule consists of a selector (an HTML element such as h1, ul, p, body, etc.) and attributes (font, color, width, height, etc.) applied to the selector. You can create different selectors in a style sheet and apply different attributes to them. For example, if you want to create a style for the body of a Web page, define a rule in the style sheet which contains a selector (body) and the attributes you apply. Whenever you want to modify the body of the page, simply modify the rule you have defined. A style sheet is a collection of all such defined rules. Dreamweaver uses different types of selectors; you will learn how to use them as you move on.

Before creating a cascading style sheet - either for a single Web page or for the entire Web site - you need to have a clear idea how the Web page or site should look. This helps you figure out what styles are to be created in the style sheet to design the page or site according to the requirements. You can visualize the whole layout including fonts, colors, margins, header, and footer prior to creating the style sheet.

Styles are of three types: External styles, Embedded styles, and Inline styles. How to use these styles is discussed in detail in the following section.

(2)

EXTERNAL, EMBEDDED, AND INLINE STYLE SHEETS

Dreamweaver contains three types of styles: External styles, Embedded styles, and Inline styles. You can make the best use of styles only when you have a clear idea of these style types. The real purpose and potential of a style can be achieved substantially only when you choose the

appropriate style type. However, all three types of styles can be applied to the same HTML page at the same time.

External Style: An external style sheet is a separate file with CSS rules, which can be attached to a number of HTML pages. As a single external style sheet can customize many Web pages at a time, it can be used to maintain the entire Web site easily and quickly. This advantage of using an external style sheet makes it preferable to most Web developers. You can attach different external style sheets to different HTML pages, but note that one HTML page does not take more than one external style sheet.

An external style sheet is saved as a .css file and is uploaded to the Web server along with the Web pages to which the file is attached (ensure that the .css file is saved in the same location where all the Web pages are stored). This facility of uploading a single .css file to manage all the Web pages makes the external style more preferable to the other two styles. As embedded and inline styles are to be applied directly in HTML pages, you need to upload all the pages to modify the styles. This can prove to be tedious and time-consuming.

You can use two methods to work with an external style sheet: link method and import method. Though link method is the default method in Dreamweaver, you can also use the import method. When you use a link method to attach a style sheet (for example, styles.css) to an HTML page, a code is added above the style tags in the following way:

If the import method is used to attach the same style sheet, a code is added within the style tags in the following way:

@import url("Styles.css"); -->

</style>

You can use either method, but compared to the import method, the link method supports all browsers in a better way.

Embedded Style: An embedded style is a style that is embedded directly in the HTML page within style tags (<style>…</style>). An embedded style affects only the particular HTML page in which it is placed. By using an embedded style, you can control the elements throughout the page. The two tags <style> and </style> denote the beginning and ending of the style. Though most Web designers prefer to use an embedded style within header tags, it can be placed anywhere in a page.

For example, when you apply an embedded style to a heading and paragraph, the code will be: <style type="text/css">

<!-- H1 {

(3)

font-family: Arial; } P { color: Blue; } --> </style>

The set of tags <!-- and -- > are used to prevent a few old browsers from displaying the style rules.

Inline Styles: An inline style is used to apply directly and instantly to an individual element within a tag, affecting only that single element of the HTML page. By applying an inline style, you can define specific attributes to an element within a tag. An inline style can be applied easily and quickly, but it is limited only to the tag in which the element is found.

For example, if you apply a font size and color to a paragraph, the inline style looks as follows: <P style="font-size: 10pt; color: blue"> </P>

Though you may use any of the three styles, the external style is recommended.

Create Element Selectors

As discussed earlier, a style sheet is a collection of defined rules which are made up of selectors and the attributes applied to them. Creating selectors in a style sheet is crucial. You can use different kinds of selectors in a style sheet, and element selectors are basic and easy-to-use selectors. An element selector selects an HTML element (such as p, body, h1) in an HTML page and applies certain attributes to it. For example, if you create an element selector for the main heading in an HTML page with the color blue, the structure of the element selector looks like:

h1 { color: blue; }

In this exercise, you will create a new cascading style sheet and a few element selectors in it.

1. If Dreamweaver is not open, launch it now. 2. Choose File>New.

3. In the New Document dialog box, choose Blank Page.

(4)

01_DW_06.TIF A new cascading style sheet is created.

02_DW_06.TIF

5. Choose File>Save on the menu or press Command/Control-S to save the page. In the Save As dialog box, navigate to the CSS folder in the root of the Showcolate Web site and name the page as ‘master.css’.

(5)

The new cascading style sheet is saved with the name master.css. You will create all types of selectors in this style sheet. Ensure that while naming a style sheet, you have selected the Style Sheets (*.css) extension in the Save as type box just below the File name box.

03_DW_06.TIF

(6)

04_DW_06.TIF

You can see master.css in the CSS panel with no styles defined. The styles that you define will be displayed in the list. You can also open the CSS panel by using Shift+F11.

(7)

05_DW_06.TIF

DREAMWEAVER FOUNDATIONS

CSS PANEL IN DEPTH

The CSS panel plays a significant role in creating and modifying styles. CSS styles are displayed in two modes - All mode and Current mode. The All mode displays external and embedded styles, but omits inline styles. The Current mode displays the style of the current selection, irrespective of the type of style – whether external, embedded or inline.

(8)

- All Rules pane: It lists all the created styles.

- Properties pane: It displays the properties of the selected style.

The Current mode has three panes - Summary for Selection pane, Rules pane, and Properties pane.

- Summary for Selection pane: It displays the properties and values applied to a selection. - Rules pane: It displays either the rules attributed to the selection or the information of the

selected property in the Summary for Selection pane. The two buttons at the top right of the Rules pane help you switch between these two options.

- Properties pane: It displays the properties of the selected rule.

When you select a rule, the properties and values of the rule are displayed in the Properties pane. Dreamweaver enables you to modify the properties of the rule or set new properties to the rule in the Properties pane itself. There are three ways in which you can view the properties and values in the Properties pane - Show category view, Show list view, and Show only set properties. You can choose any of the three views, but by default, you can see the Show only set properties option. Make your choice by clicking the appropriate button at the bottom left of the Properties pane.

- Show category view: It lists the properties and values of the selected rule into nine categories that are seen in the CSS Rule definition dialog box - Type, Background, Block, Border, Box, List, Positioning, Extensions, and Tables, Content, Quotes. In this view, you can add new properties in a category by clicking the + sign of the category.

- Show list view: It lists all the CSS properties in the alphabetical order. Those properties that are attributed to the selected rule appear in blue.

- Show only set properties: It displays only the list of attributed properties and an option to add a new property. By clicking the Add Property button at the bottom of the list, you can choose any of the new properties that are found in the drop-down list in an alphabetical order. This is a handy option because it lists only those properties that are set and enables you to create a new property easily.

There are four icons at the bottom right of the Properties pane.

- Attach Style sheet: This icon is used to attach an external style sheet to the HTML page. You can browse and attach the saved style sheet to the HTML page using the import or link method.

- New CSS Rule: This icon is used to create a new CSS rule. You can create different types of selectors, such as element selectors, class selectors, and pseudo selectors.

- Edit Style...: This icon is used to edit an existing CSS rule. When you select a rule and click this icon, the CSS Rule definition dialog box is displayed. You can modify properties and save changes.

- Delete CSS Rule (or Property): This icon is used to delete an entire rule, or just a single property of the rule.

(9)

06_DW_06.TIF

The New CSS Rule dialog box is displayed with three types of selectors: Class, Tag, and Advanced.

07_DW_06.TIF

8. In the New CSS Rule dialog box, click the Tag radio button.

9. In the Tag field, type ‘body’ or select ‘body’ from the drop-down list. 10. In the Define in area, click ‘This document only’ radio button.

(10)

08_DW_06.TIF

Note: If you want to create element selectors in

master.css, click This document only radio button. To create them in a different style sheet, click the New Style Sheet File radio button and select a style sheet from the drop-down list.

Ensure that you select This document only radio button throughout this exercise.

11. Click OK.

You can see a new element selector ‘body’ created in master.css. It defines the body of the document. Body includes contents such as images, text, colors, graphics etc. The properties and values of the selector are displayed within parentheses. Note that each property is separated by a semi colon. The ‘body’ selector is also displayed in the All mode in the CSS Panel.

(11)

The CSS Rule definition for body dialog box is also displayed. In this dialog box, you can define the properties and values for the body selector.

10_DW_06.TIF

DREAMWEAVER FOUNDATIONS

CSS RULE DEFINITION DIALOG BOX IN DEPTH

In Dreamweaver, the primary way of defining CSS rules is by using the CSS Rule definition dialog box. When you create a new selector, the CSS Rule definition dialog box for that selector is displayed, enabling you to set its properties and values. These properties are of eight kinds - Type, Background, Block, Box, Border, List, Positioning, and Extensions.

- Type: To format text and set appearance of the text. Properties include font, size, style, line height, decoration, weight, variant, case, and color. Font sets the type of font. You can also edit the font list. Size sets the size of the font. If you use pixels for font size, you can prevent distortion of text. Style specifies the font style as normal or italic or oblique. Line height determines the height of the line containing text. Decoration sets a predefined text style – underline, overline, line-through, or blink. Weight applies boldness to the text. Variant sets the text with normal or small-caps. Case affects text in three ways – upper case, lower case, or title case (capitalizes the first letter of the each word).

- Background: To set background color and add background images. You can set the background color by typing a color code or by selecting a color using the color picker. The background image can be set by typing the path or by clicking the Browse button and navigating to the image location. The repeat option determines how the image is tiled on the screen. No-repeat displays the image at the top left corner. If you choose repeat, the image tiles horizontally and vertically. Repeat-x makes the image tile horizontally and Repeat-y makes the image tile vertically. Attachment enables the image either to be fixed or to scroll with the page. Horizontal position allows the image to be set to the left, center, or right, and Vertical position sets the image to top, center, or bottom of the page.

(12)

- Block: To define spacing and alignment settings. Word spacing specifies the spacing between words. Letter spacing sets the spacing between the letters of words or characters. Vertical alignment aligns the selected element vertically. Text align aligns text to left, right, center, or justifies it. Text indent specifies where text begins in a line. Whitespace deals with the extra spaces and tabs. Normal collapses all white space. Pre retains all white space. Nowrap wraps text only in case of a br tag. Display shows if an element is displayed. It also specifies how the element is displayed. If none is selected, no display will be available. - Box: To specify the placement of elements, such as an image. Width and height options set

the width and height of the selected element. Float determines to which side an element - such as text or table - will float around a selected element. Clear enables a layer to disappear on the selected side of an element – left, right, or both. Padding is the amount of space that separates the border and the element (say image). It completely covers the image – top, bottom, left, and right sides. Margin is the amount of space that separates the border of an element and another element. Margin also covers the content completely – top, bottom, left, and right sides. You can specify padding and margin values individually (left, right, top, and bottom) or select the check box Same for all.

- Border: To set the style, width, and color for the borders around the selected elements. You can specify values individually (top, right, bottom, left) or select the check box Same for all. - List: To specify the list settings. Type specifies the type of a list from the given options –

disc, circle, square, decimal, lower-roman, upper-roman, lower-alpha, and upper-alpha. The Bullet list image can be set by typing the path or by browsing the image from the location. Position specifies the list position as inside or outside i.e., the list either wraps and indents or wraps to the left margin.

- Positioning: To specify the position of the CSS elements. Type determines the position of the element as absolute, fixed, relative, and static. Absolute type enables the element stay stable on the page, irrespective of the positioning of the other elements. In fixed type, the element is positioned according to the window size. In relative type, the element position is based on the position of other elements on the page. In static type, the element is positioned as it appears in an HTML page. Width and height determine the width and height of the element. Visibility displays the element in three states: Inherit, visible, and hidden. If no visibility property is selected, the element shows the inherit property of the element’s parent. The visible option displays the element. The hidden option hides the element. Z-index shows the depth of an element. Elements with high Z-index appear above the elements with low z-index. Overflow determines how the element should appear when the element exceeds the allotted space – visible, hidden, scroll, or auto. Placement specifies where the element can be positioned. Clip specifies the visible parts of an element.

- Extensions: To give a page break and apply visual effects. Page break option sets a page break for printing before or after the element. You can select a page break option from the drop-down list. Cursor specifies the point type when you place the pointer over the element. Filter changes the appearance of the element when you select a filter effect from the drop-down list.

12. In the CSS Rule definition for body dialog box:

- Click Type in the Category pane. In the Font drop-down list, click ‘Arial, Helvetica, sans-serif’ combination. In the Size text box, type ‘100’ and select ‘%’ from the adjacent drop-down list. In the Color text box, type ‘#666’ or select the color using the color picker.

(13)

11_DW_06.TIF

- Click Background in the Category pane. In the Background color text box, type ‘#999’ or select the color using the color picker.

12_DW_06.TIF

- In the Box pane, type ‘0’ in the top text boxes of the Padding and Margin areas. Select Same for all check boxes in both areas to apply the same value for right, bottom, and left positions.

(14)

13_DW_06.TIF

13. Click OK.

All the properties and values attributed to the ‘body’ selector are displayed within parentheses.

14_DW_06.TIF

14. Click the New CSS Rule icon at the bottom right of the Properties pane. In the New CSS Rule dialog box, click the Tag radio button.

(15)

15_DW_06.TIF

The CSS Rule definition for h1 dialog box is displayed. H1 defines the largest heading in the document.

16. In the CSS Rule definition for h1 dialog box:

- Click Box in the Category pane. Type ‘0’ in the top text boxes of the Padding and Margin areas. Select Same for all check boxes in both areas to apply the same value for right, bottom, and left positions. Click OK.

16_DW_06.TIF

A new element selector ‘h1’ is created in master.css. The properties and values attributed to ‘h1’ are displayed within parentheses.

(16)

17_DW_06.TIF

You are now creating different types of element selectors. You can modify their properties and values in the CSS Rule definition box.

17. Repeat steps 14, 15 and 16 to create element selectors h2, h3, and h4 with the same padding and margin values.

18_DW_06.TIF

(17)

18. Click the New CSS Rule icon and type or select ‘a’ in the Tag field. Click OK.

19_DW_06.TIF

The element selector ‘a’ defines an anchor which is used to create a link to another document or to create a bookmark inside the same document.

19. In the ‘CSS Rule definition for a’ dialog box:

- Click Type in the Category pane. Type ‘#999’ in the color text box or select the color using the color picker. Select the none check box in the Decoration area.

20_DW_06.TIF

20. Click OK.

(18)

21_DW_06.TIF

21. Click the New CSS Rule icon and type or select ‘li’ in the Tag field.

22_DW_06.TIF

The element selector ‘li’ defines a list in the document. 22. In the CSS Rule definition for li dialog box:

(19)

23_DW_06.TIF

23. Click OK.

DREAMWEAVER FOUNDATIONS

USING THE LIST PROPERTIES

List Properties allow you to place the list-item marker. You can also change between different list-item markers, or set an image as the list-item marker.

Internet Explorer, Firefox, and Netscape are the browsers that support the CSS List Properties. Some of the list properties are:

- List-style property: Used for setting all the properties for a list in one declaration. You can control the appearance of ordered and unordered lists in one declaration.

- List-style-image: Replaces the list-item marker with an image. You can use an image for the bullet of unordered list

- List-style-position: Places the list-item marker in the list. You can control the position of ordered and unordered lists

- List-style-type: Sets the type of the list-item marker. You can control the type of bullet of the ordered and unordered lists.

24. Repeat steps 21 and 22 to create element selector ‘ol’.

The element selectors ‘ol’ defines an ‘ordered list’ in the document.

25. Repeat steps 14, 15, and 16 to create element selectors ‘ul’ and ‘form’ with the same padding and margin values.

(20)

‘ul’ defines an unordered list in the document. Form contains text fields, check boxes and certain other things to enable a user to send in his data.

24_DW_06.TIF

25_DW_06.TIF

In this exercise, you have created different element selectors in master.css, each of which has its own function. You can create many such selectors in this way.

DREAMWEAVER FOUNDATIONS

GROUPING SELECTORS

When two or more selectors have the same properties and values, they can be grouped just to avoid repetition and to save time and space. All types of selectors (element selectors, class selectors, and pseudo selectors) can be grouped. In the first exercise, ‘Create Element Selectors’,

(21)

you have created four separate element selectors: h1, h2, h3, and h4 with the same properties and values as shown below:

h1 { margin: 0px; padding: 0px; } h2 { margin: 0px; padding: 0px; } h3 { margin: 0px; padding: 0px; } h4 { margin: 0px; padding: 0px; }

However, instead of defining them separately, you can group them as follows: h1, h2, h3, h4 { margin: 0px;

padding: 0px; }

To modify the properties and values of these selectors, you do not have to modify them four times. When grouped, they can be modified all at once.

Create Class Selectors

A class selector is used when the same style is to be applied to many elements for more than one time, that is, if you apply a class selector to one or more elements, the same style is applied to the elements every time they appear in the Web page. Unlike an element selector, which is used only once for one element, a class selector is used to repeat the same style throughout the page.

A class selector can also be applied to multiple Web pages by using an external style sheet. For example, if you want the main header to take the same style throughout the Web site, you do not need to change the header element in every page. You can just define a class for the header, and all the Web pages will take the same header style. Class selectors are key to the effects brought out by cascading style sheets.

A class selector always starts with a dot. For example, .heading

{

font-size: 70% color: #670

(22)

}

In this exercise, you will create a class selector.

1. Click the New CSS Rule icon at the bottom right of the Properties pane.

26_DW_06.TIF

2. In the New CSS Rule dialog box, click the Class radio button. In the Name text box, type ‘clear’ and click OK.

27_DW_06.TIF Note: Dreamweaver adds a dot (.) before the name of a class selector whether or not you specify it in the Name box of the New CSS Rule dialog box.

3. In the CSS Rule definition for .clear dialog box:

- Click Box in the Category pane. In the Box pane, select ‘none’ from the Clear drop-down list.

(23)

28_DW_06.TIF

- Click Type in the Category pane. Type ‘0’ in the line height text box and select ‘multiple’ from the adjacent drop-down list. In the Size text box, type ‘.01’ and select ‘ems’ from the adjacent drop-down list.

29_DW_06.TIF

(24)

The class selector ‘.clear’ is created in master.css. It specifies the sides of an element thereby not allowing other floating elements (floating elements are images or text elements that appear in other elements).

30_DW_06.TIF

Create ID Selectors

Id selectors are assigned to elements individually in an HTML page. Unlike a class selector, which can be used for more than one element any number of times, an ID selector is used for a single element and only for once in a Web page. An ID selector always starts with a pound (#) sign. For example,

#header { float: left; width: 800px;

background: #A84726; }

In this exercise, you will create ID selectors.

2. In the New CSS Rule dialog box, click the Advanced radio button. In the Selector text box, type ‘#wrapper’ and click OK.

(25)

31_DW_06.TIF Note: Dreamweaver does not add the pound (#) sign before the name of an ID selector (Unlike in class selectors, where it adds the dot (.) by default). So make sure you type the pound (#) sign before the name of an ID selector in the Name box of the New CSS Rule dialog box.

3. In the CSS Rule definition for #wrapper dialog box:

- Click Box in the Category pane. Deselect the Same for all check box in the Margin area. Type ‘0’ in Top and Bottom text boxes and select ‘auto’ in the Right and Left text boxes. Type ‘850’ in the Width text box and select ‘pixels’ from the adjacent drop-down list.

32_DW_06.TIF

- In the Background pane, click the Browse button of the Background image text box. Navigate to the ‘images’ folder of the Showcolate root folder and select ‘shadow.jpg’. Alternatively, type “../images/shadow.jpg” in the Background image text box.

(26)

33_DW_06.TIF

34_DW_06.TIF

(27)

35_DW_06.TIF - Click OK.

An ID selector ‘#wrapper’ is created in master.css. Wrapper covers all the elements in the document. It includes a background image which gives a shadow effect to the left and right sides of the document.

(28)

DREAMWEAVER FOUNDATIONS

UNDERSTANDING THE CSS BOX MODEL

The term 'box model' is used in creating CSS-based layouts and design. Any HTML element can be considered a box.

A box model is a specification, that is, it specifies how a box is related to its attributes. If a box is said to be 50 pixels wide and 100 pixels long, it is inferred that the browser should draw a box 50 pixels wide and 100 pixels long. There are more attributes that can be added like background color, padding, margins, borders etc.

A box is made up of four parts: Margin, Border, Padding, and Content.

Margin: It is the outside part. It is invisible. It has no background color. Margin does not obstruct the elements within it.

Border: It lies inside the margin. It specifies the visible portion of the element.

Padding: It lies inside the border. It is the area between the content area of the box and its border. Content: It lies inside the padding. If you define a width and height for your box using CSS, you are defining the content area. Padding, border and margin must be added to the content to calculate the total space occupied by the box.

Consider the example: box { width: 200px; border: 10px solid #99c; padding: 20px; margin: 20px; }

If you apply the above style, you get a pale blue area of 240 pixels comprising of 200 pixels of content and 20 pixels padding. The border is 10 pixels wide on either side. The margin is 20 pixels on either side. This makes the total width of the box 300 pixels.

4. Repeat steps 1 and 2 to create an ID selector ‘#wrapperContainer’. In the CSS Rule definition for #wrapperContainer dialog box:

- Click Box in the Category pane. Deselect the Same for all check box in the Margin area and type ‘25’ in the Left text box.

(29)

37_DW_06.TIF

An ID selector ‘#wrapperContainer’ is created in master.css. WrapperContainer enables the text to start after the margin.

38_DW_06.TIF

DREAMWEAVER FOUNDATIONS

FLOATING CONTENT

The Float property is used to float images. A float is basically a way of using your browser to position something relative to the content which follows it. Floats can be used both with images and text. This type of usage is referred to as text wrapping. Fundamentally, floats are used for placing images within the content.

(30)

Float property provides high level of positioning control for selected elements within the normal page flow. Unlike positioned elements using absolute, relative, or fixed values, floats exhibit a close integration with the content of their parent container. A floated image allows text wrap. The float property conserves space by allowing adjacent elements to flow around the floated image. In effecting floating content, the floating elements are used whose rendering boxes are shifted to the left or right side of the current. Content boxes that follow are rendered along the side of the floated element - right side of the elements float to the left, and the left side of the elements float to the right. This property specifies an element to float to the left, right, or specifies no float at all. Consider the following example:

img.test { float: left }

<img src=”image.gif” mce_src=”image.gif” style=”float: left”>Type some text. The following are the possible floating values that are used:

- Inherit: Sets the value of this property to that of the parent - None: Element box will not float

- Left: Element box floats to the left resulting the content flowing around it to the right. - Right: Element box floats to the right resulting the content flowing around it to the left.

5. Repeat steps 1 and 2 to create an ID selector ‘#header’. In the CSS Rule definition for #header dialog box:

- Click Background in the Category pane and type ‘#A84726’ in the Background color text box.

39_DW_06.TIF

- Click Box in the Category pane. Select ‘left’ from the Float drop-down list. Type ‘800’ in the Width text box and select ‘pixels’ from the adjacent drop-down list.

(31)

40_DW_06.TIF

- In the Border pane, deselect the three Same for all check boxes in the Style, Width, and Color areas. Select ‘solid’ from the Bottom drop-down list in the Style area. Type ‘3’ in the Bottom text box in the Width area, and select ‘pixels’ from the adjacent drop-down list. Type ‘#3B1814’ in the Bottom text box in the color area.

(32)

- Click OK.

An ID selector ‘#header’ is created in master.css. Header is located at the top of the document which includes links to other pages of the Showcolate Web site.

42_DW_06.TIF

DREAMWEAVER FOUNDATIONS

SCROLLING CONTENT

The scrolling content property enables you to create a box of scrollable content in your page without using a frame. Essentially, it enables you to manage content if the content of an element overflows its area. This provides you with the same visual and usability effect that a frame offers. Moreover, it is search engine friendly.

Consider the following example:

<div style="overflow: auto; width: 100px; height: 60px; border: solid 1px red ;"> Type text</div>.

To create a scrolling effect for a div containing text, the <div> can be set to a certain height and width.

Normally, the following properties are applied in creating scrollable areas:

- Overflow: auto: It inserts a scrollbar - horizontal, vertical or both if required. It is the most preferred property.

- Overflow: visible: It enables the block to expand to view the content.

- Overflow: hidden: Allows the block to only show content that fits in the block. The remaining content is clipped and not hidden. Scrollbars are absent.

6. Repeat steps 1 and 2 to create an ID selector ‘#logo’. In the CSS Rule definition for #logo dialog box:

(33)

- Click Box in the Category pane. Select ‘right’ from the Float drop-down list. Type ‘228’ in the Width text box and select ‘pixels’ from the adjacent drop-down list. Deselect the Same for all check box in the Margin area. Type values 18, 12, 0, and 12 in the Top, Right, Bottom, and Left text boxes respectively, and select ‘pixels’ from the adjacent drop-down lists.

43_DW_06.TIF - Click OK.

An ID selector ‘#logo’ is created in master.css. It is the company logo displayed at the top right of the header.

(34)

7. Repeat steps 1 and 2 to create an ID selector ‘#logoAnim’. In the CSS Rule definition for #logoAnim dialog box:

- Click Box in the Category pane. Select ‘right’ from the Float drop-down list. Type ‘225’ in the Width text box and select ‘pixels’ from the adjacent drop-down list. Deselect the Same for all check box in the Margin area. Type ‘12’ in the Right text box and select ‘pixels’ from the adjacent drop-down list.

- Click OK.

45_DW_06.TIF

46_DW_06.TIF

An ID selector ‘#logoAnim’ is created in master.css. It is the animation of the company logo at the top right of the header.

(35)

DREAMWEAVER FOUNDATIONS

WORKING WITH SELECTORS BASED ON CONTEXT

Selectors are the names that you give to your different styles. In the style definition, you define how each selector should work. In the body section of your page, you refer to these selectors to activate the styles.

Consider the following example: <HTML>

<HEAD>

I. Head {color:blue; font-size:10px; font-family:verdana; text-decoration:underline} </style>

</HEAD> <BODY>

<b> This is normal bold</b><br>

<b class="headline"> This is headline style bold</b> </BODY>

</HTML>

The resultant text will appear as This is normal bold.

When a tag is surrounded by another tag such as <tr> <td> <tr>, assume that the two tags are nested. In this case, the outer tag <tr>, is the parent and the inner tag <td>, is the child. The child tag and the subsequent child tags are known as descendents. Two tags in the same parent tag are called siblings and the two tags next to each other are adjacent siblings.

A Descendent tag allows you to specify the style of a selector based on its position in the HTML code with respect to others. One such selector is the descendant selector. Descendant selectors are contextual selectors that specify one tag within another. For example, a descendant selector permits you to give content within a table a different style than the content outside a table. Adjacent sibling selects an element that follows the other.

In addition, a universal tag is also used to select an element. This selector is used to skip one or more generations of tags.

8. Repeat steps 1 and 2 to create an ID selector ‘#uniNav’. In the CSS Rule definition for #uniNav dialog box:

- Click Type in the Category pane. Type ‘.7’ in the Size text box, and select ‘ems’ from the adjacent drop-down list. Select ‘bold’ from the Weight drop-down list.

(36)

47_DW_06.TIF

- In the Box pane, select ‘left’ from the Float drop-down list. Type ‘150’ in the Width text box and select ‘pixels’ from the adjacent drop-down list. Deselect the Same for all check box in the Padding area. Type ‘5’ in Left text box and select ‘pixels’ from the adjacent drop-down list.

(37)

- Click OK.

49_DW_06.TIF

An ID selector ‘#uniNav’ is created in master.css. It specifies the links portion at the top left of the header.

9. Repeat steps 1 and 2 to create an ID selector ‘#uniNav ul’. In the CSS Rule definition for #uniNav ul dialog box:

- Click Box in the Category pane. In the Box pane, deselect the Same for all check box in the Margin area. Type values 7, 0, 5, and 20 in the Top, Right, Bottom, and Left text boxes respectively, and select ‘pixels’ from the adjacent drop-down lists.

50_DW_06.TIF - Click OK.

(38)

51_DW_06.TIF

An ID selector ‘#uniNav ul’ is created in master.css. It is the unordered list of the links in the uniNav portion of the header.

10. Repeat steps 1 and 2 to create an ID selector ‘#uniNav ul li’. In the CSS Rule Definition for uniNav ul li dialog box, click OK.

52_DW_06.TIF

An ID selector ‘#uniNav ul li’ is created in master.css.

11. Repeat steps 1 and 2 to create an ID selector ‘#uniNav ul a’. In the CSS Rule definition for #uniNav ul a dialog box:

(39)

53_DW_06.TIF - Click OK.

54_DW_06.TIF

An ID selector ‘#uniNav ul a’ is created in master.css. It specifies links to the ‘uniNav ul li’ in the header.

12. Repeat steps 1 and 2 to create an ID selector ‘#tagWrap’. In the CSS Rule definition for #tagWrap dialog box:

- Click Box in the Category pane. In the Box pane, select ‘left’ in the Float drop-down list. Type ‘800’ in the Width text box and select ‘pixels’ from the adjacent drop-down list.

(40)

55_DW_06.TIF - Click OK.

56_DW_06.TIF

An ID selector ‘#tagWrap’ is created in master.css. It includes all the body part of the document excluding the header.

13. Repeat steps 1 and 2 to create an ID selector ‘#tagline’. In the CSS Rule definition for #tagline dialog box:

- In the Box pane, select ‘left’ from the Float drop-down list. Type values 400 and 269 in the Width and Height text boxes respectively. Select ‘pixels’ from the adjacent drop-down lists.

(41)

57_DW_06.TIF

- In the Background pane, click the Browse button of the Background image text box. Navigate to the ‘images’ folder of the Showcolate root folder and select ‘tagline.jpg’. Alternatively, type “../images/tagline.jpg” in the Background image text box. Select ‘no-repeat’ from the Repeat drop-down list. Select ‘left’ from the Horizontal position down list and ‘top’ from the Vertical position drop-down list.

(42)

59_DW_06.TIF - Click OK.

60_DW_06.TIF

An ID selector ‘#tagline’ is created in master.css. It covers the left side image below the header.

DREAMWEAVER FOUNDATIONS

EMBEDDING BACKGROUND IMAGES USING CSS DEFINITIONS

CSS allows you to repeat the background image vertically, horizontally, or appear just for once. To place a background image using css, the code in the style tag under the property ‘body’ will be as follows:

background-image; url: image location; background-repeat: type of repeat element

(43)

background-position: type of position background-attachment: type of attachment

Place the url of the image where the "image location" text appears.

Background image can be repeated in different ways. Replace the "type of repeat element" with the following settings:

- Repeat: Repeats the image vertically and horizontally - No-repeat: Will not repeat the image

- Repeat-x: Repeats the image horizontally - Repeat-y: repeats the image vertically

You can position your background image using three different ways. This can be done by - Keywords: Use words like Top, Center, Left, Right, Bottom, etc

- Percentages: Use percentage values - Pixel Values: Use pixel values

There are two different background attachments:"fixed" and "scroll". ‘Fixed’ will make the background stay in place while the rest of the document scrolls over it. ‘Scroll’ will have the document scroll with the document, and it will repeat itself. In the above code, “background-image; url: image location”, replace "type of attachment" with ‘fixed; or scroll’.

14. Repeat steps 1 and 2 to create an ID selector ‘#styleImg’. In the CSS Rule definition for #styleImg dialog box:

- Click Box in the Category pane. In the Box pane, select ‘right’ from the Float drop-down list. Type ‘400’ in the Width text box, and select ‘pixels’ from the adjacent drop-down list.

(44)

61_DW_06.TIF - Click OK.

62_DW_06.TIF

An ID selector ‘#styleImg’ is created in master.css. It covers the right side image below the header.

15. Repeat steps 1 and 2 to create an ID selector ‘#video’. In the CSS Rule definition for #video dialog box:

- Click Positioning in the Category pane. In the Positioning pane, select ‘absolute’ from the Type drop-down box. Type ‘340’ in the Width text box and select ‘pixels’ from the adjacent drop-down list.

63_DW_06.TIF

- In the Placement area, type values 335 and 215 in the Top and Left text boxes respectively. Select ‘pixels’ from the adjacent drop-down lists.

(45)

64_DW_06.TIF - Click OK.

65_DW_06.TIF

An ID selector ‘#video’ is created in master.css. It covers showcolate video image in the images portion below the header.

16. Repeat steps 1 and 2 to create an ID selector ‘#content-group’. In the CSS Rule definition for #content-group dialog box:

- Click Type in the Category pane. Type ‘.75’ in the Size text box, and select ‘ems’ from the adjacent drop-down list.

(46)

66_DW_06.TIF

- In the Background pane, type ‘#FFF’ in the Background color text box.

67_DW_06.TIF

- In the Box pane, select ‘left’ from the Float drop-down list. Type ‘800’ in the Width text box and select ‘pixels’ from the adjacent drop-down list. In the Padding area, deselect the Same for all check box. Type ‘15’ in Bottom text box and select ‘pixels’ from the adjacent drop-down list.

(47)

68_DW_06.TIF

- In the Border pane, deselect the three Same for all check boxes in the Style, Width, and Color areas. Select ‘solid’ from the Top drop-down list in the Style area. Type ‘3’ in the Top text box in the Width area and select ‘pixels’ from the adjacent drop-down list. In the Color area, type ‘#3B1814’ in the Top text box.

69_DW_06.TIF

(48)

- Click OK.

70_DW_06.TIF

An ID selector ‘#content-group’ is created in master.css. It includes the whole content area above the footer.

17. Repeat steps 1 and 2 to create an ID selector ‘#content-main’. In the CSS Rule definition for #content-main dialog box:

- Click Box in the Category pane. In the Box pane, select ‘left’ from the Float drop-down list. Type ‘530’ in the Width text box and select ‘pixels’ from the adjacent drop-down list. In the Padding area, deselect the Same for allcheck box. Type values 15, 0, 10, and 25 in Top, Right, Bottom, and Left text boxes respectively and select ‘pixels’ from the adjacent drop-down lists.

(49)

71_DW_06.TIF - Click OK.

72_DW_06.TIF

An ID selector ‘#content-main’ is created in master.css. It includes the main content of the document. When you attach the print.css to see the document in a print, only the main content will appear.

18. Repeat steps 1 and 2 to create an ID selector ‘#content-main p’. In the CSS Rule definition for #content-main p dialog box:

- Click Type in the Category pane. In the Type pane, type ‘1.75’ in the Line height text box and select ‘ems’ from the adjacent drop-down list.

(50)

73_DW_06.TIF

- In the Box pane, deselect the Same for all check box in the Margin area. Type ‘13’ in the Top text box and select ‘pixels’ from the adjacent drop-down list.

74_DW_06.TIF - Click OK.

75_DW_06.TIF

An ID selector ‘#content-main p’ is created in master.css. It specifies the paragraph style to the ‘content main’.

19. Repeat steps 1 and 2 to create an ID selector ‘#content-main h1, #content-main h2’ by grouping two ID selectors. In the CSS Rule definition for #content-main h1, #content-main h2 dialog box:

- Click Type in the Category pane. Type ‘2.15’ in the Size text box, and select ‘ems’ from the adjacent down list. Select ‘lighter’ from the Weight drop-down list. In the Color text box, type ‘#3B1814’.

(51)

76_DW_06.TIF - Click OK.

77_DW_06.TIF

An ID selector #content-main h1, #content-main h2’ is created in master.css. It specifies the headings of the ‘content main’.

20. Repeat steps 1 and 2 to create an ID selector ‘#content-main h1’. In the CSS Rule definition for #content-main h1 dialog box:

- Click Box in the Category pane. In the Margin area, deselect the Same for all check box. Type ‘5’ in the Bottom text box and select ‘pixels’ from the adjacent drop-down box.

(52)

78_DW_06.TIF - Click OK.

79_DW_06.TIF

An ID selector ‘#content-main h1’ is created in master.css. It specifies the first heading of the content-main.

- Click Type in the Category pane. Type ‘1.5’ in the Size text box, and select ‘ems’ from the adjacent drop-down list. Select ‘lighter’ from the Weight drop-down list. In the Color text box, type ‘#A84726’.

(53)

80_DW_06.TIF

- Click Box in the Category pane. In the Margin area, deselect the Same for all check box. Type values 7, 0, -12, and 0 in Top, Right, Bottom, and Left text boxes respectively and select ‘pixels’ from the adjacent drop-down lists.

81_DW_06.TIF - Click OK.

(54)

82_DW_06.TIF

An ID selector ‘#content-main h2’ is created in master.css. It specifies the second heading of the ‘content-main’.

- Click Type in the Category pane. Type ‘1.2’ in the Size text box, and select ‘ems’ from the adjacent drop-down list. Select ‘lighter’ from the Weight drop-down list. In the Color text box, type ‘#A84726’.

83_DW_06.TIF - Click OK.

(55)

84_DW_06.TIF

An ID selector ‘#content-main h3’ is created in master.css. It specifies the third heading of the ‘content-main’.

23. Repeat steps 1 and 2 to create an ID selector ‘#content-main a’. In the CSS Rule definition for #content-main a dialog box:

- Click Type in the Category pane. In the Decoration area, select the underline check box.

(56)

- Click OK.

86_DW_06.TIF

An ID selector ‘#content-main a’ is created in master.css. It specifies a link to another web page from ‘content-main’.

24. Repeat steps 1 and 2 to create an ID selector ‘#content-main .contactCont p’. In the CSS Rule definition for #content-main .contactCont p dialog box:

(57)

- Click OK.

An ID selector ‘#content-main .contactCont p’ is created in master.css.

88_DW_06.TIF

Note that, a class selector ‘contactCont’ is created here within the ID selector

‘content-main’ and the paragraph properties are defined. In this way, you can create a class selector within an id selector.

25. Repeat steps 1 and 2 to create an ID selector ‘p#mission’. In the CSS Rule definition for p#mission dialog box:

- Click Type in the Category pane. In the Type pane, select ‘italic’ from the Style drop-down list. Select ‘bold’ from the Weight drop-down list. Select ‘normal’ from the Line height drop-down list.

(58)

- In the Box pane, deselect the Same for all check box in the Margin area. Type ‘13’ in the Top text box and select ‘pixels’ from the adjacent drop-down list.

90_DW_06.TIF - Click OK.

91_DW_06.TIF

An ID selector ‘p#mission’ is created in master.css. It specifies the paragraph style to the ‘mission statement’ in content-main.

26. Repeat steps 1 and 2 to create an ID selector ‘#content-side’. In the CSS Rule definition for #content-side dialog box:

- Click Box in the Category pane. In the Box pane, select ‘right’ from the Float drop-down list. Type ‘240’ in the Width text box and select ‘pixels’ from the adjacent drop-down list.

(59)

92_DW_06.TIF - Click OK.

93_DW_06.TIF

An ID selector ‘#content-side’ is created in master.css. It includes the side content to the right side of the document besides the content-main.

27. Repeat steps 1 and 2 to create an ID selector ‘#content-sideCont’. In the CSS Rule definition for #content-sideCont dialog box:

- Click Type in the Category pane. Type ‘1’ in the Size text box and select ‘ems’ from the adjacent drop-down list.

(60)

94_DW_06.TIF

- In the Background pane, select ‘paper.gif’ by clicking the Browse button or type “../images/paper.gif” in the Background image text box. Select ‘no-repeat’ from the Repeat drop-down list. Select ‘left’ from the Horizontal position drop-down list and ‘top’ from the Vertical position drop-down list.

(61)

96_DW_06.TIF

- Click Box in the Category pane. In the Box pane, type values 160 and 205 in the Width and Height text boxes respectively. Select ‘pixels’ from the adjacent drop-down lists. In the Padding and Margin areas, deselect the Same for all check boxes. In the Padding area, type values 30, 25, 5, and 20 in Top, Right, Bottom, and Left text boxes respectively. In the Margin area, type values 45, 0, 0, and 15 in Top, Right, Bottom, and Left text boxes respectively. Select ‘pixels’ from the adjacent drop-down lists.

(62)

- Click OK.

98_DW_06.TIF

An ID selector ‘#content-sideCont’ is created in master.css. It covers the side content portion to the right side of the document besides the content-main.

28. Repeat steps 1 and 2 to create an ID selector ‘#content-sideCont p’. In the CSS Rule definition for #content-sideCont p dialog box:

- Click Type in the Category pane. Type ‘1.1’ in the Size text box and select ‘ems’ from the adjacent drop-down list. Type ‘#353535’ in the Color text box.

(63)

99_DW_06.TIF

- Click Box in the Category pane. In the Padding area, deselect the Same for all check box. Type ‘-8’ in the Bottom text box.

100_DW_06.TIF - Click OK.

(64)

101_DW_06.TIF

An ID selector ‘#content-sideCont p’ is created in master.css. It specifies the paragraph style to the content-sideCont.

29. Repeat steps 1 and 2 to create an ID selector ‘#content-sideCont .author p’. In the CSS Rule definition for #content-sideCont .author p dialog box:

- Click Type in the Category pane. Select ‘normal’ from the Line height drop-down list.

(65)

103_DW_06.TIF - Click OK.

104_DW_06.TIF

An ID selector ‘#content-sideCont .author p’ is created in master.css. Note that, a class selector ‘author’ is created within the ID selector ‘content-sideCont’ and the paragraph properties are defined. It specifies a paragraph style to the name of the author in the content-sideCont.

(66)

30. Repeat steps 1 and 2 to create an ID selector ‘#footer’. In the CSS Rule definition for #footer dialog box:

- Click Type in the Category pane. Type ‘0.7’ in the Size text box, and select ‘ems’ from the adjacent drop-down list. Type ‘#FFF’ in the Color text box.

105_DW_06.TIF

- In the Background pane, type ‘#A84726’ in the Color text box.

(67)

- In the Box pane, select ‘left’ from the Float drop-down list. Type ‘800’ in the Width text box and select ‘pixels’ from the adjacent drop-down list. In the Padding area, deselect the Same for all check box. Type values 8, 0, 25, and 0 in Top, Right, Bottom, and Left text boxes respectively and select ‘pixels’ from the adjacent drop-down lists.

107_DW_06.TIF - Click OK.

(68)

108_DW_06.TIF

An ID selector ‘#footer’ is created in master.css. Footer is located at the bottom of the document which includes contact information and other links.

31. Repeat steps 1 and 2 to create an ID selector ‘#footer p’. In the CSS Rule definition for #footer p dialog box:

- Click Box in the Category pane. In the Padding and Margin areas, deselect the Same for all check boxes. In the Padding area, type values 15, 0, 5, and 25 in Top, Right, Bottom, and Left text boxes respectively. In the Margin area, type values -10, 0, -21, and 0 in Top, Right, Bottom, and Left text boxes respectively. Select ‘pixels’ from the adjacent drop-down lists.

(69)

110_DW_06.TIF

An ID selector ‘#footer p’ is created in master.css. It specifies the paragraph style to the footer content.

32. Repeat steps 1 and 2 to create an ID selector ‘#footer p .author’. In the CSS Rule definition for #footer p .author dialog box:

- Click Box in the Category pane. In the Margin area, deselect the Same for all check box. Type ‘10’ in the Top text box and select ‘pixels’ from the adjacent drop-down list.

- Click OK.

An ID selector ‘#footer p .author’ is created in master.css. Note that a class selector ‘author’ is created within the ID selector ‘footer p’.

(70)

111_DW_06.TIF

33. Repeat steps 1 and 2 to create an ID selector ‘#footer a’. In the CSS Rule definition for #footer a dialog box:

- Click Type in the Category pane. Select the underline check box in the Decoration area. Type ‘#FFF’ in the Color text box.

- Click OK.

112_DW_06.TIF

An ID selector ‘#footer a’ is created in master.css. It specifies a link to another web page from ‘footer’.

34. Repeat steps 1 and 2 to create an ID selector ‘#containerBot’. In the CSS Rule definition for #containerBot dialog box:

- In the Background pane, select ‘shadow-bottom.jpg’ by clicking the Browse button or type “../images/shadow-bottom.jpg” in the Background image text box. Select ‘no-repeat’ from the Repeat drop-down list. Select ‘left’ from the

Horizontal position down list and ‘bottom’ from the Vertical position drop-down list.

- In the Box pane, type values 850 and 30 in the Width and Height text boxes respectively. Select ‘pixels’ from the adjacent drop-down lists. In the Margin area,

(71)

deselect the Same for all check box. Type 0, auto, 0, and auto in Top, Right, Bottom, and Left text boxes respectively.

- Click OK.

113_DW_06.TIF

An ID selector ‘#containerBot’ is created in master.css. ContainerBot specifies a shadow effect to the bottom of the document.

35. Repeat steps 1 and 2 to create an ID selector #home, #homelink a, #about, #aboutlink a, #products, #productslink a, #faq, #faqlink a, #franchisee,

#franchiseelink a, #locations, #locationslink a, #contact, #contactlink a, #login, #loginlink a by grouping several ID selectors. In the CSS Rule definition dialog box:

- In the Type pane, type ‘#E1957B’ in the Color text box. - Click OK.

(72)

This is for applying a color to the links when they are clicked. Here, when you are creating #home, #homelink a, the color of the link will be #E1957B. These links are created for the uniNav list in the header portion.

36. Repeat steps 1 and 2 to create an ID selector ‘#faq #content-main p’. In the CSS Rule definition for #faq #content-main p dialog box:

- Type Box in the Category pane. In the Margin area, deselect the Same for all check box. Type ‘21’ in the Left text box and select ‘pixels’ from the adjacent drop-down list.

- Click OK.

115_DW_06.TIF

An ID selector ‘#faq #content-main p’ is created in master.css. It specifies the paragraph style to the ‘faq content-main’.

Create Pseudo-Class Selectors

Class selectors and id selectors are based on elements within the document tree. Pseudo-class selectors are used where no CSS element is available. For example, a pseudo-class selector can represent the state of a hyperlink displaying certain states like ‘active’ and ‘visited’. A pseudo-class selector simply refers to an element in a certain state. A pseudo-class selector always begins with a colon (:).

The four pseudo-class selectors are:

- a: link: Refers to a hyperlink that is not visited - a: visited: Refers to a hyperlink that is visited

- a: hover: Refers to a hyperlink when the mouse pointer is hovering over the hyperlink

- a: active: Refers to an active hyperlink

In this exercise, you will create pseudo-class selectors.

2. In the New CSS Rule dialog box, click the Advanced radio button. In the Selector text box, type or select ‘a:visited’. Click OK.

(73)

116_DW_06.TIF

3. In the CSS Rule definition for a:visited dialog box:

- Click Type in the Category pane. Type ‘#B5A48C’ in the Color text box. - Click OK.

A pseudo-class selector ‘a:visited’ is created in master.css.

117_DW_06.TIF

4. Repeat steps 1 and 2 to create a pseudo-class selector ‘a:hover’. In the CSS Rule definition for a:hover dialog box:

- Click Type in the Category pane. Type ‘#E1957B’ in the Color text box. - Click OK.

A pseudo-class selector ‘a:hover’ is created in master.css.

5. Repeat steps 1 and 2 to create a pseudo-class selector ‘#uniNav ul a:hover’. In the CSS Rule definition for #uniNav ul a:hover dialog box:

A pseudo-class selector ‘#uniNav ul a:hover’ is created in master.css.

6. Repeat steps 1 and 2 to create a pseudo-class selector ‘#content-main a:hover’. In the CSS Rule definition for #content-main a:hover dialog box:

(74)

A pseudo-class selector ‘#content-main a:hover’ is created in master.css.

7. Repeat steps 1 and 2 to create a pseudo-class selector ‘#footer a:hover’. In the CSS Rule definition for #footer a:hover dialog box:

- Click Type in the Category pane. Type ‘#E1957B’ in the Color text box. - Click OK.

A pseudo-class selector ‘#footer a:hover’ is created in master.css.

118_DW_06.TIF

U

SING

C

ASCADING

S

TYLE

S

HEETS FOR

D

IFFERENT

P

URPOSES

A Cascading Style Sheet is primarily used to design the layout of a Web page. It has other uses as well.

A cascading style sheet allows you to create a media-specific style. You might have observed that when a Web page is printed, unwanted images and links also get printed along with the required text. A print style sheet can prevent this from happening. Creating a style sheet for print prints only the specified content and disables the remaining content. Links such as ‘Printer-friendly version’ or ‘Print this document’ in Web sites have a print style sheet attached.

If you want certain styles not to be displayed in the browser, you can create a separate style sheet - called a design-time style sheet - to hide such styles. Using a design-time style sheet, you can show or hide styles in a browser.

(75)

Some browsers might not support certain styles you have used, or you want to give a choice of styles to the user. In such cases, you can use alternate style sheets. However, the efficacy of alternate style sheets varies from browser to browser.

DREAMWEAVER FOUNDATIONS

WORKING WITH DESIGN-TIME STYLE SHEETS

Applying styles to a Web page is, in fact, a matter of experimenting. While you design a Web page, you try a certain style and then you change it. You keep on trying styles in this way till you are content with the appearance of the Web page. Sometimes you may find certain styles

displaying incorrectly in Dreamweaver and you want to try some different styles - only to appear in the design view. For these purposes, you can use a specific cascading style sheet called design-time style sheet.

A design-time style sheet is a separate style sheet – in addition to the main cascading style sheet – which affects only the design view in Dreamweaver. A design-time style sheet allows you to display or hide styles in the Dreamweaver, but it prevents these styles to appear in the browser when the Web site goes live.

To attach a design-time style sheet to an HTML page, choose Text>CSS Styles and click Design-time. In the Design-time Style Sheets dialog box, click the ‘+’ sign to navigate and select a style sheet. To show the style sheet at design time, select it in the ‘Show only at design time’ box. To hide a style sheet at design time, select it in the ‘Hide at design time’ box. To remove a style sheet, click the ‘-‘ sign.

DREMWEAVER FOUNDATIONS

WORKING WITH ALTERNATE STYLE SHEETS

Usually style sheets are associated with HTML documents using the link element. So, it is important to use the element's attributes properly. The use of the title attribute is very important so that HTML categorizes style sheets according to the presence or absence of a title.

If you include the title attribute, you can see that the particular style sheet always affects the document.

There are three kinds of style sheets:

- Persistent: This has no title attribute. A document may refer to one or more persistent style sheets.

- Preferred: This style sheet carries a value supplied for the ‘rel’ attribute. (‘rel’ attribute is used to define the relationship between the linked file and the HTML document.

- Alternate: You can select this style sheet as an alternative to the preferred style sheet. An alternate style sheet relationship is specified with a REL attribute value of the alternate style sheet.

Consider the following example:

Here rel="Alternate StyleSheet" defines an alternate style. You can choose the alternate style to replace the preferred style sheet.