Cascading Style Sheets

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 1996 ----> CSS1 • CSS2 followed in 1998. • 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 <style> tag. • The type attribute of the <style> 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 <link> tag is used to specify that the browser is to fetch and use external style sheet file: • <link rel = stylesheet type="text/css" href="http://www.whereever.org/termpaper.css"> </link> • Can be validated http:/jigsaw.w3.org/css-validator /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 <p class ="narrow"> ... </p> <p class ="wide"> ... </p>

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 <h1 class ="really-big"> ... </h1> <p class ="really-big"> ... </p>

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: http://www.w3.org

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 <html> <head> <title> Font Properties </TITLE> <style type = "text/css">  </style> </head>

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

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 1st) • 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 <html> <head> <title> Font Properties </TITLE> <style type = "text/css">  </style> </head>

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

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

Green 008000 Lime 00FF00 Olive 808000 Yellow FFFF00 Navy 000080 Blue 0000FF Teal 008080 Aqua 00FFFF Garanteed set of 16 colors: • Black 000000 • Silver C0C0C0 • Gray 808080 • White FFFFFF • Marron 800000 • Red FF0000 • Purple 800080 • Fuchia FF00FF

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 <h2 style="color:red">Apple</h2> • 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!</p>

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. <img src = "c210.jpg" style="float: right; margin-left: 0.5in; margin-bottom: 0.05in" />

Lists propertiesUnordered list: • List-style-type • Bullets can be: disk (default), square, circle • Setting it on the <ul> tag applies to all items: <ul style = "list-style-type: square"> <li> ... </ul> • Setting it on the <li> it applies to just that item: <ul> <li style="list-style-type:square"> First item </li> <li style = "list-style-type: circle"> second item </li> </ul>

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

Lists propertiesOrdered list: • List-style-type: • Use to change the sequence values: Property value Sequence type First 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-roman Lc Roman i, ii, iii, iv

The <span> Tag • Used to define an element in the content of a larger element • The default is to leave content as it is • Use <span> to apply an inline style sheet to its content <p>Now is the <span style = "font-size: 40; font-family: ariel; color: bue"> most </span> opportune time! </p> • Can be nested and can have id and class attributes

The <div> 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.

Cascading Style Sheets