CSS

We'll start by re-viewing URLs.

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.

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.

CSS Zen Garden

A tour de force example of that is csszengarden.com, in which the same content is rendered in shockingly different ways. We'll take a few minutes to view a few examples and look at the source. If you use Firefox to view it, you can easily turn off the CSS and see what it looks like plain.

Next time, we'll learn about selecting elements with ID and CLASS, and adding background images.

CSS Basics

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, text-decoration, font-family, or font-size.
• If more than one set of rules applies to an element, there are formulas and principles to determine which style is applied. In general, the more specific selector wins.

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 (though this can be a hassle during development).

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 set of document-level CSS rules?

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 of the paragraph within be green. (This one is tricky, but will make sense.)

Fonts

Let's turn to fonts next.

• A nice way to control the appearance of a page.
• Built-in fonts are pretty limited
• Web fonts are a nice addition, but another source of errors. We won't require them, but you're welcome to use them.

Quiz Question Nr. 6

Which of the following is not a font property?

1. style

2. weight

3. height

4. family

5. size

6. color

Quiz Question Nr. 7

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

Exercise

Start up a new jsfiddle and put in some HTML for a demo sentence, like this:

The quick brown fox jumps over the lazy dog.

(or any other text you like). Feel free to copy/paste that sentence. Then:

1. Change the font for the demo sentence to fantasy
2. Change its size to 24pt. Change it to 24px. Is there any difference?
3. Make it bold
4. Make it italics
5. Make it green
6. Can you make it underlined?

You're encouraged to use jsfiddle.net for your own experiments. It's really nice to be able to play around with stuff. There's no need to save if you just want to test something!

If we have extra time, try to use a Google Font in the jsfiddle!

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.
• Basic concepts of fonts.
• How to use jsfiddle.net

Usability

• How easy it is to use a webpage or website
• Usability vs aesthetics
  • Aesthetics come from the designer/artist perspective
  • Usability comes from the user perspective
  • Example: Restaurant website with large pictures of foods but no obvious link to a menu

• Their values and characteristics
  • Example: A webpage for nursing home residents should have larger text and should be extra accessible.
• What they want to do (or information they want to find)
  • The things they do most often should be the most obvious and fastest to do
• What they expect
  • Standard layout in all webpages (logo in upper left, visited links a different color, etc.)
  • Internal consistency across webpages within a website
• How they browse (Hint: People skim.)
  • Important stuff goes first
  • Focal points through colors, fonts, spacing, etc.
  • Text contrast

Solutions

Will be posted later, visit again after .

    1. C
    2. D
    3. B
    4. A or B
    5. A
    6. C but could also use F, since it doesn't start with "font-"
    7. B
  

p {
    font-family: fantasy;
    font-size: 24px;
    font-weight: bold;
    font-style: italic;
    color: green;
}