UMass Lowell Dept. of Computer Science
91.461 GUI Programming I
Fall 2015 Semester, Section 201
Prof. Jesse M. Heines
Notes for Class No. 10
CSS Inheritance, Managing the Cascade, and Two-Column Layouts, plus
Introduction to JavaScript
Thursday, October 1, 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
Class Notes
Related reading for this class: JS&jQ:TMM Ch. 1-3
CSS Inheritance (CSS:TMM Ch. 4)
Classic inheritance vs. CSS inheritance
- derivation vs. encapsulation (nesting)
- CSS tags inherit properties from tags that surround them
- however, not all CSS properties are inherited, e.g., the
border property
General rules for CSS inheritance (CSS:TMM pp. 83-85/95-97)
- properties that affect the placement of elements on a page or the margins, background colors, or borders of elements are *not* inherited
- unless you do a CSS reset or specifically style elements with built-in styles like headers and anchors, browsers will use their own built-in styles on those elements
- when styles conflict, the more specific one wins out
CSS:TMM Appendix A lists all CSS properties and indicates which get inherited and which do not starting on page 463/563
Managing the Cascade (CSS:TMM Ch. 5)
The previous chapter and exercise introduced the cascade, this one goes into more detail
- these issues are not generally encountered when using CSS selectors in jQuery to create and manipulate elements
- however, they can cause major headaches when working with page layout, to which McFarland devotes three entire chapters (11-13) in the 2nd edition of his book, which has grown to four chapters (12-15) in the 3rd edition
- we most likely will not go that far in these sessions unless people specifically want to do so
As you saw in the previous exercise, inherited styles accumulate
- more than one style can apply to any specific element
- for most elements that do *not* have built-in styles, an element will have the style of the element(s) in which it is embedded (nested)
- the issue here is what happens when styles collide, for example, when two different ancestors say the color should be two different colors
Inheritance rules
- the nearest ancestor wins
- the style of the ancestor element that is physically closest to the element in question is the one that will dominate
- for example, the
body style might specifies the Verdana font, but a div style within the body might specify the Times Roman font
- any directly applied style will override any inherited style
- note that “directly applied” need not be
<tag style="...">
- it could be a style applied through an id or class selector, such as
<tag id="..." class="...">
Specificity (CSS:TMM p. 96/108)
- the more specific a style, the higher its priority in being applied
- a tag selector is worth 1 point
- a class selector is worth 10 points
- an ID selector is worth 100 points
- an inline style is work 1,000 points
- this rule can be overridden by adding
!important at the end of a style
- however, this totally breaks the cascade, so it should only be used in dire situations
[figure source: CSS: The Missing Manual, by David Sawyer McFarland, Fig. 5-3, p. 97/109]
- inherited styles have no specificity
- therefore, directly applied styles always win
Other issues
- “Any external style sheets attached with the
@import rule have to appear before internal styles within a <style> tag.” (p. 98/110)
- added in the 3rd edition: “... and before any styles in an external style sheet.” (p. 110, 3rd ed.)
- “You can also fine-tune your design by selectively overriding styles on certain pages.” (p. 100/113)
It is impossible to memorize all these rules
- you have to simply gain familiarity with them as you work with them
- that said, it is worthwhile to review them once or twice and “put them in the back of our mind” so that you have some hope of understanding what’s going on when you encounter them
- this is an example of the underlying computer science that artists and web designers typically don’t worry about
- but it is our job to make pages efficient so that they
- display properly in as many browsers as possible without alteration or conditional code
- are maintainable when the company changes direction or the designers simply change their minds
- contain reusable code so that we can get home for dinner at a reasonable hour
Two-Column Layouts
Textbook Figures
Figure 13-2. Creating a two-column layout is a simple matter of floating a <div> tag to the left (top). To make a sidebar move from the left to right side of the page (middle), just change the sidebar’s CSS styling to float: right. You don’t need to make any other changes to your CSS or HTML.
Figure 13-3. A three-column design uses the same concepts used to create a two-column design. In this case, you float both the left and right sidebars and add both left and right margins to the center column. The lefthand diagram shows the order of the HTML; the right side shows what the web page looks like.
Figure 13-4. There’s more than one way to float a page. CSS’s flexibility provides many ways to create a multicolumn layout. Using different methods of floating, you can easily change the source order of the HTML for the page, as you can see in the diagrams at left. Right-side diagrams represent final web page layout.
Introduction to JavaScript
A Bit of History
- JavaScript and Java
- the roles of Netscape, Microsoft, Sun, and the W3C
- who are the people at the right?
Client-side computing
- where JavaScript runs
- how JavaScript works
- what you need to know
- the JavaScript language
- relationship to Java — really very little!
- the browser DOM = Document Object Model
- this is considerably more involved than learning the language
- the browser event model
- this is perhaps the most difficult aspect because it involves some
new concepts of how users interact with computers
- putting things together
- for example, validating forms
- we will see many additional examples, such as generating lists dynamically
- using cookies
Basic structure and use
- the
script tag
- the
type="text/javascript" attribute
- MIME type = “Multipurpose Internet Mail Extensions”
- MIME type references
- all JavaScript in a file forms a single program entity
- considerations for old browsers — possibly not worth
the bother today
- no
main function, executes in-line with HTML
- triggering with the
onLoad property of the BODY tag
- this is now better done with jQuery’s (and other JavaScript libraries’) “document ready” function (syntax differs by library)
- using the
javascript: protocol in your browser’s address
field
