1 / 22

Working with Text and Cascading Style Sheets

Working with Text and Cascading Style Sheets. Chapter 3. 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.

brant
Download Presentation

Working with Text and Cascading Style Sheets

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

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

More Related