CIS 3630 Test 1c.txt

• You changed the appearance of text by using buttons on the Common toolbar, just as you would if you were using Microsoft Word to format a text document
• Formatting applied directly within the document body

• 1. Greater consistency in your Web site: You can apply styles you create in one document to some or all of the other pages in your Web site to ensure a consistent design
• 2. Easily modified code: When you modify code to change the style of one page, all of the pages in your Web site can change, saving your priceless development time
• 3. More flexible formatting: By using CSS, you can format and position text in ways that you cannot when using XHTML alone
• 4. Greater functionality: Many features of a word-processing program, such as tab indents, line spacing, and margins - none of which are available in XHTML - are available in CSS

• The ability to display a Web page consistently in all browsers
• When a CSS feature is displayed in all browsers without any differences among browsers
• However, none of the major browsers, including Mozilla Firefox, Safari, Opera, and Microsoft Internet Explorer, support (display) all the features of CSS, and these browsers do not support the features in a consistent manner

• A consistent, recognizable pattern
• A rule or collection of rules

A collection of one or more CSS rules, which are statements that declare how an XHTML selector will appear in the browser

• 1. Selector: Identifies the element or group of elements to which the style is applied (ex.: h2). Three of the most commonly use are element selectors (also known as type selectors), class selectors, and ID selectors
• 2. Property: Describes how the selector will be changed
• 3. Value: Indicates the manner or the extent to which the property will be changed and is generally expressed in words, numbers, or a percentage

• Ex.: font-style: italic;
• font-style is the property
• italic is the value
• colon separates a property from a value
• Each property and value pair is called a declaration

• Used to format a single XHTML element
• Redefines the appearance of an XHTML element, such as h1, p, em, and so forth
• When you created the element class for the h1 element, you did nothing more than create the style for the class. The class automatically styled the h1 element the moment you were done entering the code for the class

• Used to format multiple XHTML elements
• Note that in the code, the selector ("p") comes first, then a period, and then the name of the class
• If you do not name the class, by default, Expression Web names classes as .style1, .style2, etc., not very descriptive
• For the class name, choose a short, one-word name that describes the purpose of the class
• It has dependent and independent classes
• Creating classes is a two-step process. First you create the class, and then you apply the class by entering a small bit of CSS code

• Used to uniquely format a single instance of an XHTML element
• Function very similarly to independent classes, that used to style any XHTML element, but this time, they do so only once on the Web page
• Most often used with the XHTML [div] element, which is used to create formatting and positioning divisions on a Web page. The [div] element is a block-level element, but it has no formatting on its own
• The [span] element is used to format text inline within the body of another XHTML element, such as the paragraph element. Just like the [div] element, the [span] element has no formatting of its own. It's merely an empty container
• Note the pound symbol (#) before the ID selector name. The pound symbol is a flag character that serves as a signal for a special instruction
• The # symbol is also known as a number sign, a hash, and the octothorpe character

Indicates the manner or the extent to which the property will be changed and is generally expressed in words, numbers, or a percentage

• Describes how the selector will be changed
• In a CSS rule, a set of changes to apply to a selector, the element or group of elements to which a style is applied

A set of specific guidelines for how code is written in a particular computer language

• Each property and value pair (for example, font-style: italic)
• Semicolon follows each declaration
• If there is more than one declaration, each declaration should be listed on a separate line and indented from the left margin
• h2 {
• font-style: italic;
• font-family: Arial, Helvetica, sans-serif;
• }

If the property has a red line through it, another rule has the same style declaration. Pass the pointer over the red line to see a ScreenTip

The list of all the declarations

• When writing CSS rules, make sure you include the following parts of the code:
• 1. A start brace before the declaration list
• 2. A colon between each property and its value
• 3. A semicolon at the end of each declaration
• 4. An end brace at the end of the declaration list

It's the punctuation that matters - the braces, the colons and the semicolons. Spacing, indentation, line returns, or the position of the braces has no effect on the style.

• The "cascading" in Cascading Style Sheets is a reference to the fact that XHTML documents can obtain formatting from more than one source
• CSS code is written in external style sheets, internal style sheets, and inline styles
• You apply/use each of these style types to XHTML code in different ways. Each browser has its own styles as well

• A separate file from XHTML document that contains only CSS code
• Can format as few or as many pages as you want in your Web site
• Preferred method for writing CSS code

If you delete an external style, an icon appears and indicates a broken link

• No XHTML code or any other typed characters or spaces are contained in the CSS external style sheet
• File must be named with extension of .css, not .htm
• Then, you must enter code in each of the XHTML documents that will use the style sheet

• The style sheet code is usually preceded by a CSS comment, which typically provides some documentation about the author of the style sheet, the date the file was created or last modified, and the documents (in general) that the style sheet is intended to format
• The text for the comment is preceded by a "slash star" and ended with a "star slash," like so: /* This is a CSS comment */

• Used to link (attach) a CSS style sheet to an XHTML file
• The tag used to identify the source of an external CSS file
• It's written in the [head] section of an XHTML document
• Expression Web created the [link] tag code for you and uses the Folder List task pane to keep track of the location of the CSS file
• A CSS file has a different icon (the letter "A") in the Folder List task pane

• In which you write the CSS code in the [head] section of an XHTML document
• It's also referred to as an embedded style
• Used only in the document in which they are written
• Use the style element
• Expression Web writes most of your styles as internal styles, creating the code for the start [style] tag and the end [/style] tag

• A style that affects the appearance of a portion of text within a block-level element
• A style that is written within a tag in the [body] section of an XHTML document
• Format just a section of text within the document body
• Using inline styles is similar to applying formatting using direct formatting, so you should use inline styles sparingly
• Use the style attribute, and the value for the style attribute is the styles code
• Is included as part of the start tag for an element
• To revise an inline style, you must find the style and then manually revise it
• Inline styles cannot be named, they do not appear as part of the styles list in the Manage Styles task pane, and they cannot be moved from one document to another

• A graphic indicator of the types of styles that are being used.
• Indicate what type of style is in use:
• 1. Blue bullet: An element-based style rule
• 2. Green bullet: A class-based style rule
• 3. Red/Orange bullet: An ID-based style rule
• 4. Yellow bullet: An inline style rule
• 5. A circle around any bullet: A style rule applied to at least one XHTML element on the page

• The CSS methodology for determining which style prevails in case of a conflict
• Determines priorities and uses a weighting method to calculate which style rule will prevail if there are conflicting rules
• Inline styles are the most specific type of styles, so a rule created by an inline style will prevail over both an internal and an external style that attempt to format the same selector
• Internal styles prevail over external styles
• If there is a conflict within the same style sheet, generally, the style farthest down the list will prevail
• ID selectors count the most and have a value of 100
• Class selectors have a value of 10
• Element selectors have a value of 1

• A selector within another selector
• CSS 2.1 refers to it as descendent selectors

A top-level element

Element that inherit characteristics from the parent element

If you style the parent, you do not have to style its child

• In the Apply Styles or Manage Styles task pane, click New Style. Alternatively, click Format on the menu bar, and then click New Styles
• Choose a selector by typing it in the Selector text box or choosing it from the list box. For a class selector, precede the class name with a period. For an ID selector, precede the class name with a # sign. For an inline style, choose inline style from the Selector list box
• Define the style in the current page (the default), or choose a different location from the Define in list box
• Choose an option in the Category bar, and then select choices from the appropriate text boxes and list boxes
• When you have entered all the values, click the OK button

• Font Property, Values, What It Does, Comments
• 1. Font-family: Choose from the 3 Expression Web default font families or create your own font family; it changes the font; always end the list of font-family values with the name of one of the five generic font families - serif, sans serif, monospace, cursive, or fantasy
• 2. Font-size: Choose from these keywords - xx-small, x-small, small, medium, large, x-large, xx-large; it changes the size of type; for text, use either keywords, em values, or percentage values. For print style sheets, use point values
• 3. Font-style: Italic, oblique, normal; it makes text italic or not; oblique is generally not supported
• 4. Font-variant: Small-caps, normal; it makes text appear in small capitals, generally 1 or 2 points smaller than the font size currently in effect; in larger point sizes, the first letter of each word should appear 1 or 2 points taller than the other letters in the word
• 5. Font-weight: Bold, normal; it makes text appear in bold or not; the keyword value lighter and bolder and the numeric values (100-900) are generally not supported
• 6. Text-transform: Capitalize, lowercase, none, uppercase; it changes the capitalization of text; the capitalize value is used to capitalize the first letter of each word
• 7. Color: A named color, an RGB triplet, or a hexadecimal value; it changes the foreground color (the color of text); hexadecimal values are preferred
• 8. Text-decoration: Underline, overline, line-through, blink, none; it generally used to underline text or not; use underline only with links or together with overline to style headings. Do not use blink. Line-through is seldom used

• Used to group all of the available CSS properties
• Is on the left side of the New Style dialog box

Lets you specify values for several properties by using only one property, ex.: h3 {font: italic normal 1.5em Arial, Helvetica, sans-serif;} (style, weight, size, and family)

• The property that declares a list of fonts to be used
• Used to identify the font that is currently in use
• Has only 3 predefined font families, but you can create your own font families

• The CSS property that determines the size of text
• Used to change the size of text
• A Web page should preferably have only one or at most two h1 headings, the largest heading size
• An h1 heading should serve to format banner text or headline text only
• The values for font size should be expressed either as keywords, as em values, or as percentages
• XHTML seldoms used [big] or [small] tag because it's difficult to know what size is actually being specified

A measurement equal to the default font size, usually 12-point text. A value of 2em, therefore is 24 points

• The CSS property that determines whether and to what degree text appears in boldface
• Makes text bold
• The 2 most common values are bold and normal
• The keywords lighter and bolder generally are not supported
• You can also use numeric values ranging from 100 to 900 in increments of 100
• By default, Expression Web uses a font weight of 700, which displays text in the normal weight for bold

• The CSS property that determines whether text appears in italics
• Makes text appear in italics or not
• Has 3 values: italic, oblique, and normal
• Oblique is generally not supported

• The CSS property that determines whether text appears in small capital letters
• Display text in small caps, which is text that appears in all capital letters, but slightly smaller than normal capitalized letters
• Has 2 values: normal and small-caps
• XHTML does not have an element equivalent to font-variant

• A CSS text property used to change the capitalization of text
• The available values are capitalize, which capitalizes just the first letter of each word you have selected; lowercase, which makes text appear in all lowercase letters; none, which removes any value you have set for text-transform; and uppercase, which makes text appear in all capitals, regardless of how you originally typed the text

The CSS property that determines the foreground (the text color) color

• CSS text property that you use to apply certain graphic effects to text
• The values for this property are underline, overline, line-through, blink, and none

Reveals the style code when you pass the pointer over a style name in the Apply Styles task pane

Style only one XHTML element. In this instance, the class is styling the paragraph element and therefore is a dependent class

• Styles any XHTML element
• The syntax for an independent class is similar to that of the dependent class, except this time you do not specify an XHTML element selector
• Begins with a period, ex.: .vital

• Don't enter spaces either before or after the period in either a dependent or independent class name
• Creating classes

• In the Apply Styles or Manage Styles task pane, right-click the style and click Modify Style
• To use the CSS Properties task pane to modify a style, in the document window, click inside the text you want to modify, click in the value text box for a style, type the new value or choose from a list of values form the list box

Never move a style manually by cutting and pasting in Code view. Always use the Manage Styles task pane instead

• A task pane in Expression Web that lists CSS properties and values
• Lists all of the CSS styles shown in the New Style dialog box

• Is a toggle button
• If you click the Summary button again, all the properties and values should appear

Click view on the menu bar, point to Toolbars, and then click Style

It's a good idea to avoid using the format painter tool to apply a style. The format painter applies only the style - it does not change the XHTML element. For example, you copied a style from an h1 heading to an h2 heading, it would only apply the style characteristics; it wouldn't make the h1 heading into an h2 heading, which is probably what you intended

To find the source code for the style, go to the Apply Styles or Manage Styles task pane, right-click the style, and click Go to Code

• Click the code tab of the section that you want to remove formatting
• Click Format on the menu bar, and then click Remove Formatting

To undo what you just did, click Edit on the menu bar, and then click Undo Remove Formatting

• Make sure that an inline element (such as [em], [strong], or [span]) is in the block of text in which you want the inline style
• Select the text for the inline style
• In the Apply Styles or Manage Styles task pane, click New Style
• In the Selector text box, click the list arrow and click inline style
• Format the style as you want and click OK

If you want to have just a word(s) styled by using an inline element within a paragraph, you must have an inline statement, such as [em], [strong], or [span], surrounding the selected text. If you don't have an inline statement for the selected text, the entire paragraph will be styled, which is probably not your intention

• A toolbar often used to apply styles to a completed document
• Used to create an inline style:
• In Design view, click the Style Application list arrow on the toolbar, and then click Manual
• Click the Target Rule list arrow, and then click New Inline Style, if necessary
• Again click the Target Rule list arrow, but this time click Apply New Style. The New Style dialog box opens
• Click the Selector list arrow, and then click the first item in the list (inline style)

• Change back to Auto afterwards:
• In the status bar, right-click the word Manual
• From the shortcut menu, point to Mode, and then click Auto

If you find that clicking the buttons on the Common toolbar formats more than the selected text, change the Style Application from Manual to Auto

• Click File on the menu bar, point to New, and then Click CSS
• Enter an identifying CSS comment for the file
• Enter the styles code
• Save the file with the filename extension of .css
• To attach the external style sheet file, go to the Apply Styles task pane or the Manage Styles task pane, and then click Attach Style Sheet
• In the Attach Style Sheet dialog box, enter the URL of the style sheet file, or click the Browse button to navigate to the location of the file. Alternatively, with the XHTML file open in Design view, click and drag the CSS filename from the Folder List to anywhere on the XHTML file

• If you delete an external style, an icon appears and indicates a broken link
• If you delete a CSS file, the link code is left behind. Delete the link before you delete the CSS file

The choice for Attach as from Attach Style Sheet dialog box has 2 options. Use the Link option to enter code for the link tag in the [head] section of your HTML document. Use the import option to insert an @ import code instead of link code

• Microsoft tool that predicts what you are about to type
• The more you type, the shorter the list of suggestions will become
• The Expression Web feature that assists users in writing code

• In the Manage Styles task pane, click the Options button. Select Categorize By Order
• To move the location of a style in the list, click and drag the style to the new location
• To move a style from an internal style sheet to an external style sheet, make sure that the CSS file is attached. Drag the style from the Current Page window to the window containing the external styles

File that has been placed in a document from another file

• To check for errors in file(s)
• Click Tools on the menu bar, and then click CSS Reports. The CSS Reports dialog box opens
• Click the Open page(s) option button. Make sure that all check boxes in the Check for group are checked
• Click the Check button

A contextual selector; a selector within another selector

Another name for an internal style

A statement that declares how an XHTML selector will appear in the browser

An element or class to be styled

A collection of styles, either internal or external to the document