Working with Text and Cascading Style Sheets - PowerPoint PPT Presentation

working with text and cascading style sheets n.
Download
Skip this Video
Loading SlideShow in 5 Seconds..
Working with Text and Cascading Style Sheets PowerPoint Presentation
Download Presentation
Working with Text and Cascading Style Sheets

play fullscreen
1 / 22
Working with Text and Cascading Style Sheets
253 Views
Download Presentation
brant
Download Presentation

Working with Text and Cascading Style Sheets

- - - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript

  1. Working with Text and Cascading Style Sheets Chapter 3

  2. Using Cascading Style Sheets • Cascading Style Sheets (CSS) • Sets of formatting instructions, usually stored in a separate file, that control the appearance and position of text and graphics on a web page or throughout a website. • Defines consistent formatting attributes for page elements such as paragraph text, lists, and table data.

  3. Using Cascading Style Sheets • Formatting Text as Lists • Excellent for creating simple navigation bars • Format list items to look like buttons by applying styles and background colors • Unordered • Ordered • Definition

  4. Using Cascading Style Sheets • Creating Unordered Lists • List items that do not need to appear in a specific sequence • Preceded by a bullet • Small dot or similar icon • Often called a bulleted list • Select text you want to format as a list • Use the Unordered List button in the HTML Property Inspector to insert bullets

  5. Using Cascading Style Sheets • Formatting Unordered Lists • The default bullet style is round dot • Change using CSS • Create a rule to modify

  6. Using Cascading Style Sheets • Creating Ordered Lists • Lists of items that are presented in a specific sequence and are preceded by a sequential number or letter. • Often called a numbered list

  7. Using Cascading Style Sheets • Formatting Ordered Lists • You can format to show different styles of numbers or letters by usingCSS

  8. Using Cascading Style Sheets • Creating Definition Lists • Similar to unordered lists, but have a hanging indent and are not preceded by a bullet. • To create: • Select text you want to use for the list • Click Format on the Menu bar • Point to List • Click Definition List

  9. Lesson 1 Practice Complete pages DreamWeaver 3-6 thru 3-9

  10. Create, Apply and Edit CSS • Understanding CSS • Made up of sets of formatting attributes called rules • Define the formatting attributes for page content • Sometimes referred to as styles • Classified by where the code is stored • External style sheet • Separate file • Internal (embedded) style • Part of the head content of an individual page • Inline style • Part of the body of the HTML code

  11. Create, Apply and Edit CSS • Understanding CSS • Also classified by type • Class type • Used to format any page element • ID type/Tag type • Used to redefine an HTML tag • Compound type • Used to format a selection

  12. Create, Apply and Edit CSS • Using the CSS Styles Panel • Use buttons on the CSS Styles panel to create, edit, and apply rules. • To add a rule, use the New CSS Rule dialog box to name the rule • Use the CSS Rule definition dialog box to set the formatting attributes for the rule

  13. Create, Apply and Edit CSS • Understanding the Advantages of Using Style Sheets • Use to save an enormous amount of time • Make hundreds of formatting changes in a few minutes • Create a more uniform look from page to page • Generate cleaner code • Separates the development of content from the way the content is presented

  14. Create, Apply and Edit CSS • Understanding CSS Code • 2 parts • Selector • Name of the tag to which the style declarations have been assigned • Declaration • Property (font size and font weight) and a value (14 px or bold)

  15. Lesson 2 Practice Complete pages DreamWeaver 3-12 thru 3-19

  16. Add Rules and Attach CSS • Understanding External and Embedded Style Sheets • External CSS file are created by the web designer • Embedded style sheets are created automatically in Dreamweaver if the designer does not create them

  17. Add Rules and Attach CSS • Understanding Related Page Files • Related Files • An HTML file that is linked to other files necessary to display page content • When a file that has related files is open in the Document window, each related file name is displayed in the Related Files toolbar above the Document window. • CSS is an example of a related file

  18. Lesson 3 Practice Complete pages DreamWeaver 3-22 thru 3-25

  19. Use Coding Tools to View and Edit Rules • Coding Tools in DreamWeaver • Coding toolbar appears when in Code view on the left side of the Document window • Using Coding Tools to Navigate Code • Helpful to collapse code • Temporarily hide code between two different sections • Click minus sign next to the line number

  20. Use Coding Tools to View and Edit Rules • Using Code Hints to Streamline Coding • Code Hints • Lists of tags that appear you type • Converting Styles • Able to move an embedded style to an external style • Select the style in Code View • Right-click the code • Point to CSS style, then click Move CSS Rules

  21. Lesson 4 Practice Complete pages DreamWeaver 3-28 thru 3-31

  22. Skills Review Complete pages DreamWeaver 3-32 thru 3-33