Web Development

  Homes arrow Web Development arrow Using Style Sheets in Dreamweaver
 Webmaster Tools
 
Base64 Encoding 
Browser Settings 
CSS Coder 
CSS Navigation Menu 
Datetime Converter 
DHTML Tooltip 
Dig Utility 
DNS Utility 
Dropdown Menu 
Fetch Content 
Fetch Header 
Floating Layer 
htaccess Generator 
HTML to PHP 
HTML Encoder 
HTML Entities 
IP Convert 
Meta Tags 
Password Encryption
 
Password Strength
 
Pattern Extractor 
Ping Utility 
Pop-Up Window 
Regex Extractor 
Regex Match 
Scrollbar Color 
Source Viewer 
Syntax Highlighting 
URL Encoding 
Web Safe Colors 
Forums Sitemap 
Weekly Newsletter
 
Developer Updates  
Free Website Content 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Contact Us 
Site Map 
Privacy Policy 
Support 
 USERNAME
 
 PASSWORD
 
 
  >>> SIGN UP!  
  Lost Password? 
WEB DEVELOPMENT

Using Style Sheets in Dreamweaver
By: Developer Shed
  • Search For More Articles!
  • Disclaimer
  • Author Terms
  • Rating: 5 stars5 stars5 stars5 stars5 stars / 1
    2004-01-30

    Table of Contents:

    Rate this Article: Poor Best 
      ADD THIS ARTICLE TO:
      Del.ici.ous Digg
      Blink Simpy
      Google Spurl
      Y! MyWeb Furl
    Email Me Similar Content When Posted
    Add Developer Shed Article Feed To Your Site
    Email Article To Friend
    Print Version Of Article
    PDF Version Of Article
     
     

    SEARCH DEV MECHANIC

    TOOLS YOU CAN USE

    advertisement

    Using Style Sheets in Dreamweaver
    by Visualsoft UK Ltd

    After completing this tutorial you will be able to:

    • Use Style Sheets
    • Work with Cascading Style Sheets
    • Apply Style Sheets to Multiple Pages
    • Link to External Style Sheets

    Defining Style Sheets

    Style sheets offer control and standardization over an entire page or even on a site-wide basis. Theyíre flexible enough to let you handle specific custom situation that need to override the global settings as well.

    When you want to set one local bit of text to a particular style, youíre better off using plain old HTML styles. For instance, if you want to italicize a particular word or phrase, just set it to italic using the normal methods.

    Style sheet is best used for global situations, where several different bits of text need to be handled in a standardization manner. For example, suppose that you are creating a major Web site with dozens on even hundreds of pages, and you want to set all the H1 headings to use Arial font. Thatís a lot of work if you do it all by hand on each page, but itís childís play to do it with cascading style sheets.

    Cascading style sheets are called that because there is an order of procedure involved. Styles can be applied as follows:

    • External style sheets can be linked to pages
    • Each page can have its own embedded style sheet (within the HEAD element)
    • Within a page, a particular bit of text can have its own styles

    Itís quite possible for the instructions from one of these to conflict with others. When this happens, the Web page designer needs to know what to expect.

    The solution is that the precedence cascades, or passes downward, much like an object going over a waterfall. An external style sheet has the lowest level of precedence. If a web page has both an external style sheet and an embedded one, the embedded one takes precedence in the event of a conflicting instruction. If thereís an element within the Web page that has its own style setting, that particular style will override both an embedded style sheet and an external one.

    Cascading style sheets donít just deal with conflicts. They also cover settings that overlap without conflict. Say, for instance, that you have the H1 (large heading) element defined as italic in one style sheet and red in another one. If both style sheets affect the same document, then these effects will be merged to produce red, italic H1 elements in that document.

    Using style sheets takes a hit more work overall than simply occasionally applying a style on a local basis. Depending on the project youíre working on, it may or may not be worth it for you. If youíre designing a short, stand-alone Web page with a small amount of text, then itís clearly not a job for CSS. On the other hand, if youíre going to create large projects, especially sites with multiple pages on which you want a consistent textual appearance, using CSS can save you time.

    Dreamweaver frees you from concerning yourself with the details and syntax of style sheets. All you need to do is to tell it what styles you want on your Web page, and it will take care of the rest.

    Linking to other files

    The Link object is used to indicate a relationship between the current page and another page or file. Although there are many other intended uses, the <link> tag is most commonly used to apply an external Cascading Style Sheet (CSS) to the current page. This code is entered automatically in Dreamweaver when you create a new linked style sheet, but to apply an existing style sheet, you need to use the Link object. The Link tag is also used to include TrueDoc dynamic fonts.

    To insert a Link object, first choose Insert _Head _Link or select the Insert Link object from the Head panel of the Objects palette Illustrated below).



    This opens the Insert Link dialog box, shown in Figure 2-1.



    Next, enter the necessary attributes:



    Aside from the style sheet use, thereís little browser support for the other link functions. However, the W3C supports an initiative to use the <link> tag to address other media, such as speech synthesis and Braille devices, and itís entirely possible that the Link object will be used for this purpose in the future.

    Cascading Style Sheets

    CSS Styles palette


    Through the Styles palette, Dreamweaver makes creating and applying Cascading Style Sheets (CSSs) easy. CSSs give the Web designer a terrific degree of control over the appearance of text and other elements, throughout the creation stage and when the Web site is live. Styles can be used in conjunction with a single Web page or an entire site.

    The Styles palette, shown below, is accessed by clicking the Styles button from either the Launcher palette or the status bar Launcher. You can also open the Styles palette by choosing Window _Styles or by pressing F7. You can drag or resize the Styles palette with the mouse.



    The CSS Styles palette has the following three key uses:



    Understanding Cascading Style Sheets

    The Cascading Style Sheets system significantly increases the design capabilities for a Web site. If you are a designer used to working with desktop publishing tools, you will recognize many familiar features in CSS, including the following:

    • Commands for specifying and applying font characteristics
    • Traditional layout measurement systems and terminology
    • Pinpoint precision for page layout

    Cascading Style Sheets are able to apply many features with a simple syntax that is easy to understand. If youíre familiar with the concept of using styles in a word processing program, youíll have no trouble grasping style sheets.

    Hereís how the process works: CSS instructions are given in rules; a style sheet is a collection of these rules. A rule is a statement made up of an HTML or custom tag, called a selector, and its defined properties, referred to as a declaration. For example, a CSS rule that makes the contents of all <h1> tags (the selector) red in color (the declaration) looks like the following:

    h1  {color : red}
    

    In the following sections, you see the various characteristics of CSS - grouping, inheritance, and cascading - working together to give style sheets their flexibility and power.

    Grouping properties

    A Web designer often needs to change several style properties at once. CSS enables declarations to be grouped by separating them with semicolons. For example:

    h1  color:red; font-family:Arial,Helvetica,sans-serif; font-size:1 pt}
    

    The Dreamweaver interface provides a wide range of options for styles. Should you ever need to look at the code, youíll find that Dreamweaver groups your selections exactly as shown in the preceding example. Although Dreamweaver keeps each selector in its own rule, when you are hand-coding your style sheets, you can group selectors as well as declarations. Separate grouped selectors with commas, rather than semicolons. For example:

    h1, h2, p, em  color:green; text-align:left}
    

    Inheritance of properties

    CSS rules can also be applied to more than one tag through inheritance. Most, but not all, CSS declarations can be inherited by the HTML tags enclosed within the CSS selector. Suppose you set all <p> tags to the color red. Any tags included within a <p>...</p> tag pair then inherit that property and are also colored red.

    Inheritance is also at work within HTML tags that involve a parent-child relation-ship, as with a list. Whether numbered (ordered, <ol>) or bulleted (unordered, <ul>), a list comprises any number of list items, designated by <li> tags. Each list item is considered a child of the parent tag, <ol> or <ul>. Take a look at the following example:

    ol  color:red}
    ul  color:blue}
    

    With the preceding example, all ordered list items appear in red, whereas all unordered list items appear in blue. One major benefit to this parent-child relationship is that you can change the font for an entire page with one CSS rule. The following statement accomplishes this change:

    body  font-family: Arial}
    

    The change is possible in the previous example because the <body> tag is considered the parent of every HTML element on a page.

    Thereís one exception to the preceding rule: tables. Netscape browsers (through version 4.5) treats tables differently than the rest of the HTML <body> when it comes to style sheets. To change the font of a table, youíd have to specify something like the following:

    td  {font-family: Arial}
    

    Because every cell in a table uses the <td> tag, this style sheet declaration affects the entire table. Dreamweaver 3 is uneven in its application of this treatment. Setting the entire <body> to a particular font family is displayed correctly in the Document window, with even tables being affected. However, changing the color of a font in the <body> style sheet declaration does not alter the font color of text in a table in the Document window.

    Cascading characteristics

    The term cascading describes the capability of a local style to override a general style. Think of a stream flowing down a mountain; each ledge encountered by the stream has the potential to change its direction. The last ledge determines the final direction of the stream. In the same manner, one CSS rule applying generally to a block of text can be overridden by another rule applied to a more specific part of the same text.

    For example, letís say youíve defined, using style sheets, all normal paragraphs - <p> tags - as a particular font in a standard color, but you mark one section of the text using a little-used tag such as <samp>. If you make a CSS rule altering both the font and color of the <samp> tag, the section takes on the characteristics of that rule.

    The cascading aspect of style sheets also works on a larger scale. One of the key features of CSS is the capability to define external style sheets that can be linked to individual Web pages, acting on their overall look and feel. Indeed, you can use the cascading behavior to fine-tune the overall Web site style based on a particular page or range of pages. Your company may, for instance, define an external style sheet for the entire company intranet, and each division could then build upon that overall model for its individual Web pages. For example, letís say that the company style sheet dictates that all <h2> headings are in Arial and black. One department could output their Web pages with <h2> tags in Arial, but colored red rather than black, while another department could make them blue.

    Defining new classes for extended design control

    Redefining existing HTML tags is a step in the right direction toward consistent design, but the real power of CSS comes into play when you define custom tags. In CSS-speak, a custom tag is called a class, and the selector name always begins with a period. Hereís a simple example: To style all copyright notices at the bottom of all pages of a Web site to display in 8-point Helvetica all caps, you could define a tag like this:

    .cnote { font-family:Helvetica; font-size: pt; font-transform:uppercase}
    

    If you define this style in an external style sheet and apply it to all 999 pages of your Web site, you have to alter only one line of code (instead of all 999 pages) when the edict comes down from management to make all the copyright notices a touch larger. Once a new class has been defined, you can apply it to any range of text, from one word to an entire page.

    How styles are applied

    CSS applies style formatting to your page in one of three ways:

    • Via an internal style sheet
    • Via an external, linked style sheet
    • Via embedded style rules

    Internal style sheets

    An internal style sheet is a list of all the CSS styles for a page.

    Dreamweaver inserts all the style sheets at the top of a Web page within a <style>...</style> tag pair. Placing style sheets within the header tags has become a convention that many designers use, although you can also apply a style sheet anywhere on a page.

    The <style> tag for a Cascading Style Sheet identifies the type attribute as text/css. A sample internal style sheet looks like the following:

    <style type="text/css">
    <!--
    p {   font-family: "Arial, Helvetica, sans-serif"; color: #000000}
    .cnote    {font: 8pt "Arial, Helvetica, sans-serif"; text-transform: uppercase}
    h1  {  font: bold 1 pt Arial, Helvetica, sans-serif; color: #FF0000}
    -->
    </style>
    

    The HTML comment tags <!-- and --> prevent older browsers that canít read style sheets from displaying the CSS rules.

    External style sheets

    An external style sheet is a file containing the CSS rules; it links one or more Web pages. One benefit of linking to an external style sheet is that you can customize and change the appearance of a Web site quickly and easily from one file.

    Two different methods exist for working with an external style sheet: the link method and the import method. Dreamweaver enables you to choose your preferred method.

    For the link method, a line of code is added outside of the <style> tags, as follows:

    <link rel="stylesheet" href="mainstyle.css">
    

    The import method writes code within the style tags, as follows:

    <style type="text/css">
    @import "newstyles.css";
    </style>
    

    Between the link and the import methods, the link method is better supported among browsers.

    Editing External Style Sheets

    The process for editing an external style sheet is virtually identical to that for editing an embedded one, as described earlier in the "Editing Style Sheets" section. The sole difference is one intermediary step.

    When you click the Edit button after selecting the style sheetís name from the Edit style sheet dialog box youíll find yourself looking at yet another Edit style sheet dialog box overlaying the first one. This new one will have the name of the style sheet at the top. You use it in the same way as the normal one; however, the styles you create and modify in it are just the ones that are found within this particular external style sheet.

    When youíre finished editing your external style sheet, click the Save button. Dreamweaver returns you to the regular Edit Style Sheet Dialog box.

    Embedded rules

    The final method of applying a style inserts it within HTML tags using the style attribute. This method is the most ďlocalĒ of all the techniques; that is, it is closest to the tag it is affecting and therefore has the ultimate control óbecause of the cascading nature of style sheets as previously discussed.

    When you create a layer within Dreamweaver, you notice that the positioning attribute is a Cascading Style Sheet embedded within a <div> tag like the following:

    <div id="Layer1" style="position:absolute; visibility:inherit; left:314px;
    top:62px; width:194px; height:12 px; z-index:1">
    </div>
    

    For all its apparent complexity, the Cascading Style Sheets system becomes straightforward in Dreamweaver. You often wonít have to write a single line of code. But even if you donít have to write code, you should understand the CSS fundamentals of grouping, inheritance, and cascading.

    Applying Style Sheets to Multiple Pages

    A main advantage of using an external style sheet is that it can be applied to multiple pages across a site. Also, you can reuse an external style sheet for a separate page without needing to manually redo all the settings.

    Dreamweaver offers options for importing and for linking external style sheets. The Import option actually embeds the CSS file as a part of HTML document. This is not the preferred way of doing things. Instead, you should use the Link option, which leaves the external file outside and uses its settings for the Web pages itís linked to. When the external style sheet is linked, any changes to that external CSS file will be made automatically to every Web page that is linked to it.

    The procedures for both creating an external style sheet and linking to an existing CSS file are identical.

    1. In the CSS styles palette, click the Open style sheet button.
    2. In the Edit style sheet dialog box, click the Link button.
    3. In the Link External style sheet dialog box, select either the Link or the Import radio button.
    4. Enter the location and filename of an existing CSS file or click the Browse button to locate it. If you type the filename, you must include the .css extension. If you enter the name of a nonexistent CSS file here, it will be created.
    5. Click OK.

    The style sheet is added to the listing in the Edit style sheet dialog box.

    Dreamweaver uses three primary tools to implement Cascading Style Sheets: the CSS Styles palette, the Edit Style Sheet dialog box, and the Style Definition dialog box. Specifically, the CSS Styles palette is used to apply styles created in the Edit Style Sheet dialog box and specified with the Style Definition dialog box. With these three interfaces, you can accomplish the following:

    • Apply styles to selected text or to a particular tag surrounding that text
    • View and edit many of the attributes included in the official release ofCSS Level 1
    • Modify any styles you have created
    • Link or import all your styles from an external style sheet

    The fourth-generation browsers (and above) support many of the attributes from the first draft of the Cascading Style Sheets standard. Neither Netscape Navigator 4.0 nor Microsoft Internet Explorer 4.0 fully supports CSS Level 1, however. Of the earlier browsers, only Internet Explorer 3.0 supports a limited set of the CSS Level 1 features: font attributes, indents, and color. However, this support is rendered differently in Internet Explorer 3.0 and 4.0. Netscape Navigator 3.0 does not sup-port any of the features of CSS Level 1. On the brighter side, trials of Netscape Navigator 6.0 (unreleased at the time of this writing) show an almost complete compliance of CSS 1 and quite a lot of CSS 2. Internet Explorer version 5 is not as complete, but better than the 4.x versions.

    Eliminating underlines from links

    Because Dreamweaverís interface for CSS has so many controls, initially creating and applying a style can be a little confusing. Before delving into the details of the various palettes, dialog boxes, and floating windows, letís quickly step through a typical style sheet session. Then you can have an overall understanding of how all the pieces fit together.

    Disabling the underline for the anchor tag, <a>, which is normally associated with hyperlinked text, is one modification commonly included in style sheets.

    To accomplish this task, follow these steps:

    1. Open the CSS Styles palette by choosing Windows _CSS Styles or selecting the Show CSS Styles button from either Launcher.
    2. In the CSS Styles palette, select the New Style button. This sequence opens the New Styles dialog box.
    3. In the New Styles dialog box, select Redefine HTML Tag and choose the anchor tag, a, from the drop-down list. Click OK, and the Style Definition window opens.

      You can also select the Use CSS Selector option and choose a:link from the drop-down list. You can even employ the a:hover style, which allows text to change color or style on rollover. You must, however, define the four CSS Selector styles in a particular order for them to work correctly. Start by defining the a:link class and then proceed to define a:visited, a:active, and a:hover, in that order. Note that theses altered styles do not preview in Dreamweaver.

    4. In the Style Definition window, make sure that the correct pane is displayed by selecting Type from the list of categories.
    5. In the Decoration section of the Type pane, select the none option. You can also make any other modifications to the anchor tag style, such as colour or font size. Click OK when youíre done.

    Many designers like to make the link apparent by styling it bold and in a different colour.

    The Style Definition window closes, and any style changes instantly take effect on your page. If you have any previously defined links, the underline disappears from them.

    Now, any links that you insert on your page still function as links - the userís pointer still changes into a pointing hand, and the links are active - but no underline appears.

    This technique works for any text used as a link. To eliminate the border around an image designated as a link, the imageís border must be set to zero in the Property Inspector. Dreamweaver handles this automatically when a graphic is made into a link.


    DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware.

    More Web Development Articles
    More By Developer Shed

       

    WEB DEVELOPMENT ARTICLES

    - On Page SEO for New Domains
    - Improve Your Site`s Speed
    - Safari Books Online Review
    - Creating an Estore From the Ground Up
    - Most Common SEO Mistakes Developers Make
    - Making the Most of Your Titles and Meta Desc...
    - Five Ways Using Flash Can Damage Your Site
    - A Web Designer`s Guide to Colors
    - Use Webstarts to Create a Free Site
    - More Than Just Looks. How Your Web Design C...
    - How to Design Content Pages
    - Mint Review
    - Make Your WordPress Website Look Professional
    - How to Create a Mobile Web Site
    - Meta Tags: Still Useful?

    Developer Shed Affiliates

     



    © 2003-2018 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap