Website Development I

Course Info Class Notes Resources Student Websites

Class No. 3:

Introduction to Cascading Style Sheets

Today’s Goal

To get started using CSS to style HTML elements.


Class Resources

Web Programming book reading for THIS class

Web Programming book reading for NEXT class

Additional References


Review

Questions from our last class or the readings?


Concepts

What are styles?

What is the purpose of styles?


Inline Styles vs. Internal Style Sheets

Inline Styles

This is red text.

<p style="color: red ; font-style: italic ; text-decoration: underline">
  This is red, italic, underlined text.</p>

This is red, italic, underlined text.

Internal Style Sheets


Source:  CSS: The Missing Manual by David Sawyer McFarland, Figure 2-2,
2nd edition: page 33, 3rd edition: p. 38

<head>
  <style>
    /* rules go here */
  </style>
</head>
<head>
  <style>
    p {  /* this rule applies to all p elements */
      color: red ;
      font-style: italic ;
      text-decoration: underline ;
    }
  </style>
</head>
<body>
  <p>This is red, italic, underlined text.</p>
  <p>This text will also be red, italic, and underlined.</p>
</body>

This is red, italic, underlined text.

This text will also be red, italic, and underlined.


Tag (or Element) Selectors

Syntax

tag {
  1st-property: 1st-property’s-value;
  2nd-property: 2nd-property’s-value;
}

➤ Notice the colon (:) between the property and its value and the semi-colon (;) at the end of each rule.


Dean, Web Programming, p. 78


Dean, Web Programming, p. 78

Example

em {
  color : green ;       /* we are adding properties to the em tag */
  font-weight : bold ;  /* the text will still render in italics because that property is built-in */
}

<p>This booklet was developed by residents, so it is <em>not</em> an official rule book.</p>

<p>You can have up to 20 people on your visitor list.  If you remove someone from your list, he or she <em>cannot be added back on for one calendar year</em>.</p>

Result

This booklet was developed by residents, so it is not an official rule book.

You can have up to 20 people on your visitor list.  If you remove someone from your list, he or she cannot be added back on for one calendar year.

➤ Remember that the text is italicized because italicization is a built-in property of the <em> tag.  However, this can be changed by CSS, too.


A Comment on Comments


Today’s Exercise

Goal:  To render the main part of PRO Manual page 15 in the browser so that it looks close to the way it looks in the manual, but with a few enhancements.

Procedure:

    Step 1:  Understand what you are to do

  1. Look at the part of page 15 of the PRO Manual that starts with “Rules of Displays of Affection.”  Notice that:
    1. The page font is sans-serif, meaning that it does not have small, decorative lines (called “serifs”) on the characters.
    2. The main titles “Rules of Displays of Affection” and “What activities can we do during visits?” are large and in boldface type.
    3. The paragraph that starts with “Any Situation” is in smaller type, but it is also in boldface.
    4. There is a section that appears in an indented box.
    5. That box has a bluish-gray border and light bluish-gray shading.
    6. The text in that box is centered.
  2. Now look at the slightly enhanced version of that part of the text that I created using CSS.  Notice that:
    1. The large titles are blue.
    2. The paragraph about kissing is red.
    3. The small title is green and in italics.
    4. The box looks pretty much like the one in the PRO Manual.
  3. Finally, look at the starter page for this exercise and notice that it is missing the nice formatting of the enhanced version.  Your task is to add CSS code to the starter page to make it look like the enhanced version.

    4. Step 2:  Copy the starter code to your dropbox

  4. Open the UltraEdit editor on your computer.  This should open a blank window that is ready for editing.
  5. Leave the editor open and click here to open the starter code in your Microsoft Edge browser.
  6. Type CtrlU to view the source code for the starter code page.
  7. Click anywhere in the browser window and type CtrlA to select all of the code.
  8. Type CtrlC to copy the code.
  9. Return to UltraEdit and type CtrlV to paste the code into the blank editor window.
  10. Type CtrlS to save your copy of the starter code to your dropbox.  Name the file as you see fit.
  11. Open the file you just saved in Microsoft Edge to ensure that you have saved it correctly.

    12. Step 3:  Add CSS to format the page as desired

  12. Start by inserting your name where indicated on line 11 of the starter code.  Then insert your initials, today’s date, and the current time on line 12.
  13. Note that the starter code already has an internal style sheet in the head section.  I have supplied a body selector in that sheet for which I added CSS rules to display the page text in a sans-serif font (Verdana) and limit the page width to 600 pixels.
  14. Look over the rest of the starter code to identify the elements that you will want to select and style.
  15. Add additional selectors to the style sheet and appropriate CSS rules for those selectors to display the page as in my enhanced version.  Below are the various rules that I used.  You are welcome to use these, but you need to figure out where to put them to make the page appear as desired.
    16.       color: blue ;
      color: green ;
      font-style: italic ;
      color: red ;
      font-weight: bold ;
      padding: 12px 24px ;
      border: 3px solid silver ;
      background-color: azure ;
      text-align: center ;
  16. Add additional CSS to style the page in any way you like.  For example, if you’d like to experiment with other CSS rules and different colors, see the Additional Resources for this class.


    17.  


    This is Class No. 3.  It was last modified on Saturday, October 21, 2023 at 4:38 PM.  Copyright © 2010-2024 by Jesse M. Heines.  All rights reserved, but may be freely copied or excerpted for educational purposes with credit to the author.