tutorial 5 formatting with css. objectives session 5.1 – evaluate why css styles are used –...

Tutorial 5

Formatting with CSS

New Perspectives on Microsoft Expression Web 3.0 2

Objectives

• Session 5.1– Evaluate why CSS styles are used– Determine where to write styles– Create an element selector style– Implement the font properties on a Web page

• Session 5.2– Create a style based on element, class, and ID

selectors– Apply and modify styles


Objectives

– Create an external style sheet– Attach a CSS style sheet to an HTML file– Run a CSS report


Visual OverviewThe New Style Dialog Box


Introducing Cascading Style Sheets

• HTML– Computer language used to create Web pages

• CSS– Computer language used to describe the

presentation of Web pages• Colors• Fonts


Introducing Cascading Style Sheets

• Recognizing the Importance of CSS– Used to separate content from formatting– Greater consistency in your Web site– Easily modified code– More flexible formatting– Greater functionality– Does not have cross-browser support


Understanding How Styles Are Written

• CSS Styles– Description of how to present Web page content– XHTML strong element renders text in bold• CSS style for the strong element could set its

color, font, size, etc.– Three parts:• Selector– Identifies the element, class, or ID to which

the style is being applied


Understanding HowStyles are Written

• Property–Specifies how the selector will be changed

• Value– Indicates the manner or extent to which the

selector is modified

h1{color:blue;

}

All h1 text would appear in blue


Determining Where to Write Styles

• Style Sheet– A collection of styles

• Internal Style Sheet– HTML code and CSS code are in the same HTML

file• External Style Sheet– A separate file containing only the CSS code



• Creating External Styles– Can format as many pages as desired– Preferred method for writing CSS code– CSS comment• Precedes the style sheet code• Provides documentation – author, date created

or modified

/* This is a CSS Comment */



– Only CSS code is contained in a CSS external style sheet

– Style sheet must be saved using the .css extension• Filename cannot contain spaces • Filename cannot begin with a number

– HTML link element is used to attach a CSS style sheet to an HTML file• Expression Web creates the <link> tag code



• Using Internal Styles– Written in the <head> section of XHTML file– Referred to as embedded styles– Used only in document in which they are written– Expression Web creates most styles as internal

styles using the start<style> and end </style> tags– Can be moved to an external style sheet when

page is finalized



• Using Inline Styles– Written within a tag in the <body> section of

XHTML document– Formats just a section of text– Similar to using direct formatting– Use sparingly• Must be manually revised• Cannot be named• Cannot be moved from one document to

another



• Creating Structure and Styles with the Common Toolbar– Not all icons on the Common toolbar create styles– Main purpose of the Common toolbar is to create

structure on the Web page by creating HTML code• Some HTML elements do create formatting

along with structure



– When a style is created, an icon will appear to the left of the style name in the Apply Styles panel



– These panel icons are different colors and indicate what type of style is in use


Creating a Style Usingan Element as a Selector

• Element Selectors– Format HTML elements such as p, h1, and em– Simplest of all HTML selectors– HTML elements have inherent characteristics• Creating a style for inherent characteristics is

not necessary, i.e., bold or a particular font size– Also known as type selectors


Creating a Style Usingan Element as a Selector

• Class Selectors– Used to select a specific HTML element or format

one or more elements on a Web page• ID Selectors– Used to uniquely format a single element on a

Web page


Using the Font Properties

• Font Properties are used to change the appearance of text– CSS Font Properties:• Font-family• Font-size• Font-style• Font-weight• Font-variant• Font



• Creating a Font Family – Font-family property • Identifies font currently in use• Expression Web has three predefined font

families• You can design your own font family• Generic XHTML fonts: Serif, sans serif,

monospace, cursive, fantasy



• Creating a Font Family– The font-family property identifies the current font

being used– Expression Web has several pre-defined font families:• serif• sans-serif• Fantasy• Cursive• monospace

– You can create your own


Using Font Properties



• Changing the Text Size– Can change text size without making the text a

heading– Use just one h1 heading on a Web page• Use it to format banner text or headline text

only– Values for font size• Keywords• Percentages



• Em values–Equal to default font size, usually 12 pt; 2em

= 24 pt font



• Changing the Font Weight– Font-weight property makes text bold• Common values are bold and normal (not bold)• Keywords “lighter” and “bolder” are not

generally supported• Values ranging from 100 to 900 can also be

used



• Making Text Italic– Use font-style property• Italic – slants text• Oblique – slants text more than italic; generally

not supported• Normal – removes italics from text that

normally appears in italics



• Working with Text Capitalization– Font-variant property• Displays text in small caps but slightly smaller

than normal text– Text-transform is a CSS text property• Capitalize None• Lowercase Inherit• Uppercase



• Working with Color– Sets text (foreground) color– Part of the Font category– Choose from 16 Web safe colors or from colors on

the Color Palette icon– Represented in HTML code by named color or

hexadecimal value– Expression Web displays hexadecimal value only



• Creating Text Decoration– Determines if a line should appear “over,” “under,”

or “through” text– Values• Underline (not recommended)• Overline• Line-through• Blink (not recommended)• None



– Style ScreenTip• Popup screen that reveals the style code• View by hovering pointer over a style name in

Apply Styles panel


Visual OverviewCreating CSS Reports


Using Class Selectors

• Define the appearance of an element in multiple ways

• Dependent class– Styles only one element, ex., <p>• Element name• Class name

• Independent Class– Styles any XHTML element– Does not use an element name

p.double

.essential



Dependent Class Independent Class

p.italic { .vital {font-style: italic; color: red;

} font-style: italic;p.double { }

line-height: 2.0;font-weight: bold;

}

Element Class Name Class Name



• Applying Classes– Two step process• Create the class• Apply the class where it you want it to appear

in the document–Select desired text– In the Apply Styles or Manage Styles panel,

right click the style–On shortcut menu, click Apply Style



• Creating an Independent Class Selector



• Creating an ID Selector– Very similar to independent classes– Styles any XHTML element– Styles the element only once on the Web page– Most often used with the XHTML <div> element– User names the ID selector – Selector is preceded by a # • # is a flag character; signals a special instruction



• Modifying and Applying an Existing Style– In Apply Styles panel, right click desired style– Click Modify style– Make desired changes– Click OK– Save the file


Using External Styles

• External Styles– Are the most powerful of all styles– Format multiple documents at the same time– Separate format from content– Contain only CSS code– Begin each external style sheet with a CSS

comment:– Attach style sheet to Web page

/* External Style Sheet created by [name] */



• Detaching and Attaching an External Style Sheet– Open desired Web page– Use the Apply Styles or Manage Styles panel to

open the Attach Style Sheet dialog box• Options for Attach to–All HTML pages–Selected pages–Current page



• Options for Attach–Link option enters code for the <link> tag in

the <head> section of the Web page– Import option inserts an @ import code

instead of link code


Managing Styles

• Can customize how to view and group styles• Apply Styles panel– Previews background color– Automatically previews the appearance of styles

• Manage Styles panel– Categorizes styles by element


Managing Styles


Managing Styles

• Running CSS Reports– CSS Reports feature checks for errors in CSS code

in Web pages and external style sheets– CSS Reports feature will also find• Unused styles• Undefined classes• Mismatched cases


Managing Styles

tutorial 5 formatting with css. objectives session 5.1 – evaluate why css styles are used –...

Documents