Cascading Style Sheets

1. Evaluate why CS styles are used.
2. Determine where to write styles
3. Create style rules
4. Explore how styles cascade
5. Create a style base on an element selector
6. Define a CSS class selector
7. Define an ID selector
8. Apply class and ID selectors 
9. Modify a style
10. Modify styles using the CSS properties task pane
11. Create an inline style
12. Creating external style sheet
13. Attach a CSS style sheet to an XHTML file
14. Move styles within an internal style sheet.
15. Move styles between style sheets.

Important Points:


1. CSS - will control the appearance of one or more of your web pages.  Provides greater consistency, Easily modified code and greater functionality.
a. Style is a consistent, recognizeable pattern.
b. CSS style is a collection of one or more rules that declare how a XHTML selector will appear.
c. Style sheet is a collection of styles.
d. Selector identifies the element or group of elements to which the style is applied. 
    1. Element selectors are used to format a single XHTML element.
    2. Class selectors are used for format multiple XHTML elements.
    3. ID selectors are used to uniquely format a single instance of an XHTML element.
    4. Property describes how the selector will be changed. 
    5. Value indicates the manner or the extent to which the property will be changed- words, numbers or percentage.
2. CSS rules.
a. Start brace before the declaration list.
b. a colon between each property and its value
c. a semicolon at the end of each declaration
d. an end brace at the end of the declaration list.
e. h3 {color:red;background-color:black;}
3. External style sheet- separate file that contain only css code.
a. no XHTML code ar any other typed characters or spaces are contained in the CSS external.
b. CSS comment - /* this is a css comment */
c. link tag - used to link a css style sheet to an XHTML file.  Contain in the head section of the XHTML file.
<link rel="stylesheet" href="styles/intropage.css" originalAttribute="href" originalPath=""styles/intropage.css"" originalAttribute="href" originalPath=""styles/intropage.css"" original Attribute="href" originalPath=""styles/intropage.css"" original Attribute="href" originalPath=""styles/intropage.css"" type="text/css" />
4. Internal style - write the CSS code in the <head> section of XHTML document.  Also called embedded style.
a. <style type=text.css">
    h1 {color:teal;font-style:italic;}
    </style>
5. Inline Style-style that is written a tag in the <body> section.
a. <strong style="font-style:italic;color:red;">Our contest ends next week</strong>
6. Apply Styles task pane icons.

 Icon Color or Appearance What it means 
 Blue Bullet  An element-based style rule
 Green Bullet  A class base style rule
 Red Bullet  An Id based style rule
 Yellow Bullet  An inline style rule
 a circle around any bullet A style rule applied to at least one XHTML element on the page 

7. Specificity - determines priorities and uses a weighting method to calculate which style rule will prevail when there is conflict.
a. an inline style will prevail over both an internal and an external style.
b. if conflict in style sheet the style farthest down the list will prevail.
c. Id selectors dominate have a rating of 100.

8. Using the same declaration for multiple selectors - h3,h4,h5{font-family:Arial,Helvetica,sans-serif;}
9. Using contextual (descendent) selectors - tags can be nested  <bold><italic>text</italics></bold>
a. contextual selector is a selector within another selector - descendent selector
10. Font Properties:

 Font Property Values  What it does  Comments 
 font-family  Choose from three expression web default font families or create your own font family changed the font   Always end the list of font-family values with the name of
one of five font families - serif, sans serif, monospace,cursive, or fantasy
 font-size  choose from these keywords:xx-small, x-small,small, medium, large, x-large, xx-large  changes the size of type  for text use either keywords, em values, or percentage values. for print style sheets, use point values 
 font-style  italic, oblique, normal  makes text italic or not  Oblique is generally not supported
 font-variant  small-caps, normal  Makes text appear in small capitals, generally 1 or 2 points smaller that the font size currently in effect.  In larger point sizes, the first letter of each word should appear 1 or 2 points taller then the rest of the word
 font-weight  bold, normal  Makes text appear bold or not  The key word values lighter and bolder and the numeric values (100 to 900) are generally not supported.
 text-transform  capitalize, lower case, none, uppercase  Changes the capitalization of text  The capitalize value is used to to capitalize the fist letter of each word
 color  a named color, an RGB triplet, or a hexadecimal value  Changes the foreground color  Hexadecimal values are preferred
text-decoration underline,overline
line-through, blink, none		 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.

11. New style dialog box. Font- Click new style:  you will see:
a. Font

  New Style dialog box, Font

b. Block

  New Style, Bliock

c. Background

  New Style, Background

d. Border

  New Style, Border

e. Box

  New Style, Box

f. Position

  New Style, Position

g. Layout
New Style, Layout
  

h. List
New Style, List
  

i. Table

  New Style, Table

12. Font family property is used to identify the font that is currently in use.
13. Create font family.
a. click font family list arrow.
b. select a font
c. after the font name type a comma, press spacebar, type in font name.
d. font size is used to change the size of text- select the size you want.
e. font weight to make text bold.
f. font style can make text appear italitics or not.
g. font-variant is to display text in small caps.
h. text-transform  -capitalize (first letter of each word), lowercase (text all lower case), none (removes any values) and uppercase (text in all uppercase).
i. Color - determines the foreground (text colors) color.
j. Text decoration - underline, overline, line-through, blink, and none.

14. Class selectors:-allow you to define your own XHTML elements and define the appearance of an element in more than one way.
a. dependent class style only one element
b. independent classes style any XHTML element.
c. First you create a class, then you apply the class.  p.italic{font-style:italic} is the class.  To apply to text in body<p class="italic">this sentence will have the class italic applied to it</p>

15. Id selectors: can be used to style any XHTML element, but only once in the page.  Most often used with <div>(use to create formatting and positioning divisions on web page)   and <span>(used to format text inline within the body of another XHTML element.)

16. Modify a style: Select a style from the apply styles task pane, right click the style, click modify style, you will see:
You will note that the modify style dialog box is identical to the new style with font, block, background, border, box, position, layout, list, and table categories that can be modified.

  Modify Style dialog box

17. The styles toolbar can also be used to create and apply styles., click view on menu bar, click toolbars, click style. Click the new style button on the toolbar to create and new style.   You will see:

Styles Toolbar

18. Remove formatting in the document: Click anywhere inside the text that you want to remove the formatting. Click format on menu bar, click Remove Formatting.

19. To clear a style:  click the style tag of the paragraph to select the tag and the tag contents. Click the apply styles tab to display the apply styles task pane. In the apply style task pane click clear styles.

20. Creating an inline style:
a, Make sure that an inline element (<em>, <strong> or <span> is in the block of text that you want the inline style.
b. Select the text for example:  <span>Home Page</span>.  The span code can be inserted in the code window.
c. Go to the status bar and click style application:  You will see:

d. Select manual from style application list arrow.
e. Select new inline style from the target rule.
f. Select target rule list arrow again click apply new style, the new style dialog box opens.
g. Click the selector list arrow and click inline style.
h. set the properties that you want for you inline style.
i. Click OK

21. Creating an External Style Sheet-CSS
a. Click file on menu bar, click new, click CSS. 
b. Type in the code: for example:

/* external style sheet created by earl t. wylie */
body{color: navy; font-family: arial, helvatica, sans-serif;}
h2 {color: fuchsia;}
h3 {color: maroon;}
c. Save the file and give it a new name.

22. Attach CSS to web page.

a. Open the page that you want to apply CSS to in design view.
b. From the folder list drag and drop the CSS page onto the web page in design view.
c. In code view you will see: <link rel="stylesheet" type="text/css" href="name originalAttribute="href" originalPath=""name" of your css, undrlined" /> 

23. Run a CSS repot.
a. click tools on menu bar, click CSS Reports: You will see:
CSS Reports Errors

b. Select all pages, open pages or current page.
c. Click the check button and view the report.