Tutorial 5 Formatting with CSS

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 2New Perspectives on Microsoft Expression Web 3.0

Objectives – Create an external style sheet – Attach a CSS style sheet to an HTML file – Run a CSS report New Perspectives on Microsoft Expression Web 3.03

Visual Overview The New Style Dialog Box New Perspectives on Microsoft Expression Web 3.04

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 New Perspectives on Microsoft Expression Web 3.05

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 New Perspectives on Microsoft Expression Web 3.06

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 New Perspectives on Microsoft Expression Web 3.07

Understanding How Styles 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; } New Perspectives on Microsoft Expression Web 3.08 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 New Perspectives on Microsoft Expression Web 3.09

Determining Where to Write Styles 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 */ New Perspectives on Microsoft Expression Web 3.010

Determining Where to Write Styles – 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 tag code New Perspectives on Microsoft Expression Web 3.011

Determining Where to Write Styles Using Internal Styles – Written in the 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 and end tags – Can be moved to an external style sheet when page is finalized New Perspectives on Microsoft Expression Web 3.012

Determining Where to Write Styles Using Inline Styles – Written within a tag in the 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 New Perspectives on Microsoft Expression Web 3.013

Determining Where to Write Styles New Perspectives on Microsoft Expression Web 3.014

Determining Where to Write Styles 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 New Perspectives on Microsoft Expression Web 3.015

Determining Where to Write Styles New Perspectives on Microsoft Expression Web 3.016

Determining Where to Write Styles – When a style is created, an icon will appear to the left of the style name in the Apply Styles panel New Perspectives on Microsoft Expression Web 3.017

Determining Where to Write Styles New Perspectives on Microsoft Expression Web – These panel icons are different colors and indicate what type of style is in use

Creating a Style Using an 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 New Perspectives on Microsoft Expression Web 3.019

Creating a Style Using an 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 New Perspectives on Microsoft Expression Web 3.020

Using the Font Properties New Perspectives on Microsoft Expression Web Font Properties are used to change the appearance of text – CSS Font Properties: Font-family Font-size Font-style Font-weight Font-variant Font

Using the Font Properties 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 New Perspectives on Microsoft Expression Web 3.022

Using the Font Properties New Perspectives on Microsoft Expression Web 3.023

Using the Font Properties 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 New Perspectives on Microsoft Expression Web 3.024

Using Font Properties New Perspectives on Microsoft Expression Web 3.025

Using Font Properties New Perspectives on Microsoft Expression Web 3.026

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 New Perspectives on Microsoft Expression Web 3.027

Using Font Properties Em values – Equal to default font size, usually 12 pt; 2em = 24 pt font New Perspectives on Microsoft Expression Web 3.028

Using Font Properties New Perspectives on Microsoft Expression Web 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

Using Font Properties 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 New Perspectives on Microsoft Expression Web 3.030

Using Font Properties 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 New Perspectives on Microsoft Expression Web 3.031

Using Font Properties New Perspectives on Microsoft Expression Web 3.032

Using Font Properties 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 New Perspectives on Microsoft Expression Web 3.033

Using Font Properties 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 New Perspectives on Microsoft Expression Web 3.034

Using Font Properties New Perspectives on Microsoft Expression Web 3.035

Using Font Properties – Style ScreenTip Popup screen that reveals the style code View by hovering pointer over a style name in Apply Styles panel New Perspectives on Microsoft Expression Web 3.036

Visual Overview Creating CSS Reports New Perspectives on Microsoft Expression Web 3.037

Using Class Selectors Define the appearance of an element in multiple ways Dependent class – Styles only one element, ex., Element name Class name Independent Class – Styles any XHTML element – Does not use an element name New Perspectives on Microsoft Expression Web p.double.essential

Using Class Selectors Dependent ClassIndependent Class p.italic {.vital{ font-style: italic;color: red; }font-style: italic; p.double{} line-height: 2.0; font-weight: bold; } New Perspectives on Microsoft Expression Web ElementClass Name

Using Class Selectors 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 New Perspectives on Microsoft Expression Web 3.040

Using Class Selectors Creating an Independent Class Selector New Perspectives on Microsoft Expression Web 3.041

Using Class Selectors 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 element – User names the ID selector – Selector is preceded by a # # is a flag character; signals a special instruction New Perspectives on Microsoft Expression Web 3.042

Using Class Selectors 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 New Perspectives on Microsoft Expression Web 3.043

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 New Perspectives on Microsoft Expression Web /* External Style Sheet created by [name] */

Using External Styles 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 New Perspectives on Microsoft Expression Web 3.045

Using External Styles Options for Attach – Link option enters code for the tag in the section of the Web page – Import option inserts import code instead of link code New Perspectives on Microsoft Expression Web 3.046

Managing Styles New Perspectives on Microsoft Expression Web 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 New Perspectives on Microsoft Expression Web 3.048

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 New Perspectives on Microsoft Expression Web 3.049

Managing Styles New Perspectives on Microsoft Expression Web 3.050