Website Development I

Class No. 4:

CSS Selectors and the span and div Elements

Jump to Exercise

Today’s Goal

To add class and id attributes to HTML elements and use those as CSS selectors.

Class Resources

Web Programming book reading for THIS class

• pages 79-88
1. Class Selectors
2. ID Selectors
3. span and div Elements
4. Cascading
5. style Attribute, style Container

Web Programming book reading for NEXT class

• pages 88-107
1. External CSS Files
2. CSS Properties
3. Color Properties
4. RGB Values for Color — skim
5. Opacity Values for Color — skim
6. HSL and HSLA Values for Color — skim
7. Font Properties — IMPORTANT

Additional References

• CSS Cheat Sheet (PDF file)
• CSS3 Cheat Sheet  (PDF file)

Review

It wasn’t clear to some of you that I had created a starter file for Tuesday’s exercise.

• This was my fault for not pointing this out more clearly in the instructions.
• Here are the instructions once again for those of you who have only just gotten started on that exercise.

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.
• If you’re reading these instructions on paper, go to the class website on your computer to find the click here link above and click it.
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.

Today’s exercise continues along the same vein.

• If you haven’t made significant progress on Tuesday’s exercise, I recommend that you continue working on that exercise before starting today’s.

Do you have questions or issues from our last class or the readings?

Selector Types – Revisited

Tag Selectors

We worked with these in our last class.

Class Selectors

A class is applied to a tag using the class attribute.

Example

<p class="reverse">This paragraph is rendered in "reverse video", 
    that is, with a dark background and light-colored letters.</p>

This paragraph is rendered in "reverse video", that is,
with a dark background and light-colored letters.

Applying Classes to Elements

• classes may be applied to almost any HTML start tag using the class attribute
• that is, class styles can be applied to elements of different types
• many elements on a page can have the same class
• this allows a way to style those elements the same, with absolute consistency
• only letters, numbers, hyphens, and underscores can be used in class names

Styling Classes with CSS

• class selectors begin with a dot or period (.)

 .reverse {
   background-color: #600 ;  /* dark brown */
   color: #FFC ;             /* light yellow */
 }

• the first character after the period must be a letter
• note that class names are case-sensitive!
• one advantage of using class selectors rather than redefining the styles of basic tags is that the basic tags may then still be used with their default styles if desired

Syntax

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

➤ Notice the dot or period (.) before the class name.

Dean, Web Programming, p. 80

Dean, Web Programming, p. 81

Examples

.time-format {
  font-family: monospace, sans-serif ;
  font-size: 18pt ;
  font-weight: bold ;
  color: red ;
}

<p class="time-format">20:36 hours = 8:36 PM</p>

<p>20:36 hours = <span class="time-format">8:36 PM</span></p>

<p>20:36 hours = <em class="time-format">8:36 PM</em></p>

Result

20:36 hours = 8:36 PM

20:36 hours = 8:36 PM

20:36 hours = 8:36 PM

ID Selectors

• IDs provide a direct way to qualify a specific selection: by its ID
• IDs are intended to be unique on a page
• the behavior of pages that contain the same ID for two or more elements is unpredictable
• ID selectors begin with a pound (or hash) sign (#)

Syntax

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

➤ Notice the pound or hash sign (#) before the ID’s name.

Dean, Web Programming, p. 83

Example

#message {
  font-variant: small-caps ;
  font-weight: bold ;
  color: blue ;
}

<p id="message">Any situation not covered by the above rules will be addressed as it occurs by the officer in charge.</p>

Result

Any situation not covered by the above rules will be addressed as it occurs by the officer in charge.

span and div Elements

These elements do not have built-in renditions.

• However, the div tag will cause a line break, while the span tag will not.
• The purpose of these elements is to give you sections that you can style with CSS.

Dean, Web Programming, p. 85

Dean, Web Programming, p. 85

<div> and <span> are both container elements

• they contain other elements, such as <h2> and <p>, to create sections that can then be styled with CSS
• many of the newer HTML5 semantic elements perform a similar function

The difference between these two elements is that:

• <div> elements work like paragraphs in that the cause line breaks
• <span> elements are inline and do not cause line breaks

The Cascade

The C of CSS stands for cascading

• style sheets are collections of rules
• cascading comes into play when two rules apply to the same element but contradict each other
• if the two rules do not contradict each other, both will apply, such as boldface and italic
• for those of you who may have worked in object-oriented languages, note that cascading is not the same as inheritance
• “CSS specifies a priority scheme to determine which style rules apply if more than one rule matches against a particular element.  In this so-called cascade, priorities or weights are calculated and assigned to rules, so that the results are predictable.” (Wikipedia)
• we will look at the priority scheme more closely in another class

Today’s Exercise

Note:  Today’s exercise is complex.  Like last week, I do not expect you to finish this exercise in one day.  We will continue working on it in our next class.  Some of the styling will be easier to do when we look at additional types of selectors and other HTML elements.

Goal:  To render PRO Manual page 47 in the browser so that it looks as close as possible to the way it looks in the manual.

Procedure:

Step 1:  Understand what you are to do

1. Look at page 47 of the PRO Manual and notice that:
1. The page header after the page number, “|CTEC: Business & Computer education,” is in a light gray color.  (“Education” should also be capitalized here.)
2. The main page title at the top of the page, “CTEC: BUSINESS & COMPUTER EDUCATION,” is in white text.
3. The box containing the main page title has rounded edges.
4. The page text is enclosed in a light gray border.
5. The “Foundation Classes” section is indented.
6. The page has additional text formatting characteristics, but ignore the icon in the page header and the CTEC logo image for now.

Step 2:  Copy the starter code to your dropbox

2. Open the UltraEdit editor on your computer.  This should open a blank window that is ready for editing.
3. Leave the editor open and click here to open the starter code in your Microsoft Edge browser.
• If you’re reading these instructions on paper, go to the class website on your computer to find the click here link above and click it.
4. Type CtrlU to view the source code for the starter code page.
5. Click anywhere in the browser window and type CtrlA to select all of the code.
6. Type CtrlC to copy the code.
7. Return to UltraEdit and type CtrlV to paste the code into the blank editor window.
8. Type CtrlS to save your copy of the starter code to your dropbox.  Name the file as you see fit.
9. Open the file you just saved in Microsoft Edge to ensure that you have saved it correctly.

Step 3:  Add CSS to format the page as desired

10. Attempt to implement these formatting characteristics using CSS.  Here are the CSS properties I used in my version that that you might also want to use.

      font-family: Verdana, Arial, sans-serif ;
      width: 600px ;
      font-style: italic ;
      font-weight: bold ;
      color: white ;
      color: RGB( 121, 143, 156 ) ;  (this is the color of the grayish blue text)
           or  color: lightblue ;
      background-color: RGB( 121, 143, 156 ) ;
           or  background-color: lightblue ;
      border: 2px solid RGB( 121, 143, 156 ) ;
           or  border: 2px solid lightblue ;
      border-radius: 0 10px 10px 0 ;
      float: left ;   /* for the student icon */
      float: right ;  /* for the CTEC logo */
      height: 50px ;
      margin-right: 0.5em ;

11. You will need the <div> and <span> tags to do a really good job on this exercise.  Note where I have included these in the starter code and assigned each an ID.

To see what can be done, compare page 47 of the PRO Manual with my HTML version of this page.

View the Source Code for This Page   Jump to the Top of This Page

This is Class No. 4.  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.