Cascading Style Sheets " Provide means to control and change presentation of HTML documents. " Allow the user to impose a standard style. " Three levels of specification: – Inline level -- embeded in tag invocation. – Document level -- applied to a whole document. – External level -- Apply to a number of documents. " Inline level has precedence over document level, which has precedence over external level.

Cascading Style Sheets " HTML primarily concerned with content rather than style. " HTML tags have presentation properties for which browsers have default values. " Cascading Style Sheets are not technically HTML, but can be embedded in HTML documents.

Cascading Style Sheets " Cascading Style Sheet specification developed in > CSS1 " CSS2 followed in " Current browsers do not implement all of CSS2. " Style is specified for a tag by the values of its presentation properties. " Browsers can ignore style sheets or use their own default values for presentation properties.

Level of Style Sheets " Inline style sheets appear in the tag itself. " Document level style sheets appear within the head of the document. " External style sheets are in separate files, potentially on any server on the internet. " Format depends on the level of the style sheet

Inline Style Specification Format " Style sheets appears as the value of the style attribute – style ="property_1:value_1; property_2: value-2;... property_n: value-n;” – Scope of inline style sheet is the content of the tag.

Document Style Specification Format " List of rules that are the content of the tag. " The type attribute of the tag must be set to "text/css" " The list of rules are not HTML. – Hence, they must be placed in an HTML comment. " Documentation comments for the rule must use a different form -- use C comments: /*... */ External style sheets format is a list as in document style

External Style Sheets " Written with the MIME type text/css – A tag is used to specify that the browser is to fetch and use external style sheet file: – " Can be validated /validator-upload.html

Style Classes " Style classes allow different occurrences of the same tag to use different style specifications " A style class has a name attached to a tag name: p.narrow (property:value list) p.wide (property:value list) " A class on an occurrence of a tag is specified with its class attribute...

Generic Style Classes " To apply style to more than one tag " Defined using a generic tag (which must have a name beginning with a period).really-big(... ) " It is used as if it were a normal style class...

Properties/Property Values " There are 56 different properties in 6 categories – Fonts – Colors & backgrounds – Text – Boxes and Layouts – Lists – Tags " Will not discuss all. For more details go to:

Property Value Format " Keywords: left, small,... (Not case sensitive) " Length: numbers (may be with decimal points)  px -pixels  in -inches  cm -centimiters,  pt -points  pc -picas (12 points)  em -height of the letter " m "  x-height -height of the letter "x" – No space is allowed between number and unit specs.

Property Value Format Font Properties <!-- /* Document-level style sheet*/ p.big {font-size: 14pt; font-style: italic; font-family: 'Times New Roman'; } p.small {font-size: 10pt; font-weight: bold; font-family: 'Courier New'; } -->

Property Value Format If a job is worth doing, it ’ s worth doing right. Two wrongs don't make a right, but they certainly can get you in a lot of trouble. <h2 style = "font-family: 'Times New Roman'; font-size: 24pt; font-weight: bold"> Chapter 1 Introduction <h3 style = "font-family: 'Courier New'; font-size: 18pt"> 1.1 The Basics of Computer Networks

Property Value Format (cont) " Percentage -just a number followed by the percent sign  URL value: url(protocol://server/pathname) " Color – Color name  rgb(n1, n2, n3)  Hex form: #XXXXXX " Property values inhereted by nested tags unless overridden

Font Properties  Font-family list of font names (browser picks 1 st )  Font-family: Arial, Helvetica, Courrier  Generic fonts: serif, sans-serif, cursive, fantasy, and monospace (defined in CSS) – If font name has more than one word, single-quoted  Font-size lenght number of a name  Font-style: italic, normal  Font-weight: bolder, lighter, bold, normal

Font Properties Font used to specify list of font properties order must be: style, weight, size, name(s) font: bolder 14pt Arial Helvetica

Font Properties Font Properties <!-- /* Document-level style sheet*/ p.big {font-size: 14pt; font-style: italic; font-family: 'Times New Roman'; } p.small {font-size: 10pt; font-weight: bold; font-family: 'Courier New'; } -->

Font Properties If a job is worth doing, it ’ s worth doing right. Two wrongs don't make a right, but they certainly can get you in a lot of trouble. <h2 style = "font-family: 'Times New Roman'; font-size: 24pt; font-weight: bold"> Chapter 1 Introduction <h3 style = "font-family: 'Courier New'; font-size: 18pt"> 1.1 The Basics of Parallel Programming

Colors & backgrounds " Complications: – Monitors vary widely – Browser vary widely " There are three color collections: – Set of 16 colors garanteed to be dispalyable by all graphical browsers on all color monitors – The web palette of 216 colors – One of 16 million different colors

Garanteed set of 16 colors:  Black  Silver C0C0C0  Gray  White FFFFFF  Marron  Red FF0000  Purple  Fuchia FF00FF  Green  Lime 00FF00  Olive  Yellow FFFF00  Navy  Blue 0000FF  Teal  Aqua 00FFFF

The web palette " Consist of 216 colors " Use hex color value of: (look on back of book)  00  33  66  99  CC  FF

Colors & backgrounds " The color property specifies forground of color elements Apple " The background-color property specifies the backgound color elements <p style="font-size:24; color:blue; background-color:aqua"> To make it softer, use aqua background!

Colors & backgrounds " The background-image property use with care

Alignment of Text " Property text-indent allows indentation. Use length of % " Property text-align has possible values: left (default), center, right, or justify " Property float allows text to flow arround another element: left, right, or none (default) An element on the right with text flowing on its left can be obtained with default text-align value (left) for the text and right value for float on the element on the right.

Alignment of Text " Property margin-left allows to set margins arround an object.

Lists properties Unordered list: " List-style-type – Bullets can be: disk (default), square, circle – Setting it on the tag applies to all items:... – Setting it on the it applies to just that item: First item second item

Lists properties Unordered list: " List-style-image:  Could use an image for bullets in an unordered list <li style = "List-style-image: url(bigbird.gif)">

Lists properties Ordered list: " List-style-type: – Use to change the sequence values: Property valueSequence typeFirst four decimal Arabic numerals 1, 2, 3, 4 upper-alpha Uc letters A, B, C, D lower-alpha Lc letters a, b, c, d upper-roman Uc Roman I, II, III, IV lower-romanLc Romani, ii, iii, iv

The Tag " Used to define an element in the content of a larger element " The default is to leave content as it is " Use to apply an inline style sheet to its content Now is the most opportune time! " Can be nested and can have id and class attributes

The Tag " Usefull for style applications " Used to create sections (or divisions) for which style can be specified – e.g. A section of four paragraphs for wich a particular style is warranted.