lis650 lecture 3 major css thomas krichel 2006-02-18

62
LIS650 lecture 3 Major CSS Thomas Krichel 2006-02-18

Upload: mia-foley

Post on 27-Mar-2015

215 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: LIS650 lecture 3 Major CSS Thomas Krichel 2006-02-18

LIS650 lecture 3Major CSS

Thomas Krichel2006-02-18

Page 2: LIS650 lecture 3 Major CSS Thomas Krichel 2006-02-18

today

• Introduction to style sheets

• How to give style sheet data

• Basic CSS selectors

• Some important properties

• Some less important properties

Page 3: LIS650 lecture 3 Major CSS Thomas Krichel 2006-02-18

style sheets

• Style sheets are the officially sanctioned way to add style to your document

• We will cover Cascading Style Sheets CSS.

• This is the default style sheet language.

• We are discussing version 2.1. This is not yet a W3C recommendation, but it is in last call.

• You can read all about it at http://www.w3.org/TR/CSS21/

Page 4: LIS650 lecture 3 Major CSS Thomas Krichel 2006-02-18

what is in a style sheet?

• A style sheet is a sequence of style rules.

• In the sheet, one rule follows the other. There is no nesting of rules.

• Therefore the way rules are written in a style sheet is much simpler than the way elements are written in XML.

• Remember that in XML we have nesting of elements.

Page 5: LIS650 lecture 3 Major CSS Thomas Krichel 2006-02-18

what is a style rule about?

• It is about two or three things– Where to find what to style? --> selector

– How to style it?• Which property to set? --> property name

• Which value to give to the property? --> property value

• In this lecture I will use the following syntax– Write property names as {property-name: }

– Write property values as ‘value’

Page 6: LIS650 lecture 3 Major CSS Thomas Krichel 2006-02-18

why are they “cascading”?

• You can have many style sheets in different places. Style sheets come in the form of rules: “at this place, do that”.

• Where there are many rules, there is potential for conflict. We do not learn the exact rules here but note– Some rules are read after others other. Later rules

override earlier rules.– Some rules concern more specific locations than

others. The specific rules override general rules.

Page 7: LIS650 lecture 3 Major CSS Thomas Krichel 2006-02-18

in-element style

• You can add a style= attribute to any element that admits the core attributes as in

<element style="style"> .. <element>

where style is a style sheet. There is no selector.

• Example:

<h1 style="color: blue">I am so blue</h1>

• Such a declaration only takes effect for the element concerned.

• I do not recommend this.

Page 8: LIS650 lecture 3 Major CSS Thomas Krichel 2006-02-18

document level style• You can add a <style> element as child of the

<head>. The style sheet is the contents of <style>

<head><style> stylesheet </style></head>• <style> takes the core attributes.• It takes a type= attribute, "text/css" is the default

value.• It takes the media= attribute for the intended

media. This attribute allows you to set write different styles for different media. See later slide.

Page 9: LIS650 lecture 3 Major CSS Thomas Krichel 2006-02-18

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.

• type= and href= are required attributes here. • Example:

<link rel="stylesheet" type="text/css" href="http://openlib.org/home/krichel/krichel.css"/>

Page 10: LIS650 lecture 3 Major CSS Thomas Krichel 2006-02-18

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.

• Try it out!

Page 11: LIS650 lecture 3 Major CSS Thomas Krichel 2006-02-18

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}

– .blue {color: blue} /* yes, with a dot */

Page 12: LIS650 lecture 3 Major CSS Thomas Krichel 2006-02-18

comments in the style sheet

• You can add comments in 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.

Page 13: LIS650 lecture 3 Major CSS Thomas Krichel 2006-02-18

some selectors

• The most elementary selector is the name of an HTML element, e.g.

h1 {text-align: center}

will center all <h1> element contents.

• But the selectors can be more precise. But we are only looking at two alternatives– id selectors

– class selectors

Page 14: LIS650 lecture 3 Major CSS Thomas Krichel 2006-02-18

id selectors• The standard way to style up a single element is

to use its id

#id { property1: value1; property2: value2 …}

will give all the properties and values to the element with the identifier id= attribute set to id.

• Example: #validator {color: none; }

• Recall that in HTML, you can identify an individual element element by giving it an id=

<element id="id"> ... </element>

Page 15: LIS650 lecture 3 Major CSS Thomas Krichel 2006-02-18

class selectors• The is the standard way to style up a class

.class { property1: value1; property2: value2 …}

will give all the properties and values to any element in the class class.

• Recall that in HTML, you can say

<element class="class"> ... </element>

to place the element element into the class class. Note that you can place an element into several classes. Use blanks to separate the different class names.

Page 16: LIS650 lecture 3 Major CSS Thomas Krichel 2006-02-18

visual style sheets• In this class we ignore aural style sheets and

work only on visual ones.

• We have two important concepts.– The canvas is the support of the rendering. There

may be several canvases on a document. On screen, each canvas is flat and of infinite dimensions.

– The viewport is the part of the canvas that is currently visible. There is only one viewport per canvas.

• We will now examine some important property values in visual style sheet regarding– colors

– distances

Page 17: LIS650 lecture 3 Major CSS Thomas Krichel 2006-02-18

property values: colors• They follow the RGB color model. • Expressed as three hex numbers 00 to FF.• A pound sign is written first, then follow the hex

numbers. • Example

a {background-color: #270F10}

• There are color charts on the Web, for example at http://www.webmonkey.com/reference/color_codes/

Page 18: LIS650 lecture 3 Major CSS Thomas Krichel 2006-02-18

color names

• The following standard color names are defined– Black = #000000 Green = #00FF00 – Silver = #C0C0C0 Lime = #008000– 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 individual browsers.

Page 19: LIS650 lecture 3 Major CSS Thomas Krichel 2006-02-18

values: measures• relatively

– em: the {font-size} of the relevant font – ex: the {x-height} of the relevant font – px: pixels, relative to the viewing device

• absolutely– in: inches — 1 inch is equal to 2.54 centimeters. – cm: centimeters – mm: millimeters – pt: points — 1 point is equal to 1/72th of an inch– pc: picas — 1 pica is equal to 12 points

• percentage, depending on other values. That other value may be– some property for other element– same property of an ancestor element– the value used in a formating context.

Page 20: LIS650 lecture 3 Major CSS Thomas Krichel 2006-02-18

the default style sheet (extract)• blockquote, body, dd, div, dl, dt, h1, h2, h3, h4,

h5, h6, ol, p, ul, hr, pre { display: block }• li { display: list-item } • head { display: none } • body { margin: 8px; line-height: 1.12 } • h1 { font-size: 2em; margin: .67em 0 } • h2 { font-size: 1.5em; margin: .75em 0 } • h3 { font-size: 1.17em; margin: .83em 0 }• h4, p, blockquote, ul, ol, dl, { margin: 1.12em 0 }• h5 { font-size: .83em; margin: 1.5em 0 }• h6 { font-size: .75em; margin: 1.67em 0 }

Page 21: LIS650 lecture 3 Major CSS Thomas Krichel 2006-02-18

the default style sheet (extract)• h1, h2, h3, h4, h5, h6, b, strong { font-weight: bolder } • blockquote { margin-left: 40px; margin-right: 40px }• i, cite, em, var, address { font-style: italic } • pre, tt, code, kbd, samp { font-family: monospace } • pre { white-space: pre } • big { font-size: 1.17em } • small, sub, sup { font-size: .83em } • sub { vertical-align: sub } • sup { vertical-align: super }• del { text-decoration: line-through } • hr { border: 1px inset } • ol, ul, dd { margin-left: 40px } • ol { list-style-type: decimal }

Page 22: LIS650 lecture 3 Major CSS Thomas Krichel 2006-02-18

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– colors, and background

– boxes and layout

– fonts

– text

– lists

– element classification

Page 23: LIS650 lecture 3 Major CSS Thomas Krichel 2006-02-18

color & background properties

• {color: } sets the foreground color of an element.

• {background-color: } gives the color of the background

• {background-image: url(URI) } places a picture found at a URI URI.

• {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.

Page 24: LIS650 lecture 3 Major CSS Thomas Krichel 2006-02-18

color & background properties II

• {background-position: } property places the background image. – It can take values '0% 0%' to '100% 100%'

– Use 'length length' to put length of offset from top left

– Mixing both is allowed.

– You can also use ‘left’, ‘right’, ‘center’ and ‘top’, ‘center’, ‘bottom’.

Page 25: LIS650 lecture 3 Major CSS Thomas Krichel 2006-02-18

normal flow

• In general, every piece of HTML is placed into a conceptual thingy called a box.

• In visual formatting, we can think about the box as a rectangle that fills the material that is being visualized.– For text-level elements, boxes are set horizontally

next to each other.

– For block-level elements, boxes are set vertically next to each other.

Page 26: LIS650 lecture 3 Major CSS Thomas Krichel 2006-02-18

the box model

• The total width that the box occupies is the sum of– the left and right margin– the left and right border width– the left and right padding– the width of the box‘s contents

• The margin concept here is the same as the “spacing” in the tables.

• A similar reasoning holds for the height that the box occupies.

Page 27: LIS650 lecture 3 Major CSS Thomas Krichel 2006-02-18

box border properties

• {border-style:} {border-top-style} {border-right-style:} {border-bottom-style:} {border-left-style:} take the following values– none No border. {border-width:} becomes zero. This is the default.

– hidden Same as 'none', except in terms of border conflict resolution

– dotted The border is a series of dots.

– dashed The border is a series of short line segments.

– solid The border is a single line segment.

– double The border is two solid lines.

– groove The border looks as though it were carved into the canvas.

– ridge The border looks as though it were coming out of the canvas.

– inset The border makes the box look like embedded in the canvas.

– outset The border makes the box look like coming out of the canvas.

Page 28: LIS650 lecture 3 Major CSS Thomas Krichel 2006-02-18

box properties I• {border-color: } can hold up to four colors,

separated by blanks– one value means: all borders have the same color

– two values mean: first number for top and bottom, second for left and right

– three values mean: first sets top, second left and right, third bottom

– four values mean: first sets top, second sets right etc.

• {border-width: } can hold up to four widths, as well as the words 'thin', 'thick' and 'medium'.

Page 29: LIS650 lecture 3 Major CSS Thomas Krichel 2006-02-18

box properties II• {border-top-width: }, {border-bottom-width: },

{border-left-width: } and {border-right-width: } also exist.

• same properties exists for {margin-top: }, {margin-bottom: } etc and {padding-top: }, {padding-bottom: } etc.

• {width:} sets the total width of the box and {height:} sets the total height of the box, both take a dimension or the word 'auto' e.g. img {width: 100px; height auto}

Page 30: LIS650 lecture 3 Major CSS Thomas Krichel 2006-02-18

box properties III: floating

• {float: } tells the user agent to float the box. The box is set to float, meaning that text floats around it. I know this is confusing– value 'left' tells the user agent to put the floating box

to the left

– value 'right' tell the user agent to put the floating box to the right.

Page 31: LIS650 lecture 3 Major CSS Thomas Krichel 2006-02-18

box properties III: clearing

• {clear: } tells the user agent whether to place the current element next to a floating element or on the next line below it.– value 'none' (default) tells the user agent to put

contents on either side of the floating element

– value 'left' means that the left side has to stay clear

– value 'right' means that the right side has to stay clear

– value 'all' means that both sides have to stay clear

Page 32: LIS650 lecture 3 Major CSS Thomas Krichel 2006-02-18

{position:}• 'static' The box is a normal box, laid out according to

the normal flow.

• 'relative' The box's position is calculated according to the normal flow. Then it is offset relative to its normal position. The position of the following box is not affected.

• 'absolute' The box's position is specified by offsets with respect to the box's containing element. There is no effect on sibling boxes.

• 'fixed' The box's position is calculated according to the 'absolute' model, but the reference is not the containing element but:

• For continuous media, the box is fixed with respect to the viewport

• For paged media, the box is fixed with respect to the page

Page 33: LIS650 lecture 3 Major CSS Thomas Krichel 2006-02-18

properties with {position:}

• {top:}, {right:}, {bottom:}, {left:} set offsets if positioning is relative, absolute or fixed.

• They can take length values, percentages, and 'auto'.

• The effect of 'auto' depends on which other properties have been set to 'auto‘

• Now check the examples page.

Page 34: LIS650 lecture 3 Major CSS Thomas Krichel 2006-02-18

box properties V

• {z-index: } let you set an integer value for a layer on the canvas where the element will appear.

• If element 1 has z-index value 1 and element 2 has z-index value number 2, element 2 lies on top of element 1.

• A negative value means that the element contents is behind its containing block.

• the initial value is 'auto'.

• browser support for this property is limited.

Page 35: LIS650 lecture 3 Major CSS Thomas Krichel 2006-02-18

general background to foreground order

• For an element, the order is approximately– background and borders of element

– children of the element with negative z-index

– non-inline in-flow children

– children that are floats

– children that are in-line in-flow

– children with z-index 0 or better

• not worth remembering for quiz

Page 36: LIS650 lecture 3 Major CSS Thomas Krichel 2006-02-18

box properties VI

• The {visibility: } property sets the visibility of an element. It takes values– 'visible' The generated box is visible.

– 'hidden' The generated box is invisible (fully transparent), but still affects layout.

– 'collapse' The element collapses in the table. Only useful if applied to table elements. Otherwise, 'collapse' has the same meaning as 'hidden'.

• With this you can do sophisticated alignments.

Page 37: LIS650 lecture 3 Major CSS Thomas Krichel 2006-02-18

box properties VII

• We now look at overflow and clipping. When a box contents is larger than the containing box, it overflows.

• {overflow:} can take the values– visible contents is allowed to overflow

– hidden contents is hidden

– scroll UA displays a scroll device at the edge of the box

– auto leave to the user agent to decide what to do

• Example: lengthy terms and conditions.

Page 38: LIS650 lecture 3 Major CSS Thomas Krichel 2006-02-18

list properties• {list-style-position: } can take the value ‘inside’ or

‘outside’. The latter is the default, the property refers to the position of the list item start marker

• {list-style-property: }– takes the values ‘disc’, ‘circle’, ‘square’, ‘none’ with an

unordered list

– takes the value ‘decimal’, ‘lower-roman’, ‘upper-roman’, ‘lower-alpha’, ‘upper-alpha’ with ordered list, and some others

• {list-style-image: } define the bullet point of a list as a graphic, use url(URL) to give the location of the graphic.

Page 39: LIS650 lecture 3 Major CSS Thomas Krichel 2006-02-18

element classification properties I

• {display: } sets the display type of an element, it take the following values– 'block' displays the contents as a block

– 'inline' displays the contents as inline contents

– 'list-item' makes contents an item of a list. You can

then attach list properties to it.

– 'none' does not display the contents.

– 'run-in' (see later)

– 'compact' (see later)

Page 40: LIS650 lecture 3 Major CSS Thomas Krichel 2006-02-18

element classification properties II

• {display: } also takes the following values– table – table-footer-group

– table-row – table-row-group

– table-cell – table-column

– table-caption – table-column-group

– inline-table – table-header-group

• These means that they behave like the table elements that we already discussed.

Page 41: LIS650 lecture 3 Major CSS Thomas Krichel 2006-02-18

run-in box

• If a block box (that does not float and is not absolutely positioned) follows the run-in box, the run-in box becomes the first inline box of the block box.

• Otherwise, the run-in box becomes a block box.

• Example on next page

Page 42: LIS650 lecture 3 Major CSS Thomas Krichel 2006-02-18

example for run-in box

<head><title>a run-in box example</title>

<style type="text/css">

h3 { display: run-in }

</style> </head> <body>

<h3>a run-in heading </h3><p>and a paragraph of text that follows it and it continues on the line of the h3</p>

</body>

Page 43: LIS650 lecture 3 Major CSS Thomas Krichel 2006-02-18

compact box

• If a block-level box follows the compact box, the compact box is formatted like a one-line inline box. The resulting box width is compared to one of the side margins of the block box,– left margin if direction is left-to-right– right margin if direction is right-to-left

• If the inline box width is less than or equal to the margin, the inline box is given a position in the margin as described immediately below.

• Otherwise, the compact box becomes a block box.

Page 44: LIS650 lecture 3 Major CSS Thomas Krichel 2006-02-18

compact box example

<div style="dt { display: compact }

dd { margin-left: 4em }">

<dl><dt>short </dt><dd>description is here</dd>

<dt>too long for the margin</dt>

<dd>description goes here</dd>

</div>

Page 45: LIS650 lecture 3 Major CSS Thomas Krichel 2006-02-18

element classification properties III

• The {whitespace:} property controls the display of white space in a block level tag.– 'normal' collapses white space

– 'pre' value similar to <pre> tag

– 'nowrap' ignores carriage returns only

• It seemed not to work in firefox last time I tried.

Page 46: LIS650 lecture 3 Major CSS Thomas Krichel 2006-02-18

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 an element'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'

Page 47: LIS650 lecture 3 Major CSS Thomas Krichel 2006-02-18

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.

• {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’.

Page 48: LIS650 lecture 3 Major CSS Thomas Krichel 2006-02-18

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}

Page 49: LIS650 lecture 3 Major CSS Thomas Krichel 2006-02-18

font properties II

• {font-size: } accepts sizes as npt, n%, +npt, -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’

Page 50: LIS650 lecture 3 Major CSS Thomas Krichel 2006-02-18

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 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’

Page 51: LIS650 lecture 3 Major CSS Thomas Krichel 2006-02-18

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.

Page 52: LIS650 lecture 3 Major CSS Thomas Krichel 2006-02-18

table properties I

• {caption-side:} says where the caption should go, either 'top' or 'bottom'

• {border-collapse: } allows to choose the fundamental table model. It can take two values– 'separate' implies that each cell has its own box.

– 'collapse' implies that adjacent cells share the same border

Page 53: LIS650 lecture 3 Major CSS Thomas Krichel 2006-02-18

table properties II

• The properties on this slide are only useful if you choose the separated border model.

• You can set the distance between adjacent cells using the {border-spacing:} property. Set it to two distances to specify different horizontal and vertical values

• {empty-cells:} can be set to– 'show' shows empty cells with their border – 'hide' does not show the border around an empty cell

• There are some other table properties

Page 54: LIS650 lecture 3 Major CSS Thomas Krichel 2006-02-18

Lesk in HTML/CSS

• I have struggled to reproduce the Lesk tables in the examples area.

• It is at doc/examples in the course resources site.

• You can see a version with CSS and a version without CSS.

Page 55: LIS650 lecture 3 Major CSS Thomas Krichel 2006-02-18

advice for cheaters

• Within a style sheet, for example the contents of a <style> element, 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

Page 56: LIS650 lecture 3 Major CSS Thomas Krichel 2006-02-18

style sheet media types

• Different media, different style.

• CSS has a controlled vocabulary of media– ‘projection’ – ‘handheld’

– ‘print’ – ‘braille’

– ‘screen’ (default) – ‘tty’

– ‘embossed’ – ‘aural’

– ‘all’

• Note that style sheet media are not the same as the MIME types. MIME types are a controlled vocabulary for file types.

Page 57: LIS650 lecture 3 Major CSS Thomas Krichel 2006-02-18

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

Page 58: LIS650 lecture 3 Major CSS Thomas Krichel 2006-02-18

the @media instruction

• You can say

@media media {

style

}

• to apply the style style only to media media. Example

@media print {

a {text-decoration: none; color: black}

}

Page 59: LIS650 lecture 3 Major CSS Thomas Krichel 2006-02-18

advice about spacing

• Traditionally only use horizontally, the em nowadays is the height of the font, and should be used vertically as well, as in div.menu {padding: 1.5em; margin: 1.5em}

• For body, use %ages, as in body {margin-left: 15%; margin-right: 0%}

• To create a menu, do something like div.menu {float: left; width: 15em}

Page 60: LIS650 lecture 3 Major CSS Thomas Krichel 2006-02-18

the 'inherit' value

• Each property can have the 'inherit' value. In this case, the value of the property for the element is determined by the containing element.

• Sometimes, 'inherit' is the default value.

Page 61: LIS650 lecture 3 Major CSS Thomas Krichel 2006-02-18

validating CSS

• It is at http://jigsaw.w3.org/css-validator/

• Check your style sheet there when you wonder why the damn thing does not work.

• Note that checking the style sheet will not be part of the assessment of the web site.

Page 62: LIS650 lecture 3 Major CSS Thomas Krichel 2006-02-18

http://openlib.org/home/krichel

Please switch off computers when done.

Thank you for your attention!