1 / 50

Tutorial 5

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

ogden
Télécharger la présentation

Tutorial 5

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. Tutorial 5 Formatting with CSS

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

  3. 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.0

  4. Visual OverviewThe New Style Dialog Box New Perspectives on Microsoft Expression Web 3.0

  5. 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.0

  6. 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.0

  7. 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.0

  8. Understanding HowStyles are Written All h1 text would appear in blue • 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.0

  9. 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.0

  10. 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.0

  11. 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 <link> tag code New Perspectives on Microsoft Expression Web 3.0

  12. Determining Where to Write Styles • 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 New Perspectives on Microsoft Expression Web 3.0

  13. Determining Where to Write Styles • 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 New Perspectives on Microsoft Expression Web 3.0

  14. Determining Where to Write Styles New Perspectives on Microsoft Expression Web 3.0

  15. 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.0

  16. Determining Where to Write Styles New Perspectives on Microsoft Expression Web 3.0

  17. 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.0

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

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

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

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

  22. 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.0

  23. Using the Font Properties New Perspectives on Microsoft Expression Web 3.0

  24. 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.0

  25. Using Font Properties New Perspectives on Microsoft Expression Web 3.0

  26. Using Font Properties New Perspectives on Microsoft Expression Web 3.0

  27. 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.0

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

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

  30. 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.0

  31. 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.0

  32. Using Font Properties New Perspectives on Microsoft Expression Web 3.0

  33. 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.0

  34. 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.0

  35. Using Font Properties New Perspectives on Microsoft Expression Web 3.0

  36. 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.0

  37. Visual OverviewCreating CSS Reports New Perspectives on Microsoft Expression Web 3.0

  38. Using Class Selectors p.double .essential • 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 New Perspectives on Microsoft Expression Web 3.0

  39. Using Class Selectors Class Name Element Class Name 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 3.0

  40. 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.0

  41. Using Class Selectors Creating an Independent Class Selector New Perspectives on Microsoft Expression Web 3.0

  42. 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 <div> 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.0

  43. 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.0

  44. Using External Styles /* External Style Sheet created by [name] */ • 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 3.0

  45. 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.0

  46. Using External Styles • 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 New Perspectives on Microsoft Expression Web 3.0

  47. Managing Styles New Perspectives on Microsoft Expression Web 3.0 • 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

  48. Managing Styles New Perspectives on Microsoft Expression Web 3.0

  49. 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.0

  50. Managing Styles New Perspectives on Microsoft Expression Web 3.0

More Related