Notes for Class No. 4

Introduction to CSS Structure and Syntax

Thursday, September 10, 2015

A video of this class is (or will be) posted at: http://echo360.uml.edu/heines201516/guiprogramming1.html

Handouts and Materials

Openings / Announcements / Reminders

Assignment No. 3 is now posted

I will not be printing and handing this out in class
access it online

Class Notes

Related reading for this class: CSS3:TMM Ch. 3

HTML5 and CSS Learning Resources

http://www.littlewebhut.com/html5/

Part 1 - The Basics (7:16)
Part 2 - Text (5:51)
Part 3 - Images and Hyperlinks (5:26)
Part 4 - Audio and Video (6:38)
Part 5 - New Semantic Elements (8:09)
Part 6 - CSS Page Layout (12:54)

http://www.littlewebhut.com/css/tutorials/

Also, there is starting to be a significant level of communication on Piazza

be sure to read Curran Kelleher’s postings
Curran does data visualizations in JavaScript for Alpine Data Labs (http://alpinenow.com/) in San Francisco, CA
he was the TA for this course last year, so he knows this course well
Google him to learn more

Critical concepts to remember

HTML = structure
CSS = rendition (we’ll discuss this concept in detail)

Introduction to CSS

Continuing from last class...

What are styles?

a style is the set of characteristics that define how an object is rendered
- font size, color, weight
- text justification
- margins and borders
- page position

New material begins here...

most (but not all) HTML tags have built-in styles
these styles can be changed locally for individual objects using the style attribute
- these are referred to as inline styles
they can be changed globally for all objects of a specific type using style sheets
style sheets can also define generic classes of styles that can be applied to any type of object
styles can be combined and inherit from one another in a hierarchical manner
- inheritance in this manner is known as cascading
- this is where the term Cascading Style Sheets (CSS) comes from

Purpose: To define the rendering of HTML objects

rendering is also referred to as presentation semantics, which are the look and formatting of objects (Wikipedia)
CSS separates document content from presentation
much more control is provided by CSS than is possible with HTML attributes
one can also display a page differently based on screen size, which is the essence of responsive web design for mobile and other devices

The C of CSS stands for cascade

this 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)
style sheets are collections of rules

Assignment No. 3 “What You Are To Do”

Read the first two chapters of the textbook carefully and Chapter 3 up to at least the middle of page 68 (page 57 in the 2nd edition). Then read Chapter 6. I strongly advise you to do the tutorial that begins on page 178 (page 138 in the 2nd edition), at least through page 188 (page 144 in the 2nd edition). It will really help you learn.
To solidify your knowledge, watch relevant parts of the CSS Tutorials on http://www.littlewebhut.com/css/.

The important things to focus on in both the reading and the videos are the numerous techniques for specifying CSS selectors.
- This is what we will be working on in class.
- Writing CSS rules for things like colors and text styles is relatively easy, but using selectors to specify the precise objects you want to affect is not.
- Also, note that jQuery and now even the latest version of JavaScript use the exact same selector mechanism, so it is absolutely critical that you master these techniques.
Redo the page that you created for Assignment No. 2 or create a totally new page from scratch. The page you choose must be “rich” enough to provide you with ample opportunities to style elements. You may even wish to use a page created by someone else and add styling to that page. Of course, if you choose a page that you did not initially create yourself, identify its source and author (or company if you cannot find an author named).

Using the techniques discussed in the textbook and videos and in class, style the text on the page you have chosen as you see fit. Explore the various CSS text properties and their possible values discussed in the book and listed at http://www.w3schools.com/cssref/default.asp#text. If you have a friend who is artistic, you are welcome to ask him or her for help, of course naming that person in your code documentation to give him or her credit for his or her input.

Important Note: Do not go overboard. There is so much that you can do with CSS, but for this assignment you are to concentrate on formatting your text. As always, if you already have experience with CSS and want to go farther, that’s fine, but we will mostly be grading your text formatting.

Inline Styles vs. Internal vs. External Style Sheets

Advantages and disadvantages of each

development vs. production
sharing

Inline Styles

applied directly to HTML elements via attributes

<p style="color: red">This is red text.</p>

This is red text.

multiple styles can be applied to the same HTML element, separated by semi-colons

<p style="color: red ; font-style: italic ; text-decoration: underline">This is red, italic, underlined text.</p>

This is red, italic, underlined text.

Internal Style Sheets

defined in the <head> section
should go before any JavaScript, as the JavaScript code may use the CSS

<style type="text/css">
... rules go here ...
</style>

<style type="text/css">
p.riu { /* this rule applies to all p tags whose class is riu (red, italic, underline) */ color: red ; font-style: italic ; text-decoration: underline }
</style>

External Style Sheets

contain rules only, not <style> tags
linking to external style sheets

<link rel="stylesheet" type="text/css" href="../css/LectureNotes.css">

<style type="text/css"> @import url( ../css/LectureNotes.css ) ; /* note that there are no quotes here */ </style>

p.riu { /* this rule applies to all p tags whose class is riu (red, italic, underline) */ color: red ; font-style: italic ; text-decoration: underline }

A Comment on Comments

CSS comments are enclosed in C-style /* and */ symbols
managing the cascade very quickly gets very complex
I know of no way to make styles “local”
therefore, it is critical to write precise selectors (the same is true for jQuery) ...
... and it is critical to document complex selector specifications

CSS Rules

The following material is covered in David Sawyer McFarland’s JavaScript & jQuery: The Missing Manual book (Chapter 4), but it is covered in much more detail in Chapter 3 of his CSS: The Missing Manual book.

[figure source: CSS: The Missing Manual by David Sawyer McFarland, Figure 2-2, 2nd edition: page 33, 3rd edition: p. 38]

each style sheet entry (as above) is called a rule

Organizing the CSS on Your Website

CSS files are typically put in a subdirectory of your root directory named css
scripts are typically put in a subdirectory of your root directory named scripts or js (for JavaScript)

Formatting Text (CSS:TMM, Chapter 6)

CSS Properties Reference

http://w3schools.com/cssref/default.asp

Basic Concepts

font families
serifed vs. non-serifed fonts
font groups and font mapping
color
- RGB values: 0-255
- hex notation: #rrggbb
- rgb method: rgb( pct or nnn ) ;

Question to Answer for Next Class

What is meant by a “CSS reset”?

please post your responses as follow-ups to the note I posted on Piazza

UMass Lowell Dept. of Computer Science

91.461 GUI Programming I

Fall 2015 Semester, Section 201

Prof. Jesse M. Heines