Lecture 4   Class Activities

Goals

By the end of today, you will be able to:

  1. Use the Chrome Inspector to play with a document.
  2. Understand CSS selectors like ID and class, and also nested selectors.
  3. Use the Box Model to give elements margins, borders and padding.
  4. Use pseudo-selectors to modify how links look

Recap

Last time, we learned:

  • CSS as the style language for web pages
  • About CSS Zen Garden and separating style from content
  • The three places you can put CSS rules:
    • external style files
    • document level style tags
    • inline style attributes
  • We learned the basic syntax of a CSS rule (external and document level):
    selector {
        property: value;
        property: value;
    }   
    
  • In the reading for today, we learning that the selectors include
    • tags, which match every such element in the page
    • IDs, which match the element with that ID. (There should be only one.) These use a # character in the selector.
    • CLASS names, which match every element with that class. These use a . (dot) character in the selector.
    • descendant selectors, which match one of these inside one of those.
    • pseudo-selectors, for styling hyperlinks in different states (visited, unvisited)
  • You should make up names for IDs and CLASSes based on what they mean (semantics) rather than what they do or look like.
  • You also read about the box model:
    • boxes have (from outside to inside): margins, borders, padding and width.
    • background colors apply up to content and padding but not margin
    • borders have width, style and color.
  • DIV and SPAN are generic elements, just to carry CSS. DIV is a block element, and SPAN is a inline element
  • Images are inline elements
  • Center block elements by using margin:auto.
  • Don't center text
  • Elements can have background images. CSS Zen Garden uses those a lot.
  • Border can have rounded corners, which is cool.
  • We learned about the Chrome Inspector.

Quiz Question Nr. 1

How can you open the Chrome Inspector?

  1. View / Developer / Developer Tools

  2. Option-Command I (on a Mac)

  3. Right-click (control-click) and choose "inspect element"

  4. menu icon / More tools / Developer Tools

Working with Inspector

If you have already read the notes about Chrome's Inspector, practice your skills by following the instructions in this new example.

Other selectors

As we learned in the last exercise, sometimes we need to be a bit more focussed with our CSS selectors than just saying every occurrence of some tag will appear the same way. For example, it's common for hyperlinks in the nav bar to look different from ordinary hyperlinks.

Quiz Question Nr. 2

How do we specify that hyperlinks inside the nav bar are to be teal and 30px bold Verdana?

  1.    navbar a { color: teal; font: 30px bold Verdana; }
    
  2.    nav a { color: teal; font: 30px bold Verdana; }
    
  3.    navbar .a { color: teal; font: 30px bold Verdana; }
    
  4.    #nav a { color: teal; font: 30px bold Verdana; }
    

Here's an example in action:

Quiz Question Nr. 3

In the jsfiddle exercise last time, we used an inline style attribute to style a particular element. But you know that inline styles are frowned upon (deprecated). Instead, we should use a ...

  1. class

  2. id

  3. div

  4. span

More on CSS Selectors

The <DIV> tag is used to create a generic box (technically, a block element) that you can put other elements into, including other DIVs! Then, you can use CSS to style the elements. Similarly, a <SPAN> is a generic inline container.

By putting an ID or a CLASS onto an element, any element (not just DIV and SPAN), you can style it specially.

Quiz Question Nr. 4

The difference between ID and CLASS is:

  1. only one thing can have a particular ID

  2. only one thing can have a particular CLASS

  3. they are interchangeable

  4. IDs avoid class discrimination

Quiz Question Nr. 5

Which is most likely to use ID rather than CLASS:

  1. important

  2. best

  3. optional

  4. highlight

Quiz Question Nr. 6

How would you create a CSS rule such that elements with the class "optional" are in a smaller, gray font?

  1. optional { font-size: smaller; color: gray}
  2. #optional { font-size: smaller; color: gray}
  3. .optional { font-size: smaller; color: gray}
  4. class=optional { font-size: smaller; color: gray}

Quiz Question Nr. 7

How would you apply that CSS rule to a paragraph?

  1. <p id="optional">lorem ipsum</p>
  2. <p style="optional">lorem ipsum</p>
  3. <p class="optional">lorem ipsum</p>
  4. none of above

Discussion Question

Why not name the class gray rather than optional?

Descendant Selectors

One of the many powerful ways to use CSS selectors is to use more than one, namely descendant selectors. For example, as we saw before, to style hyperlinks with the nav, we can do:

   nav a { color: teal; font: 30px bold Verdana; }

This idea can be combined with classes and ids in lots of powerful ways.

Quiz Question Nr. 8

Suppose you want the font of paragraphs inside the legal disclaimer to be 5px silver. How would you do that?

  1. #disclaimer p { font-size: 5px; color: silver}
  2. p .disclaimer { font-size: 5px; color: silver}
  3. .disclaimer p { font-size: 5px; color: silver}
  4. p #disclaimer { font-size: 5px; color: silver}

Quiz Question Nr. 9

Suppose you want hyperlinks that are inside something that is optional to lack the usual underlining. How would you do that?

  1. a optional { text-decoration: none}
  2. a .optional { text-decoration: none}
  3. .optional a { text-decoration: none}
  4. optional a { text-decoration: none}

Quiz Question Nr. 10

From outside to inside, a box (block) has

  1. border, margins, padding

  2. margins, padding, border

  3. padding, margins, border

  4. margins, border, padding

Quiz Question Nr. 11

The difference between margins and padding is...

  1. indistinguishable if there's no border

  2. padding has background color, margins don't

  3. padding is measured in EM; margins in PX

  4. none; there is no difference

Blocks vs. inline

This example shows how div-s are block elements and spans are inline elements. Applying certain properties to divs and spans doesn't produce the same results. Check which of the span CSS styles have been applied to the style elements. Play with setting styles for margin and padding to the different spans.

Understanding width

The property width of an element refers to the width occupied by its content. By adding margin, padding, and borders, the width the element occupies in the page increases. The following examples show different ways to specify values for width and its effect on the page:

  1. An overfull box
  2. A full box
  3. Speciyfing width as a percentage

Aligning Text

This short example shows text aligned center and right. Resize the browser window to notice how the text flows to always fill the space. Use Inspector to set the body width to 600px and give it a border (enter the styles in the rule for element.style). Now try to resize the browser window again. What has changed?

Centering a list

Given this example where the body is centered with text-align, try to enter the needed CSS rules for ol, so that the list is centered and the numbers are close to the list items. It should look like this:

capital cities screenshot

Quiz Question Nr. 12

If you'd like visited links to be green, unvisited links to be blue, and links that the mouse is over to be red, you would do ...

  1.                   a:visited { color: green }
                      a:unvisited { color: blue }
                      a:mouseover { color: red }
                      
  2.                   a:link { color: blue }
                      a:visited { color: green }
                      a:hover { color: red }
                      
  3.                   a:hover { color: red }
                      a:visited { color: green }
                      a:link { color: blue }
                      
  4.                   a:active { color: green }
                      a:link { color: blue }
                      a:hover { color: red }
                      

Note that it matters what order you do these in. See CSS Links

Solutions

Will be posted later, visit again after .

© Wellesley College Computer Science Staff. This work is licensed under a Creative Commons License. Date Modified: Saturday, 06-Feb-2016 10:19:01 EST