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

Microsoft Expression Web 3 – Illustrated

Unit D: Structuring and Styling Text

Objectives

Structure content with HTMLCreate paragraphs and line breaksCreate headingsCreate listsUnderstand Cascading Style Sheets

Expression Web 3 - Illustrated 2

Objectives (continued)

Create an element-based style ruleModify a style ruleCreate a class-based style ruleApply and remove a class-based style rule


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.


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.


Structuring Content with HTML (continued)


Creating Paragraphs and Line Breaks

Paragraphs and line breaks are the most basic structural elements for text.<p> tag is used to denote a paragraph element.<br /> 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.


Creating Headings

The Style list box provides a list of common structural elements, applies HTML tags, not CSS.


Creating Headings (continued)

HTML has six levels of headings <h1> is very large and bold. <h2> is for subheadings. <h6> 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.


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.


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.


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.


Understanding Cascading Style Sheets (continued)

Property – describes what to change.Value – indicates how to change the property.



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.






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.


Creating an Element-Based Style Rule (continued)


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.


Modifying a Style Rule (continued)

For browser compatibility limit font families to first three options.<body> tag surrounds all page content.


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.


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.


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.


Applying and Removing a Class-Based Style Rule (continued)

An asterisk on a tab indicates that a change has been made to that page.


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.


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.


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.


Documents

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