Notes for Class No. 6

Working with CSS Selectors (continued)

Thursday, September 17, 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

I am planning a short quiz on CSS selectors on either Tuesday or Thursday of next week

The following people still have not made the corrections on Piazza that I requested

Glen Anderson — you signed up with only your first name in lowercase
Michael Bejaniance — you signed up with only your first name
Bill Bobos — you signed up with only your first name in lowercase
Martin Rudzki — you haven’t signed up at all

Class Notes

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

Finishing Up Our Discussion of Basic CSS Selectors

Review from last class ...

Attribute Selectors

img[title] —> all img tags that have a title element

input[type="button"] —> all buttons

a[href="http://jesseheines.com"] —> all a[nchor] tags that link to the default page on jesseheines.com

a[href^="http://jesseheines.com"] —> all a[nchor] tags that link to any page on jesseheines.com

that is, any page whose URL begins with http://jesseheines.com

note that http:// is different from https://

to address this issue you need two selectors

filter operators

= means equals (exactly the same)

^= means begins with

$= means ends with

*= means contains anywhere within the atttribute value

New material begins here ...

Child Selectors

:first-child
:last-child
:nth-child

:nth-child(odd)
:nth-child(even)
:nth-child(Nn+S) where N is the repeat factor and S is the starting child

:nth-child(5n) —> every 5th child, starting at the 1st (by default)

:nth-child(2n+3) —> every 2nd child, starting at the 3rd

:nth-child(10) —> the 10th child

https://css-tricks.com/useful-nth-child-recipies/

Additional Selector Operators

> means immediate descendents, which is very useful with nested lists

example: ul.toplevel > li

what does this mean in plain English?

+ means sibling, that is directly following

example: h2 + p

what does this mean in plain English?

and please note that there are even more pseudo selectors and more being added, but these are the basic ones

Formatting Text (CSS:TMM, Chapter 6)

CSS Properties Reference

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

Review of 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 ) ;

Font Sizing

units: ems, exs, pixels, percentages, picas, points, inches, centimeters, millimeters
pluses and minuses of each method
- pixels are fixed, percentages are not
relative to the “base text size”
- 1em = 100% = base text size
- 2em = 200% = 2 * base text size

Words and Letters

italics
boldface
- note that CSS allows more than HTML’s “bold” and “not bold”
- numerical gradations of 100-900
transformations
- text-transform: uppercase ;
- font-variant: small-caps ;
decorations

cartoon courtesy of xkcd.com
http://xkcd.com/1015
found by Fall 2012 student Erik Cowley
- underline
- overline
- “But just because you can add these not-so-decorative decorations to text, doesn’t mean you should.” (top of p. 126, 2nd edition)
spacing
- letter-spacing: -1px ;
- word-spacing: 2px ;
- “kerning”

Kerning Demonstration

Paragraph Spacing

line spacing = “leading”
- CSS property is line-height
normal line height is 120% — why?
“it’s not the percentage that’s inherited; it’s the calculated line height.” (near bottom of p. 129)
alignment: text-align
- left, right, justify, center

“ragged” vs. justified — readability considerations

indentation: text-indent
margins
- TRBL = “top right bottom left”
text formatting shorthand — the font property (p. 131)
- lets you combine the following properties into a single line
  - font-style
  - font-variant
  - font-weight
  - font-size
  - line-height
  - font-family
- example: font: italic bold small-caps 18px/150% Arial,Helvetica, sans-serif;
  - creates bold, italicized type in small caps, using 18px Arial (or Helvetica or sans-serif) with a line height of 150 percent
- rules:
  - you don’t have to include every one of these properties, but you must include the font size and font family
  - use a single space between each property value
  - use a comma only to separate fonts in a list like this: Arial, Helvetica, sans-serif
  - when specifying the line height, add a slash after the font size followed by the line-height value, like this: 1.5em/150% or 24px/37px
  - the last two properties must be font-size (or fontsize/line-height) followed by font-family, in that order
    - all the other properties may be written in any order
    - example: both of the following are the same
      font: italic bold small-caps 1.5em Arial; font: bold small-caps italic 1.5em Arial;
  - omitting a value from the list is the same as setting that value to normal

Pseudo-Elements

:first-letter
:first-line

Lists

list-style-type

[figure source: CSS: The Missing Manual, by David Sawyer McFarland, Fig. 6-10, p. 134]

many other types available, including list-style-type: none

list-style-position
- outside
- inside
list-style-image
- url( path/graphicfile.ext )
using span instead of applying a style to an li tag

Note that when manipulating class names in JavaScript, the class name property is in camel case: className

this is called the “IDL” property name
IDL stands for the Object Management Group’s “Interface Definition Language”

This concludes our introduction to CSS

we will of course see more, but at this point you should have all the information you need to do Assignment No. 3
that assignment is due next Tuesday

Introduction to Git and GitHub

Please do the following before our next class, as we will use GitHub in a future assignment

install Git on your system from http://git-scm.com/ if you do not already have it installed
create a GitHub account at https://github.com/ if you do not already have one
- if you have a GitHub accound for your work, you might want to create another one just for this class
watch the screencast Introduction to GitHub and follow along by creating your own GitHub Pages site
- the GitHub repository created in the screencast is at https://github.com/curran/myPage
- the created page can be viewed at http://curran.github.io/myPage/
- note that these URLs are case-sensitive!
try to create a simple page in branch gh-pages that can be viewed from github.io

UMass Lowell Dept. of Computer Science

91.461 GUI Programming I

Fall 2015 Semester, Section 201

Prof. Jesse M. Heines