Creating CSS Styles In Adobe Dreamweaver CS4
Cascading Styles Sheets (CSS) are a recommendation of the Worldwide Web Consortium (W3C) and offer web designers precise control over the formatting and layout of web pages. They enable you to set up default formatting rules which the browser will automatically apply to headings, paragraphs and any other elements on a web page. CSS allows web developers to separate the content of their web pages from the style and formatting information. This means that the HTML code is not cluttered with style information and will be processed more quickly by browsers, leading to faster download times. Also, since style definitions are normally stored in external files to which all HTML pages are linked, the entire site can be updated by modifying the CSS file(s), without even having to open any of the HTML pages.
CSS can be implemented in three different ways. Firstly, it can be placed inside an HTML document, in the HEAD area of the page. Secondly, CSS can be placed in an external file with a “.css” file extension. Thirdly, CSS can be placed inline; that is to say, inside HTML tags. The three methods are not mutually exclusive. A typical website may have one or more external style sheets, combined with internal CSS on certain pages and a few smatterings of inline CSS within certain HTML pages. In general, the closer the CSS is to the HTML element it controls, the higher its precedence. Thus inline styles normally take precedence over internal CSS, which, in turn, takes precedence over external CSS definitions.
Adobe Dreamweaver CS4 offers a number of sophisticated features for creating and editing CSS. To create internal CSS rules in Dreamweaver, simply open the HTML page then display the CSS Styles panel by choosing CSS Styles from the Window menu. Next, choose New from the CSS Styles panel menu. At the bottom of the New CSS Rule dialog, Dreamweaver invites you to “Choose where your rule will be defined”. Choose “This document only” from the drop down menu. If, instead, you choose “Create New Style Sheet”, the new CSS rule will be placed in an external file. (Dreamweaver will allow you to specify where the file is placed.) If you would like to link an existing CSS file to an HTML page, choose “Attach Style Sheet” from the CSS Styles panel menu and click on the Browse button; locate the file then click “OK”.
Once a CSS source, whether internal or external, is associated with a given HTML file, Adobe Dreamweaver CS4 will display the name of the CSS document in the CSS Styles panel whenever the HTML file is open. If the CSS is being stored internally, the rules will be grouped under the heading “style”, indicating that it has been defined within a style element in the HEAD area of the current page.
Author conducts training courses for an independent computer training company offering Dreamweaver and Adobe Flash CS4 courses in London and all over the United Kingdom.