DREAMWEAVER CS5.5: USING STYLE SHEETS

Size: px

Start display at page:

Download "DREAMWEAVER CS5.5: USING STYLE SHEETS"

Jewel Ferguson
7 years ago
Views:

1 Medical Library/Department of Information & Communication Sciences WHAT ARE STYLE SHEETS? DREAMWEAVER CS5.5: USING STYLE SHEETS Style sheets are collections of rules that define the styles of a document. Style sheets offer more control over type than standard HTML. For example, you can specify the amount of space between line of type, the size of the type in pixels instead of points, and specific fonts for specific page elements. WHY USE STYLE SHEETS? HTML is for structure, not for layout. Style sheets separate content and presentation, making the content more accessible. More control over type than standard HTML More control over placement of text and objects on a page. TYPES OF STYLE SHEETS EMBEDDED All of the code is written inside the <head> tag of the document and affects only this one page. Useful if you want to apply this style to only a single page Example code:<style type="text/css"><! -H1 {color:blue; font-family: verdana}-></style> EXTERNAL Most powerful type of style sheet. One single file can be used to format many other pages. The contents of an external CSS file look just like embedded code, except it is saved in a separate file with a.css extension. Instead of embedding the code in the HTML document, you make a link to the external CSS file. Example code:<link rel=stylesheet href="mystyles.css" type="text/css"> TO ADD A NEW STYLE SHEET OR TO ADD A NEW STYLE TO AN EXISTING STYLE SHEET: Open the CSS Styles panel by choosing Window-> CSS Styles. Click the New CSS Rule button to open the New CSS Style Rule dialog box. In the New Style Rule dialog box you will be asked to choose the following: 1. Selector Type for your CSS rule 2. Selector Name 3. Where to define the new style rule. If you are creating a new style sheet, choose "New Style Sheet File" to create a separate style sheet that can be used for multiple pages. You will be asked to name and save the style sheet. If you choose "This document only" the style information will be part of the current HTML page rather than a separate document.. REDEFINING HTML TAGS By redefining HTML tags, font attributes, such as color and size can be assigned to the tags. All text marked with a redefined tag will automatically show the changes. This approach is highly recommended and results in less markup of text. EXAMPLE: CREATING A STYLE RULE TO REDEFINE THE BODY TAG

For example, you can specify the amount of space between line of type, the size of the type in pixels instead of points, and specific fonts for specific page elements. WHY USE STYLE SHEETS?

SELECTOR TYPE: Choose Tag SELECTOR NAME: Click the triangle on the right and choose body from the drop down list of HTML tags. RULE DEFINITION: Make sure to check where the style is being saved.

2 SELECTOR TYPE: Choose Tag SELECTOR NAME: Click the triangle on the right and choose body from the drop down list of HTML tags. RULE DEFINITION: Make sure to check where the style is being saved. Usually you should save it in a new or existing style sheet rather than in this document only CUSTOM CLASSES A style sheet class is a set of specifications that can be applied to any tag on the page. Create a custom class instead of redefining the formatting of an HTML tag when you would like to randomly apply the style without having it applied to every instance of a particular HTM L tag. CREATING A CUSTOM CLASS 2

Usually you should save it in a new or existing style sheet rather than in this document only CUSTOM CLASSES A style sheet class is a set of

3 SELECTOR TYPE Make sure the CSS Styles panel is open. Click the New Style icon to open the New Style dialog box. Select Class SELECTOR NAME Enter a name for the style. Do not use spaces in the style name. All class names must start with a period, but Dreamweaver will add the period if you do not. RULE DEFINITIONS Save the new style in your style sheet and click OK Add the style definitions and click OK. Select the style rule definitions for the new custom class. In this example blue was selected for the text color and bold for the font weight. APPLYING OR REMOVING A CUSTOM CLASS APPLY A CUSTOM CLASS Select the text or part of the page you want to change and then click on the Class drop-down box in the Properties panel and select the desired class 3

RULE DEFINITIONS Save the new style in your style sheet and click OK Add the style definitions and click OK. Select the style rule definitions for the new custom class.

4 TO REMOVE CUSTOM CLASS FORMATTING, Select the part of the page with formatting you want to remove. Click on the CSS Styles box in the Properties panel and choose None. ADVANCED CSS AND POSITIONING IDS An ID contains formatting that be applied to a DIV tag or other element. Unlike a custom class, which can be used multiple times in an html document, the ID may only used once. ID names begin with a hash mark (#). Dreamweaver will add the # to the name if you do not. COMPARISON OF CLASS VS. ID CLASS ATTRIBUTE A period (.) is the flag character for CLASS selectors All elements inside BODY can have a CLASS attribute A CLASS can be used multiple times in a document ID ATTRIBUTE A hash mark (#) is the flag character for ID selectors All elements inside BODY can have an ID attribute Value of an ID attribute must be unique throughout the document. i.e. an ID can only be used once DIV TAG The DIV tag can be used to create containers for text and images. These containers can then be positioned more precisely on the page. When you insert a DIV tag you can assign an ID to it. Or you can add or change the ID later. IMPORTANT: Put content in its logical order to ensure that your document makes sense in browsers that don t support CSS. TO CREATE AN ID. SELECTOR TYPE Make sure the CSS Styles panel is open. Click the New Style icon to open the New Style dialog box and choose ID SELECTOR NAME Enter a name for the ID. Do not use spaces in the ID name. All ID names must start with a hash mark (#), but Dreamweaver will add the # if you do not. RULE DEFINITIONS Save the new style in your style sheet and click OK Add the style definitions and click OK. 4

Unlike a custom class, which can be used multiple times in an html document, the ID may only used once. ID names begin with a hash mark (#). Dreamweaver will add the # to the name if you do not.

TO ADD A DIV TO YOUR WEB PAGE: Click the Insert DIV button on the Common Insert Panel OR Choose: Insert -> Layout Object -> DIV tag OR In the Insert DIV Tag box choose an ID from the drop down list.

5 TO ADD A DIV TO YOUR WEB PAGE: Click the Insert DIV button on the Common Insert Panel OR Choose: Insert -> Layout Object -> DIV tag OR In the Insert DIV Tag box choose an ID from the drop down list. (The IDs you entered earlier will be listed.) You can also choose where to insert the DIV tag and a custom class to be applied to the DIV. COMPOUND CSS SELECTORS Compound CSS selectors are based on your selection and you can make them more or less specific. If you have used DIVs in your page, you can make a style that will only affect elements in a specific DIV. For example, you could change link color and underlining in particular DIV rather than the entire page. COMPOUND CSS SELECTOR EXAMPLE Make sure the CSS Styles panel is open. Click the New Style icon to open the New Style dialog box Click New and then click OK. In the New CSS Style box choose Compound for Selector type. PSEUDO-CLASSES Pseudo-class selectors are CSS selectors with a colon preceding them. 5

COMPOUND CSS SELECTORS Compound CSS selectors are based on your selection and you can make them more or less specific.

6 A pseudo-class is used to define a special state of an element. For example, it can be used to: Style an element when a user mouses over it Style visited and unvisited links differently a:link a:visited a:hover a:active a:focus A link that has not been visited A visited link Mouse hover over link Selected link Link selected by using the Keyboard When creating a compound CSS selector, type in the colon (:) and the pseudo-class type after the a: Note: a:hover MUST come after a:link and a:visited in the CSS definition in order to be effective. a:active MUST come after a:hover in the CSS definition in order to be effective. Pseudo-class names are not case-sensitive. 6

link that has not been visited A visited link Mouse hover over link Selected link Link selected by using the Keyboard When creating a compound CSS selector, type in

7 MORE ON USING THE CSS PANEL ATTACH AN EXISTING STYLE SHEET TO A WEB PAGE: Use the attach style sheet button at the bottom of the CSS Panel. TO SEE A SUMMARY OF THE STYLES AFFECTING A SELECTED AREA OF YOUR DOCUMENT: Select part of your document and click the Current button in the Styles Panel. A list of the rules affecting the selection will be displayed. TO SEE THE ENTIRE LIST OF STYLES CONTAINED IN THE STYLE SHEET: Click the All button in the Styles Panel. 7

TO SEE A SUMMARY OF THE STYLES AFFECTING A SELECTED AREA OF YOUR DOCUMENT: Select part of your document and click

TO EDIT A STYLE: Select the style you wish to edit click the edit button at the bottom of the CSS Panel ACCESSIBILITY CONSIDERATIONS 1. Pages must still be readable when the style sheet is turned off.

8 TO EDIT A STYLE: Select the style you wish to edit click the edit button at the bottom of the CSS Panel ACCESSIBILITY CONSIDERATIONS 1. Pages must still be readable when the style sheet is turned off. 2. Use relative rather than absolute units when designating text size. 3. Do not convey meaning solely with color 4. Provide enough contrast when using colors for text and background to ensure that the page will be readable by those with low vision or colorblindness. POSITIONING Elements that don t use any positioning methods are called static. This is the normal case. Normal (static) elements are placed relative to their parent and to elements that precede them. Positioned elements are placed relative to so-called containing blocks. RELATIVE POSITIONING The typical use of relative positioning is to position elements away from their normal position without influencing the position of other elements. FIXED POSITIONING Use when you want to keep an element onscreen at all times, such as a warning or logo. ABSOLUTE POSITIONING The simplest form is when the elements to position are positioned relative to the initial containing block. Two major ways in which absolute positioning can be used: FLOAT PROPERTY Have a few absolutely positioned elements in an otherwise normal document (such as putting a logo in a corner) Create areas for parts of the document. Used most often for inline images, allowing the image to float to the right or left and text to wrap around it. 8

Provide enough contrast when using colors for text and background to ensure that the page will be readable by those with low vision or colorblindness.

9 CLEAR PROPERTY The clear property works with the float property. It specifies whether an element allows floating elements at its side. Use in cases where you do not want text to wrap around a floating element. This property has four values: none (default), left, right, both None means the element allows floating elements on both sides. Both means the element will not have floating elements on either side. CLT 1/21/15 9

Use in cases where you do not want text to wrap around a floating element.

Dreamweaver CS4 Day 2 Creating a Website using Div Tags, CSS, and Templates

Dreamweaver CS4 Day 2 Creating a Website using Div Tags, CSS, and Templates What is a DIV tag? First, let s recall that HTML is a markup language. Markup provides structure and order to a page. For example,