CSS

We'll begin class with catching up with some the stuff from last time

Goals

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

  1. Write a CSS style rule with a tag selector, property and value
  2. Understand and use the difference among external, document, and inline style sheets.
  3. Be able to use browser fonts and web fonts.
  4. Explain and use container tags like DIV and SPAN.
  5. Explain and use ID and CLASS as selectors.

CSS Overview

The goal of CSS is to take over all the formatting of a website, which used to be done with now-obsolete HTML tags like <center>. Modern websites are formatted using CSS, so that the same content (HTML) might be rendered different ways depending on the device (laptop, notebook, phone) and the CSS rules. A tour de force example of that is csszengarden.com, in which the same content is rendered in shockingly different ways.

In short, if you find yourself wanting to change the appearance of your page by changing the HTML, you're thinking about it the wrong way. On the other hand, we will sometime have to modify the HTML in order to provide the containers and hooks to allow the CSS to work, including classes and IDs.

The basics of CSS are:

  • A set of rules
  • Each rule has a selector that defines what elements the rule applies to. For example, paragraphs or hyperlinks.
  • Each rule has a set of property-value pairs that set the style of the elements. For example, color, font, or size.
  • If more than one set of rules applies to an element, there are formulas and principles to determine which style is applied.

Quiz Question Nr. 1

If all of the following are specifying the same property value for an element, which one wins?

  1. external style file

  2. document level style tag

  3. inline style attribute

  4. It's up to the user

Quiz Question Nr. 2

Why should we use external style files?

  1. an external style file can apply to all the pages of a site

  2. an external style file gives you one place to specify a rule

  3. an external style file reduces redundancy

  4. all of the above

In addition, an external style file can be cached by a browser, which can speed up the loading of subsequent pages.

Quiz Question Nr. 3

How do we specify an external style file? 

  1.   <style src="mystyle.css">

  2.   <link rel="stylesheet" href="mystyle.css">

  3.   <a rel="stylesheet" href="mystyle.css">

  4.   <external rel="stylesheet" src="mystyle.css">

Quiz Question Nr. 4

How do we specify a document level style element? 

  1.   <style>
  </style>

  2.   <style type="text/css">
  </style>

  3.   <link rel="stylesheet">
  </link>

  4.   <document>
  </document>

Quiz Question Nr. 5

How do we specify an inline rule to make an emphasis tag be bold? 

  1.   This is <em style="font-weight: bold">really</em> important.

  2.   This is <em class="font-weight: bold">really</em> important.

  3.   This is <em class="font-style: bold">really</em> important.

  4.   This is <em style="font-style: bold">really</em> important.

Exercise on CSS

Using this jsfiddle on cascading CSS, which has an external CSS file, do the following steps. Note that you can type your CSS into the box at the upper right; that's the same as typing it into a <style> element.

  1. turn the P text back to black
  2. make the em text be red, and
  3. the em text in the first LI be bold and purple.
  4. make the LI text be green. (This one is tricky.)

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

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

In the exercise, we also 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. 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. 8

The difference between ID and CLASS is:

  1. only one thing can have a particular CLASS

  2. only one thing can have a particular ID

  3. they are interchangeable

  4. IDs avoid class-discrimination

Quiz Question Nr. 9

Which is most likely to have be ID rather than a class:

  1. important

  2. best

  3. optional

  4. highlight

Quiz Question Nr. 10

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

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?

Nested Selectors

One of the many powerful ways to use CSS selectors is to use more than one, namely nested 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. 12

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

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}

Fonts

Let's turn to fonts next.

Quiz Question Nr. 14

Which of the following is not a font property?

  1. style

  2. weight

  3. height

  4. family

  5. size

  6. color

Quiz Question Nr. 15

Fonts can be difficult to work with because

  1. They have to be on your computer

  2. They have to be on the user's computer

  3. They have to be on the server

  4. All of the above

CSS Exercise

Using this JSfiddle on CSS, do the following:

  1. make the h3 elements green and underlined
  2. make the em elements red
  3. The result might look like American Lit after
  4. Explain the appearance of The Romantic Movement
  5. make the text of the intro DIV be 24px.
  6. Make the background color of that same DIV be wheat.
  7. The result might look like American Lit after 2
  8. Make the background color of each week be khaki.
  9. Using that same HTML page, make optionaloptional stuff gray
  10. What is the color of Song of Myself?
  11. Can you think of a way to fix that?
  12. The result might look like American Lit after 3
  13. What would be better markup for the author photos?
  14. Implement that.
  15. The result might look like American Lit after 4

Summary

We hope that after these activities you have a good understanding of:

  • The scope of CSS rules: which one will apply.
  • Why you should (usually) use external style files.
  • How to correctly write a CSS rule.
  • The difference between DIV and SPAN, and when to use each.
  • The difference between CLASS and ID, and when to use each.
  • Basic concepts of fonts.

Solutions

Will be posted later, visit again after .