Download presentation
Presentation is loading. Please wait.
Published byTiffany Sharp Modified over 9 years ago
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 2New 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.03
4
Visual Overview The New Style Dialog Box New Perspectives on Microsoft Expression Web 3.04
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.05
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.06
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.07
8
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
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.09
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.010
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 tag code New Perspectives on Microsoft Expression Web 3.011
12
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
13
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
14
Determining Where to Write Styles New Perspectives on Microsoft Expression Web 3.014
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.015
16
Determining Where to Write Styles New Perspectives on Microsoft Expression Web 3.016
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.017
18
Determining Where to Write Styles New Perspectives on Microsoft Expression Web 3.018 – These panel icons are different colors and indicate what type of style is in use
19
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
20
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
21
Using the Font Properties New Perspectives on Microsoft Expression Web 3.021 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.022
23
Using the Font Properties New Perspectives on Microsoft Expression Web 3.023
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.024
25
Using Font Properties New Perspectives on Microsoft Expression Web 3.025
26
Using Font Properties New Perspectives on Microsoft Expression Web 3.026
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.027
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.028
29
Using Font Properties New Perspectives on Microsoft Expression Web 3.029 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.030
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.031
32
Using Font Properties New Perspectives on Microsoft Expression Web 3.032
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.033
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.034
35
Using Font Properties New Perspectives on Microsoft Expression Web 3.035
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.036
37
Visual Overview Creating CSS Reports New Perspectives on Microsoft Expression Web 3.037
38
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 3.038 p.double.essential
39
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 3.039 ElementClass Name
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.040
41
Using Class Selectors Creating an Independent Class Selector New Perspectives on Microsoft Expression Web 3.041
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 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
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.043
44
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 3.044 /* External Style Sheet created by [name] */
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.045
46
Using External Styles Options for Attach – Link option enters code for the tag in the section of the Web page – Import option inserts an @ import code instead of link code New Perspectives on Microsoft Expression Web 3.046
47
Managing Styles New Perspectives on Microsoft Expression Web 3.047 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.048
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.049
50
Managing Styles New Perspectives on Microsoft Expression Web 3.050
Similar presentations
© 2024 SlidePlayer.com. Inc.
All rights reserved.