Working with Inspector

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?

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 ...

class

id

div

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:

only one thing can have a particular ID

only one thing can have a particular CLASS

they are interchangeable

IDs avoid class discrimination

Quiz Question Nr. 5

Which is most likely to use ID rather than CLASS:

important

best

optional

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?

optional { font-size: smaller; color: gray}

#optional { font-size: smaller; color: gray}

.optional { font-size: smaller; color: gray}

class=optional { font-size: smaller; color: gray}

Quiz Question Nr. 7

How would you apply that CSS rule to a paragraph?

<p id="optional">lorem ipsum</p>

<p style="optional">lorem ipsum</p>

<p class="optional">lorem ipsum</p>

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?

#disclaimer p { font-size: 5px; color: silver}

p .disclaimer { font-size: 5px; color: silver}

.disclaimer p { font-size: 5px; color: silver}

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?

a optional { text-decoration: none}

a .optional { text-decoration: none}

.optional a { text-decoration: none}

optional a { text-decoration: none}

Quiz Question Nr. 10

From outside to inside, a box (block) has

border, margins, padding

margins, padding, border

padding, margins, border

margins, border, padding

Quiz Question Nr. 11

The difference between margins and padding is...

indistinguishable if there's no border

padding has background color, margins don't

padding is measured in EM; margins in PX

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:

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:

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 ...

Solutions

Will be posted later, visit again after
.

Answers to quiz questions:

1. All of the above. Use whichever one you like best. I like "inspect element" best
2. B
3. B is best (unique), but A is possible (allows multiples)
4. A
5. B
6. C
7. C
8. A
9. C
10. D
11. B
12. B (:active has to be last, :hover after :link and :visited)
13.