,

, …
• these are “logical tags”
• browsers decide how to render them
Although a few are not: ,
• these are “physical tags”
• browsers have no choice
Generally speaking
• the browser, not the web author, controls layout
• browsers sometimes behave differently
But appearance is important!
CS 200 Winter 2020
33
TheWeb

Controlling HTML Layout
The response
• abusing tables and frames
• new tags and attributes
• proprietary tags and attributes
• postscript and pdf (Adobe’s “Portable Document Format”) via “plugins”
Wouldn’t it be nice …
• if HTML had USER-DEFINED [named] styles?
• like those we find in word processors?
• that authors could use to control layout?
CS 200 Winter 2020
34
TheWeb

Cascading Style Sheets
Style definitions may appear at the beginning of a web page There are five style definitions in this example
• the first specifies the default font to be used
• the second and third attach default “properties” (ie attributes) to and

• the last two define property bundles that can be applied to

, by using classes
These are called “selectors”



}
}
} }


This paragraph will be centered.


This paragraph will be centered and bold.




This paragraph will be centered and italic.




This word will be green.






CS 200 Winter 2020
35
TheWeb

External CSS files
Or … style definitions may be EXTERNAL to a web page
• so that multiple web pages can use them
• much more important for HTML than for word processing
• An example style sheet file
 named simple.css
• An example html file
 that uses simple.css
BODY { FONT-FAMILY: ‘Myriad Pro’, sans-serif }
SPAN { COLOR: green }
P { TEXT-ALIGN: center }
P.A { FONT-WEIGHT: bold }
P.B { FONT-STYLE: italic }







This paragraph will be centered.




This paragraph will be centered and bold.




This paragraph will be centered and italic.




This word will be green.




Notice that all four paragraphs are centered and in Myriad Pro
• The contents of

…

and

…

“inherit” the properties of

,
 so they don’t have to explicitly set them
• Inner elements inherit properties from outer elements containing them (when that makes sense)
 — eg the …

inherit Myriad Pro from the … in which they appear
CS 200 Winter 2020
36
TheWeb

A Larger Example – Task B from the Winter 98 Lab Exam
T
CS 200 Winter 2020
37
TheWeb

LabExam.css
Note the period that begins each style name
•Block {
font-family: “Palatino, serif”;
•
• such styles can be used in any tag (if they make sense…)


is (effectively) a replacement for


• •
}
•Item1 {
these are called classes
with no default properties
(some properties of built-in tags like

can’t be over-ridden) [still?]
font-family: “Palatino, serif”;
margin-top: 5px;
•

and

are examples of “block level tags” or elements
 (ie. they cause a line break)
is an “inline level tag” (aka an “inline element”) • with no built-in properties
•Footnote {font-family: “Palatino, serif”; font-size: 10pt;
line-height: 13px;
margin-top: 5px;
}
•Emphasize {
•
• , , and are other examples
“STYLE” is used to set CSS attributes for a particular tag only
• • • •
Block level tags generate automatic line breaks before & after.
 Inline tags do not; one can follow another on the same line.
}•Shout { }
font-style: italic;
font-weight: bold;
does not cause a line break
line-height: 15px;
margin-top: 7px;
font-family: “Palatino, serif”;
line-height: 15px;
margin-top: 5px;
margin-left: 25px;
}
•Item2 {
}
eg.

blah, blah, blah…

eg.

good stuff

eg.

clear desk

eg. Good work!
CS 200 Winter 2020
38
TheWeb

TaskB.html — the “body” part of the web page (1)
T









Sample Lab Examp – Task B






This page is best displayed with • • •






To use computers effectively it is important
•••






The problem.
As a teacher, you often want • • •






The solution.
You have a FileMaker table • • •



CS 200 Winter 2020
39
TheWeb

TaskB.html — the “body” part of the web page (2)




Password-protected demonstration solutions • • •






Demo Course Grades.
When the Do It! button on the Choose layout • • •






Demo Make Histograms.
Click the Get Data button in any • • •






The charts in By 5 and By 10 can • • •






You are to duplicate the behaviour • • •






(The relative weight of important pieces • • •


•••
CS 200 Winter 2020
40
TheWeb

Another Example, from “Eric Meyer on CSS”
CS 200 Winter 2020
41
TheWeb
http://jcbserver.uwaterloo.ca/cs200/ericMeyer/ericMeyer.html

T
The Style Sheet
body {
background:
div#p2 {
margin:
}
div#menu {
float:
width:
padding:
margin:
border:
background:
}
div#menu a {
display:
text-align:
padding:
rgb(153,102,51);
black;
font-family: ‘Myriad Pro’, sans-serif;
0 10em 0 2em;
right;
5em;
0;
0 -1.5em 0.25em 0.5em;
3px solid rgb(50,50,175);
white;
block;
center;
0.2em 0.5em 0.2em 0.5em;
0 11em 0 2em;
0.2em 0 0.5em 0;
center;
color:
}
div•wrap { background:
color:
margin: }
p{
rgb(251,233,198);
rgb(122,74,26);
0 2em;
0;
0.25em 1em 0.25em 1em;
1.25em;
120%;
margin:
padding:
text-indent:
line-height:
0 ≤ r, g, b ≤ 255
}}
h1, h2 {
margin:
padding: }
div#p1 {
margin:
}
0;
0.25em 0.5em 0.25em 0.5em;
0 2em 0 10em;
div#footer {
margin:
}
padding:
text-align:
font-style: italic;
color:
rgb(128,128,128);
CSS for

…

a colour name
top, right, bottom, left
top, right, bottom, left
CS 200 Winter 2020
42
TheWeb

What we’ve seen p { • • • }
p.name p#name
sets attributes for all

tags
sets attributes for all

tags sets attributes for the only

tag
There are a variety of useful selectors we haven’t discussed, including
h1, h2, h3 { • • • }
p[title] { • • • } p[title=”important”] { • • • } h1 > strong { • • • }
h1 + p { • • • }
tr > td:first-child
grouped selectors (same attributes for multiple tags)
attributes for all tags

(ie

tags having a title attribute)
attributes for all tags

attributes for appearing “immediately” within an


 eg

This is very important.

attributes for any

that immediately follows an



eg

Section A

For this para.

But not this one.

attributes for

when it is the first child of a



eg

matches this but not this

Other Selectors
and various combinations of these.
Effectively, they do “pattern matching.”
See Chapter 2 of “CSS The Definitive Guide” if you’re curious.
(You’re not expected to memorize these for CS 200—this is useful “read and recall [someday] info”)
CS 200 Winter 2020
43
TheWeb








much room to think

Sometimes I find myself • • •

I suppose it’s the taste • • •

a fun guy

stories
poems
art

Good evening, my name is Rootsy • • •

Adapted from “Eric Meyer On CSS,”
by Eric Meyer, © 2002.

See www.newriders.com &
www.ericmeyeroncss.com.



The HTML
Notice that attributes can come
 from more than one style definition
•
• •
eg from div.wrap {…} and div#p1 {…},
 applied to

when that happens, they’re merged
if there’s a conflict, “the more specific wins”
eg p1 over wrap because
 only one tag can have id=p1
CS 200 Winter 2020
44
TheWeb

Classes vs. IDs
Classes
• can be used any number of times
• defined like:
.red {
color: red;
}
• the . indicates that it’s a class
• this can now be applied to other styles
• eg.

will have all the attributes from

and all the attributes from .red
• If you want a class that can ONLY be applied to the

tag (and not to any other tags), defined it like:
p.red {
color: red;
}
• You can still use

with the same results as before, but

has no meaning
IDs
• should only be used once (for use with JavaScript – you don’t need to know why)
• defined like:
#red {
color: red;
}
• this can now be applied to other styles
• eg.

will have all the attributes from

and all the attributes from #red
So what should you use?
• there are reasons to use both classes and IDs
CS 200 Winter 2020
45
TheWeb

Discussion
The “class” attribute can be used by many tags, which share its meaning

The “id” attribute is supposed to uniquely identify a tag (ie only be used once)
 Both specify a style to use on their content
Style sheets can come from
• the web page author
• the user, who can often specify a style sheet in the browser’s preferences
• the browser (ie. built-in)
— And this is their order of priority (from high to low) when a conflict arises for a particular attribute
Browsers are finicky about CSS syntax
• if your CSS seems to have no effect, check for syntax errors / use a CSS validator
The detailed rules for resolving conflicts are (considerably) more complicated;
• see Section 8.1.9 of “HTML & XHTML – The Definitive Guide,” 5/e, for a fuller explanation
• or Chapter 3, “Structure and the Cascade,” in Cascading Style Sheets – The Definitive Guide for details — but you shouldn’t need to
Note: there’s a lot more to CSS than we’ve had time to talk about
CS 200 Winter 2020
46
TheWeb

For More (Optional) Information on CSS
Western Civilization’s
• “Complete CSS Guide” at
 http://www.westciv.com/style_master/academy/css_tutorial/introduction/css_intro.html
• “Properties Introduction” (the Complete CSS Guide’s section on CSS attributes) at
 http://www.westciv.com/style_master/academy/css_tutorial/properties/index.html
HTML & XHTML — The Definitive Guide, 5/e, by Musciano & Kennedy, Chapter 9, “Cascading Style Sheets”
• on reserve in the library (an earlier edition, without “XHTML” in the title
• or at http://safari.ora.com > MY BOOKSHELF – Book 26 from a University computer

Chapter 8 “Cascading Style Sheets” & the appendix “Cascading Style Sheet Properties Quick Reference”
• (the 6th edition was published in October of 2006)
Cascading Style Sheets — The Definitive Guide, by Eric Meyer
• 3rd edition, © 2006, O’Reilly & Associates, 0-596-52733-0.
• or the 2/e at http://www.safari.ora.com > MY BOOKSHELF – Book 9 from a University computer
Typetester: a neat web page (w/Javascript+CSS) for comparing various fonts side-by-side in your browser • typetester.maratz.com
XyleScope: a neat tool for dissecting the CSS in pages you encounter on the web ($20, Mac only) • www.culturedCode.com/xyle/
The “Lorem ipsum… generator” at http://www.lipsum.com/
CS 200 Winter 2020
47
TheWeb

CS 200 Winter 2020
48
TheWeb
TypeTester: typetester.maratz.com
T

Common Sources of Confusion in the Lab
You can use Firefox, Chrome or Safari’s File > Open File… menu item
• HOWEVER
File > Open File… is not as fussy about paths as most web servers – it won’t complain about spaces in URLs
– it won’t complain about trailing blanks in file names
• So you MUST also ask student.cs.uwaterloo.ca web server to access your web pages 
 to be certain that the URLs in them work
www.student.cs.uwaterloo.ca/YourUsername/root.html
Browsers “cache” (most) pages you have browsed on your local disk
• When you’ve changed the contents of a page and saved it to your network disk from your text editor,

option-click the Reload button or And a word of advice … use
• closing tags (eg ,

)
• indentation
• blank lines
to structure your HTML

— it makes debugging much easier
to ensure your browser REALLY gets the new version
CS 200 Winter 2020
49
TheWeb

Finally…
Remember that does NOT mean

• …
• enclose information ABOUT the web page
• that is not displayed IN the page
•

illustrates this better than
Most browsers have a “View > Source…” menu item

that will show you the HTML source for the page currently being displayed
Warning
• CSS is still not perfectly implemented by contemporary browsers,
 although the situation is much better now than it was a few years ago
• So use the latest release of whatever browser you like
 when experimenting with Cascading Style Sheets
• Also, StyleMaster has lots of info about browser quirks & bugs
CS 200 Winter 2020
50
TheWeb




X – O

– – O

O – X


This text is centered WITHIN
the space occupied by the <example> … </example> block.

XML
CS 200 Winter 2020
51
TheWeb

doc { font-family: font-size:
} xmlTable {
display:
color:
background-color: yellow;
margin-top: margin-left:
1em; auto;
Use LR margins of auto
 to center a block-level
 element within its parent.
margin-right:
}
row {
display:
}
cell {
auto; table-row; table-cell;
“Comic Sans MS”, sans-serif; 20pt;
table; black;
ToyTable.css




X – O

– – O

O – X



This text is centered WITHIN
the space occupied by the <example> … </example> block.


display:
padding-right: 0.2em; padding-left: 0.2em; padding-top: 0.2em; padding-bottom: 0.2em;
Use text-align: center
 to center text within
 an element.
width: text-align:
} example {
display:
padding: background-color: cyan; margin-left: 0%; margin-right: 50%; text-align: center;
}
CS 200 Winter 2020
1.5em; center;
block; 0.5em;
52
TheWeb

XML—w/o the



X – O

– – O

O – X


This text is centered WITHIN
the space occupied by the <example> … </example> block.

CS 200 Winter 2020
53
TheWeb

CSS + JavaScript To Change The Default Font
Example: changing the font locally
• local: http://127.0.0.1/cs200/switchingFontsWithJavascript/JensHomePage.html
• remote: http://jcbserver.cs.uwaterloo.ca/cs200/switchingFontsWithJavascript/JensHomePage.html
S?
CS 200 Winter 2020
54
TheWeb

The Javascript for this Example
S?




•••

Choose A Font


Arial

Palatino

Comic Sans MS




CS 200 Winter 2020
55
JavaScript.
TheWeb
Think about Excel scripting as you read this

CSS + JavaScript To Switch Style Sheets
Example: switching style sheets dynamically
• local: http://127.0.0.1/cs200/switchingStyleSheets/JensHomePage.html
• remote: http://jcbserver.cs.uwaterloo.ca/cs200/switchingStyleSheets/JensHomePage.html
See JensHomePage.html and the javascript source file global.js in …/cs200/switchingStyeSheets/ for details if you’re curious.
(Note that the color of the “Warning!” paragraph is chosen randomly.)
CS 200 Winter 2020
S?
56
TheWeb

CSS + JavaScript
Adding a little JavaScript to CSS (of the sort covered in CS 100)
• dynamically changing CSS attributes
• collapsing menus
• absolute positioning of layers (remember Photoshop & Illustrator?)
• and much, much more
Example:
• local: http://127.0.0.1/dynamicMenus.html
• remote: http://jcbServer.cs.uwaterloo.ca/cs200/ericMeyer/dynamicMenus.html
CS 200 Winter 2020
57
TheWeb





absolute;
2.5in;
0.5in;
CS 200 Winter 2020
58
TheWeb
text-align:
center;
The CSS for this Example
S?
position:
left:
top:
background-color: #FFFF00;
padding:
25px;
sans-serif; }
none; }
none; }
15pt; bold;

The Content for this Example


An Illustration of Dynamic Fonts & Menus

Larger Title

Smaller Title

UofW (+/-)

S?

• CS 200
• CS 230
• CS 436
• Other sites (+/-)
  • 
    Oops … this browser doesn’t implement the IFRAME tag.
    );”> CS
    );”> jcbServer
    );”> Math
    );”> Oscar
    );”> UofW
    

  
  Adapted from Section 6.13 of “The CSS Cookbook,” by Christopher Schmitt, O’Reilly &
  );”> Daring Fireball

  );”> Mac Geekery
  );”> Ars Technica
  );”> Slashdot
  );”> Apple
  );”> Microsoft
  );”> Mozilla
  

  
  CS 200 Winter 2020
  Associates.
  See also the documentation for CSS attributes in the “CSS Pocket Reference.” 59
  TheWeb

  The JavaScript for this Example
  
  
  S?
  CS 200 Winter 2020
  60
  TheWeb

  
  

  
  

  >td+td+td {color:red; }
  >td+td+td+td{color:black; }
  CS 200 Winter 2020
  61
  TheWeb

  Related Posts

  matlab simulation

  程序代写 CS代考 / matlab代写代考, simulation

  AB202 Assignment 1: Arkapong

  程序代写 CS代考 / c++代做

  MSc C++ Programming

  程序代写 CS代考 / c++代做

  MSc Assessed Prolog Lab Exercise 2

  程序代写 CS代考 / Prolog代写代考

  Spring Session:2015:Assignment 1

  程序代写 CS代考 / c++代做, UML

  Assignment 2: "Inception and Elaboration"

  程序代写 CS代考 / UML

  android app

  程序代写 CS代考 / android, Java代写代考

  COMP220: Software Development Tools

  程序代写 CS代考 / Java代写代考, junit

  ASCII Character Codes (http://jcbServer.cs.uwaterloo.ca/cs125/asciiCodes2.html)
  Decimal Value	Bits	Char	Abbr	Meaning