Dreamweaver: Cascading Style Sheets Goals of the Workshop This workshop seeks to introduce participants to Cascading Style Sheets (CSS) and how to apply them using Dreamweaver MX. At the conclusion of the workshop, participants should be able to: • Understand the benefits and limitations of CSS • Create an internal sheet • Create an external style sheet • Attach an external style sheet to a page • Design a basic page using CSS to control positioning rather than tables A Bit of History HTML was originally intended to identify elements of a web page, not to control how the page looked on the screen. As the web evolved from a purely text-based medium to a more varied format, web designers wanted more control over the look of their pages. Eventually, HTML included more design elements (such as the ability to change font colors), but the process was still tedious for large sites. CSS was developed to address the needs of web designers to exercise greater control over how their pages looked. It allows you to separate your content and your design in your code. Using CSS you can very easily make significant changes to how you pages look on all of the pages in your web site in a matter seconds. In addition, advanced users of CSS can exercise very precise control over the placement of elements on the page without having to use tables. As a result, pages can load faster and CSS also allows web designers to break free of the “boxy” design that is often the result of designing with tables. However, there are problems with CSS. Not all browsers render CSS correctly. For a chart showing which CSS elements are supported by which versions of Internet Explorer and Netscape Navigator visit this resource: http://www.w3schools.com/css/css_reference.asp CSS at Work Visit the following web site to get a sense of one way CSS is applied to easily and dramatically change the way a page is displayed: http://www.w3schools.com/css/demo_default.htm

Applying CSS CSS can be applied in three ways: 1. Inline Style 2. Internal Style Sheet 3. Attached Style Sheet Using Inline Style to implement CSS negates many of the advantages of using CSS, so we will not devote time to it in this workshop. Creating an Internal Style Sheet Open the page called sample.ht ml in the workshop file folder. This illustrates a simple page where the text identified by the HTML tag

is displayed in a blue sans-serif font by nesting a font tag within each occurrence of the

tag. Look at the source code:

First Title

Using traditional HTML, each time the

tag is used we have to nest the font tag to achieve the desired result. If we later decide that we would rather have the

text displayed in red we would have to go through and manually change each font tag. Using CSS makes the task much easier. Open Sample2.html in Dreamweaver. Let’s recreate the same effect using CSS. ü Go to Text > CSS Styles > New ü Choose Tag as the Selector type. ü Select h1 from the drop down list as the tag we wish to redefine. ü Select This document only as the location to define in. ü Click OK ü The CSS Style Definition Window will pop up. ü Type sans -serif in the Font box ü Type #3366CC in the Color box ü Click OK. ü The new effect is applied to all instances of the

tag in the document.

Because we elected to define the style in this document only, Dreamweaver added some code in our section of the document: <style type="text/css"> If we wanted to change the style of the main text on the page we could repeat the process above but define the

tag instead and end up with something like this: <style type="text/css"> We are not limited, however, to simply redefining how HTML tags are displayed. CSS allows us to create custom styles that can be applied anywhere, regardless of the HTML tag associated with the element we want to customize. To Create a Custom Style ü Go to Text > CSS Styles > New ü Choose Make Custom Style (Class) as the Selector type. ü Type .headline ü Select This document only as the location to define in. ü Click OK ü Change the font characteristics as in the illustration below:

Creating a custom style called headline

ü ü ü ü

Click OK On your page, select some text. Go to Text > CSS Styles > headline The style will be applied to the text you selected.

Creating a External Style Sheet You can also define your CSS styles in a text file that is separate from your actual web page and “attach” the style sheet to the web page. This method offers several advantages. First, your stylistic elements are further separated from your HTML, leaving your HTML cleaner. Second, the same styles can be used on multiple pages within a site without having to duplicate the style definitions on each page. Simply attach the style sheet to each page where you would like the styles used. In Dreamweaver, you could even make the code that attaches the style sheet a part of a template, further simplifying dramatic site wide changes that could take hours or days if the design elements were created with simple HTML. Simply change the external style sheet and upload it to your server. The changes are made. If you used an internal style sheet as part of your Dreamweaver template, you would still have to upload all the pages that use that template. External style sheets save time and effort. But you do need to be aware of how styles are inherited (see “What’s Cascading About CSS? Below).

To make an external style sheet and attach it to your current document, simply Text > Css > New; then elect to define it in a New Style Sheet.

Give the sheet a name when prompted. Then define your styles as you normally would. The style sheet will be saved with a .css extension. In your HTML document a line will be added to your section: This code tells the browser to load the file test3.css and apply the styles defined in that file to the current document. Notes: ü You can attach more than one external sheet. However, be aware of inheritance rules (see “So What’s Cascading about CSS?” below). Also, some older browsers have trouble with importing more than one style sheet. ü To attach an already created style sheet to your current document: 1. Go to Window > CSS Styles 2. Click the icon to Attach Style Sheet 3. Browse to find the sheet you wish to attach. 4. Pick whether you would like to “link” the sheet or “import” it. In most cases, these are interchangeable. Older browsers that do not offer complete CSS CSS will ignore sheets that are imported. The “link” method also allows additional attributes that we will not discuss here. Or: 1. Text > CSS > Attach Style Sheet Follow steps 3 & 4 from above

To Turn an Internal Style Sheet into an External One ü File > Export > CSS Styles ü Name your file ü Note that this copies the current internal styles into a new external sheet. It does not remove the internal styles from your current document, nor does it attach the newly created external sheet to your current document.

Some Commonly Requested Settings Changing Links With CSS you can control the look of your links. No longer do you have to be satisfied with blue underlined text. CSS uses what is called pseudo-classes to redefine the appearance of links. (You don’t need to know why it is a pseudo-class, but if you have a burning desire to know, you can read http://www.w3.org/TR/CSS1#pseudo-classes-andpseudo-elements.) √ Start to define the style as you would any other one. √ Choose Use CSS Selector √ For the selector, type “a:” followed by the state of the link you wish to define. √ Links have 4 states. See the table below. You can define each state independently. √ You can define any or all of the states. √ NOTE: The order in which you define them is important. Do them in the order listed below: Link Type Description a:link The normal state of a link, with blue as default color. a:visited The state of a link after a user clicks a link; its default color is purple. a:hover The state of a link when the user moves the pointer over it like a rollover. a:active The state of a link when it is selected by the user, its default color is red Indenting Paragraphs To create a paragraph that is indented as is the standard in the print world, adjust the textindent of the

tag or of your custom style.

Hanging Indents Hanging indents are often used in bibliographies and look like the following: Davis, John, and Peter Edwards. The True History of Presidential Campaigns. New York: Watts, 1982. To create the same effect with CSS, set the text- indent to a negative number, and then set the margin- left to the same number’s positive equivalent. For example: .hanging { text- indent: -25px; margin- left: 25px; } A Watermark ü In the tag, select the background image you would like to use. ü Set the image to No-Repeat ü Set the attachment to Fixed ü Set the horizontal and vertical position to where you would like the image to appear. Example: body { background-image: url(watermark.gif); background-repeat: no-repeat; background-position: right bottom; background-attachment: fixed; } So what’s an em anyway? You are often asked when working in CSS if you would like to use ems, exs, px, points, picas, inches, etc. when setting your font size or indentations. These are typographical units of measurements. However, even if you are familiar with some of them from printing, they sometimes have special meanings in CSS: em in standard typography is equal to the width of the letter 'm' in the current font. However in CSS, an em is considered to be the size of the user's default font-size. So, in a default IE install, 1em will be 16px. ex is like em, but it is equal to the height of the lowercase 'x' in the current font. However, in CSS, an ex is considered to be half of one em. In a default IE install, 1ex will be 8px. pt stands for 'point', a typographical unit of measurement equal to 1/72 inch. On 72dpi (dots per inch) media, 12 point text will be 12 dots high (or 12/72 inch); on 96dpi media it will be 16 dots high, but still 12/72 inch. Note that most

personal computer operating systems use dpi values as if they corresponded to real inches (which they infrequently do) that actually refer to virtua l inches that vary in size according to display resolution and size. For example, 12 point text on a Windows PC using a 17" CRT display and 96 dpi will be about 13/72" tall at 800x600 display resolution, but only about 10/72" tall at 1024x768 display resolution. px stands for 'pixel', the smallest element on a computer screen. It is inadvisable to specify font sizes in pixels because they can't be resized by the sightimpaired who use Internet Explorer, and will be a different real size on a display with a different resolution and/or size. You can also use absolute measurements such as centimeters and inches, but those measurements should be avoided when designing for the web since the various computer monitors used will make them useless. So what measurement should you use? Web designers disagree, although there are only two top runners. Most use either pixels or ems. Ems have the advantage of being resizable by the user in the browser (in IE, go to View > Text Size). Pixels are fixed. For an example of the debates, see: http://archivist.incutio.com/viewlist/css-discuss/1482. So What’s “Cascading” about CSS? Style Sheets are called “cascading” because they follow specific rules that determine how they are applied to the elements on a page. The easiest way to understand this concept is to define the same tag (such as

) using both an inline style and as part of an attached style sheet, but define the tag differently in each case. ü Open Sample2.html. ü In this file we defined the

tag to have a color of #990000 using an internal style sheet. ü Now to this page, attach the external style sheet we created called sample3.css. (See explanation above about how to attach an external style sheet.) Remember that in this external style sheet we defined

to have a color of #006633. When we apply the external style sheet…nothing happens (at least not with the

text). This happens because styles defined in an external style sheet have a lower priority than styles defined in an internal style sheet. The rules of inheritance are as follows, where #4 has the highest priority: 1. 2. 3. 4.

Browser default External Style Sheet Internal Style Sheet (inside the tag) Inline Style (inside HTML eleme nt)

So, an inline style (inside an HTML element) has the highest priority, which means that it will override every style declared inside the tag, in an external style sheet, and in a browser (a default value). Designing without Tables The positio ning elements of CSS give web designers a great deal of power and flexibility with their page layout. Historically, designers have used a combination of tables, transparent images, and the <spacer> tag to control the placement of elements on the page. This method presents all sorts of problems, however. Because browsers must download all the portions of a table before beginning to display its contents, pages load slower. Readers used by web surfers with visual impairments may be confused by table layouts and “invisible” images used to control spacing. CSS offers an alternative. Look at the following examples: ü http://www.wired.com/ ü http://www.bigbaer.com/css_tutorials/css.image.text.wrap.htm Neither one of those pages uses tables for layout purposes. (Note: there is one table on the Wired page, but it is content that is taken from a service—the stock quotes). In addition, the second page illustrates how CSS can be used to wrap text around images as designers might do in a print publication. Let’s design a simple page that has a banner type area across the top, navigational links down the left side, and a main content area…and let’s do it without tables. Open the file “rough.html” in our working folder. This is page contains the unformatted text of our page. When we are finished with it, however, it should look like this:

This page was designed without using any tables, just CSS

Steps: ü Text > CSS Styles > New ü Create a new style sheet and to attach by using the folling settings: Tag: Body; Selector Type: Tag; Define In: New Style Sheet File ü Name the css file “rough” ü Redefine the attributes of the tag as follows: margin:0px; padding:0px; font-family:verdana, arial, helvetica, sans-serif; color:#333; background-color:white; ü Redefine the attributes of the

as follows: margin:0px 0px 15px 0px; padding:0px; font-size:28px; line-height:28px; font-weight:900; color:#ccc;

ü Redefine the attributes of the paragraph tag

as follows: font:11px/20px verdana, arial, helvetica, sans-serif; margin:0px 0px 16px 0px; padding:0px; ü Redefine the attributes of hyperlinks (the tag) as follows: color:#09c; font-size:11px; text-decoration:none; font-weight:600; font-family:verdana, arial, helvetica, sans-serif; At this point, let’s exit out of the style sheet and see how the application of the style sheets affects our page. … The text colors are different than the default, but the layout is still basically the same. We have more work to do. ü Let’s add the pseudo-class elements for the links. Open the style sheet and manually add the following lines: a:link {color:#09c;} a:visited {color:#07a;} a:hover {background-color:#eee;} ü Define a new class named .header as follows: margin:50px 0px 10px 0px; padding:17px 0px 0px 20px; height:33px; /* 14px + 17px + 2px = 33px */ border-style:solid; border-color:black; border-width:1px 0px; /* top and bottom borders: 1px; left and right borders: 0px */ line-height:11px; background-color:#eee; ü Exit out of the style sheet editor. ü Apply the .header class to the text “Academic Technology Support” using

tags o Highlight the text; o Insert > Layout Objects > Div Tag ü Define a new class named .leftmenu as follows: position:absolute; top:100px; left:20px; width:150px; padding:10px; background-color:#eee; border:1px dashed #999; line-height:17px; width:150px;

ü Exit out of the style sheet and apply the new class to the series of links at the bottom of the page by using

tags. ü Create a new class named .content as follows: margin:0px 50px 50px 200px; padding:10px; ü Apply the .content class to the text in the page beginning with the “Example of…” and ending with “Another link”, once again using

tags. You should now have a page that resembles the one above. Useful Resources: The official Web Consortium page for CSS: http://www.w3.org/Style/CSS/ CSS validator: http://jigsaw.w3.org/css-validator/

Academic Technology Support Karen King, Director [email protected], 423.439.8611 Erik Bledsoe, Technology Development Coordinator [email protected], 423.439.8615 Myra Jones, Technology Development Coordinator [email protected], 423.439.8614

---

Related Documents

Dream Weaver Cascading Style Sheets

April 2020 22

Cascading Style Sheets

November 2019 22

Cascading Style Sheets

June 2020 15

Cascading Style Sheets

November 2019 45

Cascading Style Sheets (css)

December 2019 56

Cascading Style Sheets And Themes

July 2020 11

---

More Documents from ""

Building A Web Site With Kompozer

June 2020 11

Installing Wine

June 2020 23

Photoshop Tutorial: Shiny Starburst Effect, Ray Of Light Effect And Lighting Effects

June 2020 14

Learn To Play The Piano

April 2020 17

Jsp Tutorial

June 2020 11

Beginning Powerpoint 2007

October 2019 32