B. Block
Student Lerning Outcomes.
1. Evaluate why CSS 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. Createan external sytle sheet
13. Attach a CSS style sheet to an XHTML fike,
14. Move styles within an internal style sheet.
15. Move styles between style sheets.
Important Points:
1. CSS - will contol the appearance of one or more of your web
pages. Provides greater consistency, Easily modified code and greater
functionality.
a. Style is a
consistent, recongizable 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 gorup 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 farmat multiple XHTML elemens.
3. ID selectors are used touniquely 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 prperty and its vbalue
c. a semicolon at the end of each declaration
d. an endbrace at the end of the declaration list.
e. h3 {color:red;background-color:black;}
3. External style sheet- seperate file that contain only css
code.
a. no XHTML code ar any other typed chyaracters or spaces are jcontained 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" type="text/css" />
4. Internal style - write the CSS code in the <head> sectionof
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 stylie 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 |
| Font Property | Values | What it does | Comments |
| font-family | Choose from three expression web default fon families or creat 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 thes 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 thatn 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 numberic values (100 to 900) are generall 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 forground color | Hexadecomal 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. |
B. Block
C. Background
D. Border
E. Box
F. Position
G. Layout
H. List
I. 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 wieght to make text bold.
f. font style can make text appear initalics or not.
g. font-variant is to diaplay text in small caps.
h. text-tranform -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.
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:
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 targe tule 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
of your css, undrlined" />
23. Run a CSS repot.
a. click tools on menu bar, click CSS Reports: You will see:
b. Select all pages, open pages or current page.
c. Click the check button and view the report.