lis650 lecture 3 thomas krichel 2003-11-22. today fear not: the worst is over! how to give style...
TRANSCRIPT
LIS650 lecture 3
Thomas Krichel
2003-11-22
today
• fear not: the worst is over! • how to give style sheet data• style locator information• Nielsen on style sheets and contents design• style properties (first part).
Style sheets
• Style sheets are the officially sanctioned way to add style to your document
• We will cover Cascading Style Sheets CSS version 2.
• This is the default style sheet language.• You could also use another one.
setting the style sheet language
• You can set the default style sheet through http, example for setting the style sheet explicitly to CSS:
<META http-equiv="Content-Style-Type" content="text/css">
• This tells the server that it should send the http header "Content-Style-Type" with the value 'text/css'.
• Since CSS is the default, you don’t need to do that if you choose CSS
Rules to find the style sheet language
• If any <META> tag specify the "Content-Style-Type", the last one determines the default style sheet language.
• Otherwise, if any HTTP headers specify the "Content-Style-Type", the last one in the character stream determines the default style sheet language.
• Otherwise, the style sheet language is 'text/css'
Why are they “cascading”
• You can have many style sheets in different places.
• Each style sheet is read in sequence. You can follow this up quite easily.
• A style sheets is written as a set of rules.• Each style sheet rule is read in sequence.• If a rule recently read is in contradiction with an
earlier rule, it overrides the earlier rule.
inline style
• You can add a style attribute to any tag that admits the core attributes as in
<tag style="style">
where style is a style specification.• Example:
<h1 style="color: blue">I am so blue</h1>• Such a declaration only takes effect for the tag
concerned.• I do not recommend this.
Document level style• You can add a style tag as part of the header
<head><style></style></head>• <style> takes the core attributes.• It takes a "type" attribute, "text/css" is the default• It takes the "media" attribute for the intended
media, with values– ‘screen’ (default) – ‘ttv’– ‘projection’ – ‘handheld’ – ‘print’ – ‘braille’– ‘embossed’ – ‘aural’ – ‘all’
linking to an external style sheet
• This is the best way! Use the same style sheet file for all the pages in your site, by adding to every pages something like
• <link rel="stylesheet" type="text/css"
href="URI">• where URI is a URI where the style sheet is to
be downloaded from. On wotan, this can just be the file name.
• The <link> tag must appear in the <head>, it can not appear in the <body>, sorry!
In our situation…
• <link rel="stylesheet" type="text/css"
href="main.css">• Then create a file main.css with a simple test
rule such as:
h1 {color: blue}• main.css is just an example filename, any file
name will do. • Upload and try it out!
advice for cheaters
• Within a style sheet, for example the contents of a <style> tag, you can import another file using the @import command
@import url(http://www.art.org/kitsch.css);• or
@import "http://www.art.org/kitsch.css";• these two ways appear to be equivalent
media dependent styles• Remember the media CSS knows about ?• Using @import, you can import different types
for different media
@import "URI" medialist
where medialist is a list of one or more media, separated by comma
• Example
@import “challenged.css" braille, handheld
What is a style sheet about
• It is about two or three things– Where to find what to style?– How style it?
• Which property to set?• Which value to give to the property?
• In the second part I will use the following syntax– Write property names as {property-name: }– Write property values as ‘value’
basic style syntax• selector {property1: value1; property2: value2
… }• selector is a selector (see following slides)
property is the name of a property
value is the value of a property• note colon and semicolon use! • all names and values are case-insensitive• Examples
– h1 { color: grey; text-align: center}– h2,h3 {color: blue}
comments in the style sheet
• You can add comments is the style sheet by enclosing the comment between /* and */.
• This comment syntax comes from the C programming language.
• This technique is especially useful if you want to remove code from your style sheet temporarily.
basic selector
• the basic selector is a comma-separated list of elementary selectors.
• Often, the elementary selectors are HTML tags, e.g.
h1, h2 {text-align: center}
will center all <h1> and <h2> tag contents• but the selectors can be more precise
class selectors• This is the standard way to style up a class
.class { property1: value1, property2: value2 …}
will give all the properties and values to any tag in the class class.
• Recall HTML, when you have set the you can apply the class
<tag class="class">
will apply all the attributes of the class class to the tag tag. Note that you can place any tag into several classes, use blanks to separate the class names
fun with selectors
• * selects any tag.• E selects any tag called E• E F selects any F tag that is in the contents of an
E tag, as a child, grand-child etc• E > F selects any F tag that is a child of an E
tag. This is more restrictive. • E:first-child selects E when E is the first child of
its enclosing tag• E:link selects an E tag if it is in the contents of
an <a> tag
more selectors
• E:visited select tag E if E if it is in the contents of a link and the link has been visited.
• E:active, E:hover, E:focus selects tag E during certain user actions with the mouse.
• E:lang(c) selects tag E if it is in the human language c
• E + F selects any F tag immediately preceded by an E tag start.
more selectors
• E[a] selects any E tag with an attribute "a", whatever the value
• E[a="v"] select any E tag whose "a" attribute value is exactly equal to "v".
• E[a~="v"] selects any tag E whose "a" attribute value is a list of space-separated values, one of which is exactly equal to "v". Useful for classes, because you can put a tag into several classes, separated by blanks…
more selectors
• E[lang|="en"] selects any E tag whose "lang" attribute has a hyphen-separated list of values beginning (from the left) with "en".
• E.m convenient shorthand for E[class~="m"]• E#myid convenient shorthand for E[id="myid"]• E:first-letter selects the first letter in the content
of tag E• E:first-word selects the first word in the contents
of tag E
:before and :after
• :before or :after can be used to add contents before or after a tag.
• We will deal with this next week, but mention it here for completeness.
examples
• H1, H2, H3 { font-family: sans-serif } • H1 { color: red }
EM { color: red }
H1 EM { color: blue } • DIV * P • DIV P *[href] • BODY > P { line-height: 1.3 } • DIV OL>LI P
more example• H1 + P {text-indent: 0} • H1 + H2 {margin-top: -5mm} • H1.opener + H2 {margin-top: -5mm}• H1[title] {color: blue} • SPAN[class=example] {color: blue } • SPAN[hello="Cleveland"][goodbye="Columbus"]
{ color: blue} • A[rel~="copyright"] {color: red}• A[href="http://www.w3.org/"] {background-color:
grey}• *[LANG=fr] {display: none}
more examples
• *[LANG|="en"] {color : red } • .dialog.romeo {voice-family: "Lawrence Olivier",
charles, male} • A:link {color: red} /* unvisited links */ • A:visited {color: blue} /* visited links */ • A:hover {color: yellow} /* user hovers */• A:active {color: lime} /* active links */ • A.external:visited {color: blue}
more examples
• HTML:lang(fr) { quotes: '« ' ' »' } • HTML:lang(de) { quotes: '„' ‘”'}• *:lang(fr) > Q { quotes: '« ' ' »' } • *:lang(de) > Q { quotes: '„' ‘”'}
(quotation style depending on the surrounding language, not the language of the quote!)
more examples
• A[rel~="copyright"] • A[href="http://openlib.org/home/krichel"]• DIV > P:first-child • A:focus:hover • P > * > A• div[class~="ny"][id="albany"]
Example: drop caps with uppercase
• CSSP { font-size: 12pt; line-height: 12pt }
P:first-letter { font-size: 200%; font-style: italic; font-weight: bold; float: left }
SPAN { text-transform: uppercase }
• HTML<P><SPAN>The first</SPAN> few words of an article in
The Economist.</P>
Nielsen on style sheets• "one of the greatest hopes for recapturing the
Web's ideal of separation of presentation and contents".
• Use a single style sheet for your site. • Always use external style sheets.
– organizational benefits maximized– faster loading
• create a manual for the style of the organization• if you must allow for local styles, have these
embedded in the HTML code. • Make sure your site still looks reasonable in your
browser when you turn CSS off and reload the page
Don't go crazy with CSS
• More than two font families (plus perhaps one for computer code) and your page starts looking like a ransom note.
• Gimmicky looking sites will hurt the credibility of you site.
• No absolute sizes• If you have multiple style sheets, use the same
HTML class tags in both.
Nielsen on Frames
• He writes: "Frames: Just Say No"• He then has a few pages where he thinks about
why in exceptional circumstances frames may be ok.
• We have not discussed frame in this course at all and just mention them here.
Nielsen on printing
• Many people prefer to read documents in print. • For a long, important destination page, provide a
print version. Have the header say• <link rel="alternate" media="print"
href="mypage.pdf" type="application/pdf">• accommodate us-letter and a4 formats
– sheet as high as us-letter– sheet as wide as a4
This ends the Nielsen chapter on page design
Content design: writing
• write 50% of the words you would write in normal print, because research shows that reading on screen is 25% slower than print reading.
• write of scannability by using – short paragraphs– subheadings– bulleted lists
• Use hypertext to keep page size down.• (hire a copy editor)
more on scannability
• structure pages with 2 or 3 levels of headings• you may want to highlight keywords in some
way, but not in any way that they could be confused with hyperlinks. Put the keywords in a <span class="keyword"> … </span>
• use meaningful, rather than cute headings.• use one idea per paragraph• almost no humor• no metaphors• no puns
page chunking
• Just simply splitting a long article by into different parts for linear reading is not good.
• Devise a strategy of front pages with the important information and back pages linked from the front pages with the detail.
• Base the distinction of important and not important stuff on audience analysis.
users rarely scroll
• early studies showed 10% of users would scroll.• on navigational pages, users will tend to click
something they see in the top portion.• scrolling navigational pages are bad because
users can not see all the options at the same time.
• the length of "destination" pages for users interested in details is less of a problem.
page <title>
• needs to be cleverly chosen to summarize the page in a contents of a web search engine, esp.
• between 40 to 60 chars long• different pages in a site should each have their
own title.• No
– welcome– "a" "the" etc..
headline design
• Explain clearly what the page is about• Use plain language• Skip leading articles ("A", "the"..) in email
subjects and page titles• Make the first word the most important one• Do not start all pages with the same word.
legibility
• Use high color contrast.• Use plain or very subtle background images.• Make the text stand still
– no zooming– no blinking– no moving
• Left-align almost always• No all uppercase, it reads 10% slower.
rules for online documentation (if you must have some)
• It is essential to make it searchable• Have an abundance of examples• Instructions should be task-oriented• Nevertheless, you may have to provide a
conceptual introduction to the system• Hyperlink to a glossary
multimedia• Since such files are long, they should have an
indication of their size • Write a summary of what happens in the
multimedia document• For a video, provide a couple of still images.
This will give people– quick visual scan of the contents of the image – an impression of the quality of the image and
pictures
• Have a picture on a bio page• No gratuitous images• More pictures on background pages, that are
reached by users with in-depth interest.• Never have a picture look like an advertising
banner.
• Maybe not have as many pictures of yourself on your site as Jakob Nielsen has.
animation
• Animal instinct draws human attention to moving things
• A spinning logo is a killer for reading, if you have it, have it spin only a few times
• No scrolling marquees, no moving text
animation may be good for
• Showing continuity in transition• Indication dimensionality in transaction• Illustrating change over time• Multiplexing the display• Enriching graphical representation• Visualizing three dimensional structures• Attracting attention
but we will not discuss this as it is out of scope for the course
streaming video
• limited by available bandwidth• could be used for
– promoting television shows, films etc– give user impression of a speaker's personality (if any)– demonstrate things that move
• good for demo of physical products• less good for demos of software
• watch out for narration quality
Downloadable video
• probably better than streaming• breaks the interactive mode of use on the web• should be limited in length, say < 1 minute• big topics should be broken down on a web
page into smaller ones, each having its own video.
audio
• probably a better way to convey a speaker's personality
• can teach the pronunciation of words• can enhance the user experience, a classic
study had users claiming that the graphics were better on a video game that had better sound but the same graphics than another.
3D graphics
• has a range of problems– man is not made for 3D watching– screen is not made for rendering 3D– interaction tools such as mouse have not been made
for 3D– poor screen resolution– requires plug-ins
• therefore it should not be used unless absolutely necessary.
important properties
• We will now look at the properties as defined by CSS. These are the things that you can set using CSS.
• We group properties into six groups– fonts– colors, and background– text– boxes and layout (next class)– lists (next class)– tag classification (next class)
font properties I
• {font-family:} accepts a comma-separated list of font names
• there are five generic names, one should be quoted last as a fall-back – ‘serif’ – ‘sans-serif’ – ‘cursive’ – ‘fantasy’ – ‘monospace’
• example
*:lang(ja-jp) {font-family: "Heisei Mincho W9", serif}
font properties II
• {font-size: } accepts sizes as npt, n%, +npt, where n is a number, or some sizes like– ‘xx-small’ – ‘x-small’ – ‘small’ – ‘medium’– ‘large’ – ‘x-large’ – ‘xx-large’ – ‘larger’ – ‘smaller’
incremental font sizes may not be handled properly by the browser.
• {font-style: } can be either ‘italic’, ‘oblique’ or ‘normal’
font properties III
• {font-variant: } can be either ‘normal’ or ‘small caps’
• {font-weight: } can be – a number between 100 for the thinnest and 900 for
the boldest. 400 is the normal.– ‘normal’ – ‘bold’ – ‘bolder’ – ‘lighter’
• {font-stretch: } can be any of – ‘ultra-condensed – ‘extra-condensed’ – ‘condensed’ – ‘semi-condensed – ‘normal’ – ‘semi-expanded’ – ‘expanded’ – ‘extra-expanded’ – ‘ultra-expanded’
other font properties• There is a whole bunch of other properties
– {unicode-range: } – {stemv: } – {stroke: }
– {units-per-em: } – {stemh: } – {bbox: }– {definitions-src:} – {ascent: } – {dscent: }
– {baseline: } – {widths: } – {mathline: }– {centerline: } – {topine: } – {panose1: }
• There also is a {font: } property that allows you to put several of the previous properties together.
• But all that is not worth learning. Keep fonts simple.
colors• they follow the RGB color model. • expressed as three hex numbers 00 to FF.• The following standard color names are defined
– Black = #000000 Green = #008000 – Silver = #C0C0C0 Lime = #00FF00 – Gray = #808080 Olive = #808000– White = #FFFFFF Yellow = #FFFF00– Maroon = #800000 Navy = #000080– Red = #FF0000 Blue = #0000FF – Purple= #800080 Teal = #008080– Fuchsia = #FF00FF Aqua = #00FFFF
• other names may be supported by browsers.
color & background properties
• {color: } sets the foreground color of a tag. • {background-color: } gives the color of the
background• {background-image: url(URL) } places a picture
found at a URL URL. • {background-repeat: } can take the value ‘repeat’
(default), ‘repeat-x’, ‘repeat-y’, and ‘no-repeat’.• {background-attachment: } can take the value of
‘fixed’ or ‘scroll’ (default) to say if the image scrolls with the viewport (obscure)
{Background-position: } property
• places the background image• can take values
– '0% 0%' to '100% 100%'– 'length length' to put length of offset from top left– mixing both is allowed– ‘top’, ‘center’,‘bottom’ and ‘left’, ‘right’, ‘center’ can be
used too
text properties I
• {letter-spacing: } set the spacing between letters, takes a length value or the word 'normal'
• {word-spacing: } same as for letter-spacing• {line-height: } sets the distance between several
lines of a tag's contents, – in pt or pixel numbers– % age (referring to a percentage of current font size)– with a number (referring to a multiplicity of the size of
the text)– 'normal'
text properties II
• {text-align: } can take the values ‘left’ ‘right’ ‘center’ and ‘justify’.
• {text-decoration: } can take the values ‘underline’, ‘overline’, ‘line-through’ and ‘blink’.
• {text-indent: }, {margin-left: } take length units but are best expressed in the relative "em" unit.
• {text-shadow: color horizontal-offset vertical-offset blur-radius }. Example span.glow { background: white; color: white; text-
shadow: black 0px 0px 5px; }
text properties III
• {float: } can be set to ‘left’, ‘right’ and ‘none’. • {width: } and {height: } can also be set.• {vertical-align: } can take the values ‘baseline’,
‘middle’, ‘sub’, ‘super’, ‘text-top’, ‘text-bottom’, ‘top’, ‘bottom’, as well as percentages.
• {text-transform: } can take the value ‘uppercase’, ‘lowercase’, ‘capitalize’ and ‘none’.
http://openlib.org/home/krichel
Thank you for your attention!