1. Microsoft Expression Web 3 – Illustrated Unit D: Structuring and Styling Text

2. Objectives Structure content with HTML Create paragraphs and line breaks Create headings Create lists Understand Cascading Style Sheets Expression Web 3 - Illustrated 2

3. Objectives (continued) Create an element-based style rule Modify a style rule Create a class-based style rule Apply and remove a class-based style rule Expression Web 3 - Illustrated 3

4. Structuring Content with HTML Use appropriate HTML  More flexibility.  Fewer hassles when updating.  Easier to create and apply CSS styles. HTML tags  Text enclosed in angle brackets.  Identifies each piece of Web page content.  Surrounds the content they define with an opening tag and a closing tag. Expression Web 3 - Illustrated 4

5. Structuring Content with HTML (continued) Element – combination of an opening tag, content, and a closing tag. Attributes – describes properties of an element. Markup – the use of tags to describe the structure of a document. Semantic markup – using HTML tags to mark up elements in a meaningful and descriptive way. Expression Web 3 - Illustrated 5

6. Structuring Content with HTML (continued) Expression Web 3 - Illustrated 6

7. Creating Paragraphs and Line Breaks Paragraphs and line breaks are the most basic structural elements for text. tag is used to denote a paragraph element. element is used to create a new line of text within an existing paragraph. Text within a paragraph element wraps automatically. [Shift] [Enter] creates a line break in code, but not a line break in the page. Expression Web 3 - Illustrated 7

8. Creating Headings The Style list box provides a list of common structural elements, applies HTML tags, not CSS. Expression Web 3 - Illustrated 8

9. Creating Headings (continued) HTML has six levels of headings  is very large and bold.  is for subheadings.  is the smallest and least significant. CSS overrides default HTML tag style. Visual hierarchy – varying the size of text elements in relationship to their importance. XHTML – Extensible HyperText Markup Language is a newer version of HTML. Expression Web 3 - Illustrated 9

10. Creating Lists Three types of list elements  Ordered list – appear numbered by default.  Unordered list – appear with bullets by default.  Definition list – used to list terms/definitions. Expression Web 3 - Illustrated 10

11. Creating Lists (continued) CSS can control how lists appear  Remove bullets or numbers.  Make list items appear side by side.  Add background colors and borders. Browser defaults – built-in styles to decide how to display HTML elements. Expression Web 3 - Illustrated 11

12. Understanding Cascading Style Sheets Style rule – describes how a particular element or piece of content should be displayed. Style rules have two parts  Selector – tells the browser what the style should apply to.  Three types of selectors IDs, elements, and classes  Declaration – describes what properties you want to change and how you want to change them. Expression Web 3 - Illustrated 12

13. Understanding Cascading Style Sheets (continued) Property – describes what to change. Value – indicates how to change the property. Expression Web 3 - Illustrated 13

14. Understanding Cascading Style Sheets (continued) Three options for style sheets  External style sheet – separate file with a.css extension; styles can be used on any page of the site.  Internal style sheet – create rules directly within the HTML file; styles can only be used in that page.  Inline styles – placed directly around content; similar to HTML tags; cannot be reused, even in the same page. Expression Web 3 - Illustrated 14

15. Understanding Cascading Style Sheets (continued) Expression Web 3 - Illustrated 15

16. Understanding Cascading Style Sheets (continued) Expression Web 3 - Illustrated 16

17. Creating an Element-Based Style Rule Element-based style rule – uses an element selector to redefine the look of an HTML element. When defining a new style  The selector list displays all HTML elements so you can choose one to create a new style rule.  The define list lets you choose to define the style rule in an internal or external style sheet. Expression Web 3 - Illustrated 17

18. Creating an Element-Based Style Rule (continued) Expression Web 3 - Illustrated 18

19. Modifying a Style Rule Inheritance – a style applied to an element on a page is also applied to any elements it contains. Pixel (px) – the basic unit of measurement for anything displayed on a computer screen. Default text setting in browsers is 16 px. Hex value (hexadecimal) – sequence of six numbers/letters used to define a specific color. Expression Web 3 - Illustrated 19

20. Modifying a Style Rule (continued) For browser compatibility limit font families to first three options. tag surrounds all page content. Expression Web 3 - Illustrated 20

21. Creating a Class-Based Style Rule Class-based rule – uses a class selector and can be applied to a single instance of an element or only part of an element. Period in front of name is required, indicates it is a class-based rule. Do not use a number as first character. Avoid spaces. Choose class names based on meaning, not appearance. Expression Web 3 - Illustrated 21

22. Creating a Class-Based Style Rule (continued) Cascade – style rules applied in a particular order.  Used when two or more rules could apply to an element.  Inline styles take precedence over internal styles.  Internal styles take precedence over external styles.  External styles take precedence over browser default styles. Expression Web 3 - Illustrated 22

23. Applying and Removing a Class- Based Style Rule HTML and CSS must work together. Style rule must be connected to an HTML tag as an attribute. Two ways to apply a class-based style.  Select an element in Design view and apply the class to the existing element.  Select content that is part of an element and apply the style to the selected text. Expression Web 3 - Illustrated 23

24. Applying and Removing a Class- Based Style Rule (continued) An asterisk on a tab indicates that a change has been made to that page. Expression Web 3 - Illustrated 24

25. Applying and Removing a Class- Based Style Rule (continued) Consider using multiple style sheets.  One to determine how a Web page will look when printed.  One to serve up different designs to visitors using handheld devices.  One to display site in a different layout or color scheme.  One to increase the text size. Expression Web 3 - Illustrated 25

26. Summary Structuring your HTML documents is the key to a reliable, well-built Web site. All content on a Web page should be contained in an element so that it can be controlled using CSS. Paragraphs and line breaks are the most basic structural elements for text. HTML has six levels of headings. HTML has three list elements: ordered list, unordered list, definition list. Expression Web 3 - Illustrated 26

27. Summary (continued) CSS can control almost every aspect of your site’s visual design. By default, styles are organized according to where they reside. Style rules can be easily modified. With element-based rules elements appear the same on every page. Multiple style sheets can be used on your site. Expression Web 3 - Illustrated 27