Published on

Published in: Technology, Education
  • Be the first to comment

  • Be the first to like this

No Downloads
Total Views
On Slideshare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide


  1. 1. IST 250 CSS cont’d and Tables
  2. 2. Linking External Style Sheets <ul><li>In the head section type: </li></ul><ul><ul><li><link rel=“stylesheet” type=“text/css” href=“my.css” /> </li></ul></ul>
  3. 3. Linking External Style Sheets <ul><li>A change to an external style sheet will automatically update all pages that reference it </li></ul><ul><li>URLs in an external style sheet are relative to the location of the style sheet on the server, not to the XHTML page’s location </li></ul><ul><li>You can link to multiple style sheets at a time. Later ones take precedence over the earlier ones. </li></ul>
  4. 4. Selecting Elements by ID <ul><li>In your stylesheet, your selectors will use the # to denote the use of an id </li></ul><ul><ul><li>Ex. div # banner { font-size: 12px;} or div # footer {font-style: italic;} </li></ul></ul><ul><li>Then, in your markup </li></ul><ul><ul><li><div id=“banner”>some text</div> or <div id=“footer”>some text</div> </li></ul></ul>
  5. 5. Selecting Elements by Class <ul><li>In your stylesheet, your selectors will use the . to denote the use of a class </li></ul><ul><ul><li>Ex. span.alert { color: red;} or p.caption {font-weight: bold;} </li></ul></ul><ul><li>Then, in your markup </li></ul><ul><ul><li><span class=“alert”>Warning!</span> or <p class=“caption”>Costa Rican toucan</p> </li></ul></ul>
  6. 6. When to use ID or Class <ul><li>Ids must be unique. An id name can only appear once within a single document. </li></ul><ul><ul><li>Ex. a footer or banner generally only appears once </li></ul></ul><ul><li>A class may appear more than once </li></ul><ul><ul><li>Ex. an alert message, or a particular text style </li></ul></ul>
  7. 7. Tables <ul><li>Designed for marking up tabular data (ex. a calendar or accounting data or a schedule…) </li></ul><ul><li>Also used for basic page structure (incorrectly, I may add) </li></ul>
  8. 8. Basic Structure of a Table <ul><li><table> <tr> <td>Cell contents row 1 cell 1</td> <td>Cell contents row 1 cell 2</td> </tr> <tr> <td>Cell contents row 2 cell 1</td> <td>Cell contents row 2 cell 2</td> </tr> </table> </li></ul>
  9. 9. Table attributes <ul><li>Controlling space </li></ul><ul><ul><li>cellpadding=“n” where n is the number of pixels that should appear between the contents of a cell and its border </li></ul></ul><ul><ul><ul><li>cellspacing=“n” where n is the numnber of pixels that should appear between one cell border and the next </li></ul></ul></ul><ul><li>Aligning a cells contents </li></ul><ul><ul><li>Align horizontal using align=“direction” (ex. left, right, center) </li></ul></ul><ul><ul><li>Align vertical using valign=“direction” (ex. top, middle, bottom) </li></ul></ul><ul><ul><li>Default alignment is left, middle </li></ul></ul>
  10. 10. Table attributes cont’d <ul><li>Spanning Cells </li></ul><ul><ul><li>Across columns use, </li></ul></ul><ul><ul><ul><ul><li>colspan=“n” where n is the number of columns the cell should span </li></ul></ul></ul></ul><ul><ul><ul><li>Across rows use, </li></ul></ul></ul><ul><ul><ul><ul><li>rowspan=“n” where n is the number of rows the cell should span </li></ul></ul></ul></ul>
  11. 11. Table attributes cont’d <ul><li>Setting the width </li></ul><ul><ul><li>Using pixels </li></ul></ul><ul><ul><ul><li>In the table or td tag type width=“n”, where n is the desired width of the cell or the entire table in pixels </li></ul></ul></ul><ul><ul><li>Using percentages </li></ul></ul><ul><ul><ul><li>In the table or td tag type width=“n % ”, where n is the percentage of the browser window that the table should occupy </li></ul></ul></ul>
  12. 12. Class examples <ul><li>http://www.personal.psu.edu/rdb126/ist250/week7.html </li></ul>
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.