1 © Netskills Quality Internet Training, University of Newcastle Using Style Sheets in Dreamweaver CS © Netskills, Quality Internet Training, University of Newcastle Netskills is a trademark of Netskills, University of Newcastle. Partly funded by the

2 © Netskills Quality Internet Training, University of Newcastle Topics HTML formatting Why CSS? Style Rules Working with CSS using Dreamweaver Internal and external styles Classes Page Divisions Page Layout

3 © Netskills Quality Internet Training, University of Newcastle Visual Formatting in HTML HTML can be used for visual formatting e.g. Hello Problems: HTML intended for structuring content Formatting information mixed up with structural information Editing pages is difficult and time-consuming Inconsistent display in browsers Proprietary tags e.g. or Formatting tags misused or cause pages to fail Can cause an accessibility problem Correct way to format pages uses CSS Cascading Style Sheets Hello Browser displays green text

4 © Netskills Quality Internet Training, University of Newcastle Why CSS? Formatting instructions (CSS) separated from document structure (HTML) CSS offers far richer style control than HTML Browsers that do not support CSS can still use the page Efficient and easy style management Faster download times Dreamweaver effectively handles CSS

5 © Netskills Quality Internet Training, University of Newcastle CSS Style Rules Style sheets specify formatting rules Rules consist of selectors and declarations Using a tag name applies a style rule to all instances of a tag in the page Selector identifies an HTML tag p {background-color: blue; color: white;} Style declarations for the … tag This paragraph should have white text on a blue background Result when viewed in web browser

6 © Netskills Quality Internet Training, University of Newcastle Working with Style Rules in DW CS Dreamweaver handles management and display of CSS Graphical interface for creating and editing style rules Design panel > CSS styles tab Attach Style Sheet Edit Style Sheet… style rules New CSS Rule Delete CSS Style

7 © Netskills Quality Internet Training, University of Newcastle CSS Style Rule Window Allows style declarations to be specified, edited and removed DW automatically writes the CSS code Options grouped in categories Use Apply button to preview changes if working in Design View

8 © Netskills Quality Internet Training, University of Newcastle Where to Put Styles Internal In tag within of page Controls style for one page External Link pages to a separate text file (.css) Controls style for all linked pages Best for management and download times External Internal

9 © Netskills Quality Internet Training, University of Newcastle Classes Used to apply styles to sub-sets of HTML tags Assign an HTML tag to a class with a class attribute Create a style rule using the class name as selector Classes can be assigned to any tag in a page and can be used multiple times on a page A different class of paragraph This is a normal paragraph Specify class as selector

10 © Netskills Quality Internet Training, University of Newcastle Page Divisions tag used to create sections in a page e.g. for navigation, content, footer, header… etc. Provides a framework for CSS Have no inherent style Very important for layout Can have class or ID attributes Create a style rule using the class or ID name as selector IDs should be unique in a page Insert Div Tag

11 © Netskills Quality Internet Training, University of Newcastle Page Layout Simplest method is to create page divisions and use CSS to specify: Content width Margin Padding Border Apply settings for each side: Top Right Bottom Left Easy using Dreamweaver! Style Definition window

12 © Netskills Quality Internet Training, University of Newcastle Summary Separate structure from style Use HTML for structure only Use CSS for presentation Define CSS styles using style rules For HTML tags, Classes and IDs External style sheets are very versatile Dreamweaver effectively handles management of CSS Enables easy update and manipulation of page style