Notes for Class No. 5

Working with CSS Selectors

Tuesday, September 15, 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

Reminder: Assignment No. 3 is now posted

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

Modern JavaScript Meetup — Wednesday evening, September 30th, 6:00-8:00 PM, Wannalancit Mills, pizza served

http://www.meetup.com/modern-javascript/events/223289919/
completely free
two presentations this month
- HTML5 & JavaScript End User Monitoring
  - Rob Ide and David DiGangi
  - The explosion of JavaScript frameworks and the diversity of devices and browser types to support make it difficult to impossible to determine how your application is behaving in the wild. This presentation will focus on using the AppDynamics’ End User Monitoring to monitor how HTML5 and JavaScript are performing and behaving in real world deployments.
- An Overview of GruntJS
  - Gary Chamberlain
  - Use Grunt to automate just about anything with a minimum of effort. The less work you have to do when performing repetitive tasks like minification, compilation, unit testing, linting, etc, the easier your job becomes. After you've configured it through a Gruntfile, a task runner can do most of that mundane work for you—and your team—with basically zero effort.

The following people do not appear to have signed up on Piazza

Angel (Z) Calcano
Martin Rudzki

The following people need to go into Piazza and change their name to their full first and last names, properly capitalized

Glen Anderson
Michael Bejaniance
Bill Bobos
Geoff Klapproth

Websites for experimenting with CSS mentioned at the very end of our last class

I really can’t believe this, but all 51 of you registered for this course have completed in Assignment No. 2 on time

this has never happened in any other course I have taught in my 31 years at UMass Lowell

Class Notes

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

Finishing Up Our Introduction to CSS

We moved pretty quickly through the introductory material, which is great

But just to emphasize a couple of things ...

CSS Comments

any file you hand in for an assignment that you created must be fully documented, even if it’s above and beyond the program requirements
- documentation is a habit that you must acquire
CSS comments must be 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

[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

Review Questions

what are styles?
what is the difference between inheritance and cascading?
- hint #1: think of IS_A vs. HAS_A relationships
- hint #2: think of how one gets to the front of a line
what is the relationship between HTML and CSS?
is CSS applied to elements on a page if they are generated using JavaScript?

Revisiting CSS Reset

A CSS reset removes the built-in renditioning for common HTML elements allowing you to start with a “clean slate“

you can then define all elements’ rendition yourself without fear of anything being inherited
bare-bones HTML4 CSS reset — CSS:TMM (2nd edition), p. 102

html, body, h1, h2, h3, h4, h5, h6, p, ol, ul, li, pre, code, address, variable, form, fieldset, blockquote { padding: 0; margin: 0; font-size: 100%; font-weight: normal; } ol { margin-left: 1.4em; list-style: decimal; } ul { margin-left: 1.4em; list-style:square; } img { border: 0; }

bare-bones HTML5 CSS3 reset — CSS3:TMM (3rd edition), p. 116

html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; vertical-align: baseline; } article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { line-height: 1.2; } ol { padding-left: 1.4em; list-style: decimal; } ul { padding-left: 1.4em list-style: square; } table { border-collapse: collapse; border-spacing: 0; }

CSS Rest from YUI (Yahoo! User Interface)

<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.6.0/build/cssreset/cssreset-min.css">

see http://yuilibrary.com/yui/docs/cssreset/ for further information

For students who already know a lot of CSS

see An Advanced Guide to HTML and CSS by Shay Howe
- http://learn.shayhowe.com/advanced-html-css
- full text as a 171-page PDF
Google "media queries” and “responsive web design” and explore those topics

Basic CSS Selectors

Tag (or Type or Element) Selectors

McFarland classifies these as providing “page-wide styling”

Code

<pre>
...
<em>18</em>  <em>// generic publisher object</em>
<em>19</em>  var publisher = {
<em>20</em>  
<em>21</em>    subscribers: {  <em>// private data member</em>
<em>22</em>      any: []       <em>// array of subscribers' callback functions that will be</em>
<em>23</em>    },              <em>//    called for 'any' event generated by the publisher</em>
...
</pre>

CSS

/* to color code comments */
pre em {  /* note that only em elements inside pre elements are affected */
  color: #FF9900 ;
}

Output

18  // generic publisher object
19  var publisher = {
20  
21    subscribers: {  // private data member
22      any: []       // array of subscribers' callback functions that will be
23    },              //    called for 'any' event generated by the publisher

[For those interested: I have written a function that uses this type of selector combined with a regular expression to automatically format all the line numbers within <em>...</em> tags when a page is loaded. That function can be found here.]

note that — unless qualified — tag selectors select all tags of the specified type on a page
there are a number of ways to qualify selectors to be more precise, as we will see

ID Selectors

McFarland classifies these as “specific page element” selectors

Code

<p id="message">Please enable the console to see the output of this page.</p>

CSS

#message {
  font-variant: small-caps ;
  font-weight: bold ;
  color: #0C0 ;
}

Output

Please enable the console to see the output of this page.

IDs provide a direct way to qualify a selection: by its ID
this selector is analogous to the JavaScript getElementById() method
IDs should be unique on a page
- pages that contain the same ID for two elements won’t validate
ID selectors begin with a pound (or hash) sign (#)

Generic or Class Selectors

McFarland classifies these as providing “pinpoint control”
generic styles are ones that may be applied to almost any HTML start tag using the class attribute

<h2 class="arial">
  This is a level 2 heading in Arial.
</h2>

To define a generic style, precede its name with a dot in the style sheet

<style type="text/css">
  .arial { font-family: Arial }
</style>

To apply two generic styles simultaneously, separate their names with a space

<h2 class="arial italic">
  This level 2 is in Arial italics.
</h2>

One advantage of using generic styles rather than redefining the styles of basic tags is that the basic tag may be still be used with its default style if desired
Style names are not case-sensitive in HTML, but it is best to treat them as if they are so that you don’t make case mistakes when dealing with XML
To restrict generic styles to specific tags, specify both the tag and the class name, separated by a period with no embedded spaces
```
<style type="text/css">
  p.arial { font-family: Arial }
</style>
```

Code

<p class="example">2130 hours = 9:30 PM</p>

CSS

.example {
  font-family: monospace, sans-serif ;
  font-size: 12pt ;
  font-weight: bold ;
  color: blue ;
}

Output

2130 hours = 9:30 PM

CSS permits only letters, numbers, hyphens, and underscores in class names
all class selector names begin with a period (.)
the first character after the period must be a letter
class names are case-sensitive
remember that class names can apply to elements of different types
therefore, as noted above, you can qualify a specific type of element with a specific class using, for example,
- p.example
- note that there must not be a space between the tag and class names

Styling groups of tags

h1, h2, h3, h4, h5, h6 { color: #8B0000; }

the idea is to set all general styles first, and then refine those with subsequent rules
this implies that the order of your rules is important, which indeed it is!
rules override each other, which is part of the cascade
note the comma delimiters in the above property list!

Descendent selectors

pre em {
  color: #FF6600;
}

for styling tags within tags
remember that the above example will select every em descendent at any level under a pre tag
note the space delimiters in the above property list!

Combining the two techniques above

code em, pre em {
  color: #FF6600 ;
}

Pseudo selectors

almost always apply to basic selectors
discussed on Piazza
```
a:link
a:visited
a:active
a:hover
```
to style parts of paragraphs = pseudo classes
```
p:first-letter
p:first-line
```
- however, in CSS3, these are now introduced with double colons (::) to differentiate them from pseudo-elements
  - see note at the bottom of page 69 in the McFarland text
```
p::first-letter
p::first-line
```
other pseudo-classes
```
:focus
:hover
:not()
```
pseudo-elements
```
:before
:after
::selection (CSS3)
```

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

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

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”

UMass Lowell Dept. of Computer Science

91.461 GUI Programming I

Fall 2015 Semester, Section 201

Prof. Jesse M. Heines

Notes for Class No. 5

Working with CSS Selectors

Tuesday, September 15, 2015

Handouts and Materials

Openings / Announcements / Reminders

Class Notes

Finishing Up Our Introduction to CSS

CSS Comments

CSS Rules

Review Questions

Revisiting CSS Reset

Basic CSS Selectors

Tag (or Type or Element) Selectors

ID Selectors

Generic or Class Selectors

Styling groups of tags

Combining the two techniques above

Pseudo selectors

Attribute Selectors

Child Selectors

Additional Selector Operators

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

Review of Basic Concepts