Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.



Published on

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

  • Be the first to like this


  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> </li></ul>