Fundamentals of Web Programming a Cascading Style Sheets Teodor Rus rus@cs.uiowa.edu The University of Iowa, Department of Computer Science a Copyright 2009 Teodor Rus. These slides have been developed by Teodor Rus using material published by R.W. Sebesta, Programming the World Wide Web, Addison Wesley 2009. They are copyrighted materials and may not be used in other course settings outside of the University of Iowa in their current form or modified form without the express written permission of the copyright holder. During this course, students are prohibited from selling notes to or being paid for taking notes by any person or commercial firm without the express written permission of the copyright holder. Introduction System Software. Copyright Teodor Rus p.1/59
Contents Historical Notes; CSS Precedence Relation; Style Sheet Specification; Style Specification Formats; Style Rule Selectors; Property Value Forms; Paddings and Margins; Background Images; Conflict Resolution. Introduction System Software. Copyright Teodor Rus p.2/59
Historical Notes Most of the XHTML tags have associated properties which store presentation info. Note: browser uses default values of these properties if the document does not specify values. Style sheets have been developed as mechanisms that allow browser user to specify document presentation properties. Introduction System Software. Copyright Teodor Rus p.3/59
Cascade Style Sheets Cascading Style Sheets (CSS1) for use in XHTML documents have been developed in 1996 by W3C. CSS2, which added many properties and property values to CSS1 and extended presentation control to media other than Web browsers (such as printers) was released in 1998. Browser support for CSS2 is not complete. W3C decided to develop a new standard, CSS2.1 that reflect browser support for CSS2. Note: The book presents a subset of CSS1 along with few properties from CSS2. Unless otherwise specified the examples in the book work correctly for IE7 and FX2 browsers. Introduction System Software. Copyright Teodor Rus p.4/59
Levels of CSS There are three levels of style sheets: 1. Inline: apply to the contents of an single element of the XHTML document; 2. Document: apply to the whole body of a document; 3. External: apply to the body of any number of documents. Precedence relation : external document inline meaning: a property specified by an external sheet is overridden by the same property specified by a document sheet which is overridden by the same property specified by an inline sheet. Introduction System Software. Copyright Teodor Rus p.5/59
Using style sheets If no style sheet info is specified, the browser default property is used; If a browser cannot use a property specified by a style sheet it either replaces that property (for example with its default) or ignores that property. Introduction System Software. Copyright Teodor Rus p.6/59
CSS Specification Inline style sheets: are defined inside of the opening tag of the element. Example: <p {font-size 18pt}> The paragraph </p> Disadvantage: generates a non-uniform styling and results in a mixture of XHTML language with the language of CSS. Therefore, inline style sheets are deprecated in XHTML 1.1 Introduction System Software. Copyright Teodor Rus p.7/59
Document CSS Specification Document style specifications: are defined in the document head section of the document; They apply to the entire body of the document. Example: <head> <title> Enumerated sequence </title> <style type = "text/css"> o1 {list-style-type: upper-roman;} o1 o1 {list-style-type: decimal;} </style> </head> Introduction System Software. Copyright Teodor Rus p.8/59
External CSS Specification External CSS Specification: are defined in a file which is not part of the documents they apply to. External CSS style sheets are stored separately and are referenced in the documents where they are used. Introduction System Software. Copyright Teodor Rus p.9/59
External Style Sheet Reference Are text-files with the MIME type "text/css". The browser fetches them using < link > tag, which must be placed in the document head, using the attributes rel and href: The rel attribute is used to specify the relationship of the linked-to document to the document in which the link appears: The href attribute is used to specify the URL of the style sheet Example: document. <link rel = "stylesheet" type = "text/css" href = "http://www.cs.uiowa.edu/styles/xhtmldocs.css" /> Introduction System Software. Copyright Teodor Rus p.10/59
Fact If the external style sheet resides on the Web server, only the path to the file needs to be given to href. Example: <link rel = "stylesheet" type = "text/css" href = "styles/xhtmldocs.css" /> Introduction System Software. Copyright Teodor Rus p.11/59
Import Directive The @import rule allows you to include the external style sheets in your document. Note: @import allows us to create style sheets independent of our documents, and then importing them into different documents for uniform styling. Example: <html> <head> <title> Example @import Directive </title> <style type="text/css"> @import url("style1.css"); @import url("style2.css"); </style> </head> <body> <p> Examples imported style sheets.</p> </body> </html> Introduction System Software. Copyright Teodor Rus p.12/59
Fact There is a little ambiguity about url() in the book. However, there are a lot of experiments on the web that would allow us to handle this ambiguity. Note: The double quotes are required for valid XHTML, but browsers that support url() tend to support it with or without quotes. Introduction System Software. Copyright Teodor Rus p.13/59
Style Sheets Validation Style sheets validation service: http://jigsaw.w3.org/css-validator/validator-upload.html Introduction System Software. Copyright Teodor Rus p.14/59
Style Specification Formats The format of style specification depends upon the level of style sheet. Inline style specification: Defined as the value of the style attribute of the tag. The general form is: style = "property_1: value_1; property_2: value_2;... property_n: value_n;" Example: <p style="font-size: x-large; color: #ff9900"> Paragraph using inline style sheets </p> Introduction System Software. Copyright Teodor Rus p.15/59
Document Style Specification Defined in the content of the style element within the header of the document. General form of the content of a style element is: <style type = "text/css"> style rule list </style> Each style rule in the list has two parts: a selector, which indicate the tag (or tags) affected by the rule, and a list of property/value pairs. The form of a style rule is: selector { property_1: value_1; property_2: value_2;... property_n: value_n; } Values of a multi-value property are separated by space or comma! Introduction System Software. Copyright Teodor Rus p.16/59
External Style Specification External style sheets have the same form to that of the document style sheetss; External style seets are stored in a file whose name is.css terminated; External style sheets are referenced using < link > tag or are imported in the document using @import directiove. Introduction System Software. Copyright Teodor Rus p.17/59
Keeping Style Sheets Readable Comment style sheets rules! Note: one cannot use XHTML comment here, one needs to use C like comment, /* comment */; Structure style sheets by their selectors, as in: <style type = "text/css"> /* Style rules for the initial paragraph */ rules here /* Style rules for other paragaraphs */ rules here /* Other style rule */ rules here </style> Introduction System Software. Copyright Teodor Rus p.18/59
Style Rule Selectors Simple selector forms; Class selectors; Generic selectors; id selectors; Universal selectors. Introduction System Software. Copyright Teodor Rus p.19/59
Simple Selector Forms Element tag names followed by the style rule. The selector is a comma separated list of element tag names; Property values in the style sheet apply to all occurrences of named elements; Example: h1 {font-sixe 24pt;} h2,h3 {font-size: 20pt}; Contextual selectors, specify that the style should apply only to elements in certain position. Example: form em {front-size: 14;} /* note: no commas between tags */ applies only to em elements that are nested in the form element of a document. Introduction System Software. Copyright Teodor Rus p.20/59
Class Selectors Are used to allow different occurrences of the same tag to use different styles. The selector is a tag name followed by a class attribute value, such as p.normal, p.warning etc.; The attribute class is then used in the opening tag with the value of the style required; Example style specification: p.normal {property-value list} p.warning {property-value list} Introduction System Software. Copyright Teodor Rus p.21/59
Example Style Use <p class = "normal"> A paragraph presented in "normal style"; </p> <p class = "warning"> A paragraph presented in "warning style". Introduction System Software. Copyright Teodor Rus p.22/59
Generic Selector A generic class is defined as a class selector without the tag. Style rule definition:.sale {property-value list} Style rule use: In the document we may have: <h3 class = "sale"> Weekend sale </h3>... <p class = "sale"> Items displayed with style "sale" </p> Introduction System Software. Copyright Teodor Rus p.23/59
id Selectors The general form of an id selector is: #specific-id {property-value list} The style specified by a specific id selector applies to elements with the specific id. Example: #section14 {font-size: 20} specifies a font size of 20pt to the element <h2 id = "section14"> Text presented in 20pt size </h2> Introduction System Software. Copyright Teodor Rus p.24/59
Universal Selector The universal selector, denoted by an asterisk, applies its style to all element in the document. Example: * {color: red} makes all elements in the document red. Introduction System Software. Copyright Teodor Rus p.25/59
Pseudo Classes Pseudo classes are styles that apply when something happens rather than because the element simple exists (they are used in Fomrs). The two pseudo classes supported are: hover and focus. FX2 supports hover and focus, IE7 supports hover; The name of a pseudo class begin with : (colon) (while name of a class begins with. (period); The style of hover applies when its associated element has mouse cursor over; The style of focus applies when its associated element has focus (i.e., cursor is placed over). Introduction System Software. Copyright Teodor Rus p.26/59
Example Pseudo Class <!-- pseudo.html; illustrates :hover and :focus --> <html xmlns = "http://www.w3.org/1999/xhtml"> <head><title>pseudo Classes </title> <style type = "text/css"> label :hover {color: red;} label :focus {color: green;} </style> </head> <body> <form action = ""> <p> <label> Your name: <input type = "text" /> </label> </p> </form> </body> </html> Note: focus (only) work in Safari Introduction System Software. Copyright Teodor Rus p.27/59
Property Value Forms CSS1 includes 60 different properties in 7 categories: 1. fonts, 2. lists, 3. text alignment, 4. margins, 5. colors, 6. background, and 7. borders. See complete list on W3C Web site. Introduction System Software. Copyright Teodor Rus p.28/59
Kind of Property Values Keyword property values are used when only few of then are available; Number values (integers or a sequence of digits) are used when no meaningful units can be attached to a numeric property value; Length property values, number values followed by a length unit; Percentage values, provide a measure relative to a previously used property; URL property values (slightly different from references to URLs in links); Color properties (color name or 6 digits hex number #abc123, RGB (red, green, blue combination)). Introduction System Software. Copyright Teodor Rus p.29/59
Inherited Properties CSS2 specifies that some property values are inherited by elements nested in the element for which the values are specified. Example: background-color is not inherited; font-size is inherited. For example: body {fron-size: 16pt} set the default property for the whole document. Introduction System Software. Copyright Teodor Rus p.30/59
Font Properties Font Families; Font Size; Font Variants; Font Styles; Font Weights; Font Shorthands. Introduction System Software. Copyright Teodor Rus p.31/59
Font Families The font-family property is used to specify a list of font names. Browser uses first font in the list that it supports. Example font property: font-family: Arial, Helvetica, Futura The following table contains the generic fonts: Table 1: Generic Fonts Generic Name Examples serif sans-serif cursive fantasy monospace Times New Roman, Garamond MS Arial, Helvetica Caflisch Script, Zapf-Chancery Critter, Cottonwood Courier, Prestige Introduction System Software. Copyright Teodor Rus p.32/59
Observation If a font name has more than one word the whole name should be in quotes. Example: font-family: Time New Roman Note: Serifs are non-structural decorations at the end of characters; Sans-serif is the french exprerssion for "no serif". Introduction System Software. Copyright Teodor Rus p.33/59
Font Size The font-size property characterizes the font size in points. The value of a font-size property can be measured: In points, such as font-size: 10pt Relative font-size values are: xx-small, x-small, small, medium, large, x-large, xx-large; Percentage (+ or -) from the current font. Introduction System Software. Copyright Teodor Rus p.34/59
Font Variants Default value of the font-variant property is normal. font-variant: normal specifies the usual character font; font-variant: small-caps specifies small cap characters (all characters uppercase); Note: normal upper-cap characters are larger that small-caps. Introduction System Software. Copyright Teodor Rus p.35/59
Font Styles The font-style property is used to specify italic and oblique. Note: some browsers do not support oblique. Introduction System Software. Copyright Teodor Rus p.36/59
Font Weights The font-weight property specifies the degree of boldness. Example: font-weight: bold Other values are: normal, bolder, lighter. Degree of boldness can also be specified in multiple of 100, from 100 to 900, where normal is 400 and bold is 700. Introduction System Software. Copyright Teodor Rus p.37/59
Font Shorthands If more than one value must be specified, the value must be stated in a list as the value of the font property. Example: font: bold 14pt Time New Roman Palation The order in which properties are given in a font property is important. This order must be: {font style, font variant, font weight} font size font name. Note: only the font size and font family are required in the font value list. Introduction System Software. Copyright Teodor Rus p.38/59
Example Font Properties <xhtml xmlns = "http://www.w3.org/1999/xhtml"> <head> <title> Font Properties </title> <style type = "text/css"> p.major {font-size: 14pt; font-style: italic; font-family: serif;} p.minor {font: bold 10pt Garamond;} h2 {font-family: Times New Roman ;font-size: 24pt;font-weight: bold;} h3 {font-family: Courier New ; font-size: 18pt;} </style> </head> <body> <p class = "major"> If a job is worth doing, it s worth doing right. < <p class = "minor"> Two wrongs don t make a right but they certainly can get you in a lot of trouble. </p> <h2> Chapter 1 Introduction </h2> <h3> 1.1 The Basics of Computer Networks </h3> </body> </html> Introduction System Software. Copyright Teodor Rus p.39/59
Text Decoration The text-decoration property is used to specify special features of the text. Available values: line-through, overline, underline, none Note: text-decoration is not inherited. The file decoration.html illustrates line-through, overline, underline. The letter-spacing property controls the amount of space between characters. Possible values are length property values, such as 3px. Introduction System Software. Copyright Teodor Rus p.40/59
Example Text Decoration <html xmlns = "http://www.w3.org/1999/xhtml"> <head <title> Text decoration </title> <style type = "text/css"> p.delete {text-decoration: line-through;} p.over {text-decoration: overline;} p.under {text-decoration: underline;} </style> </head> <body> <p class = "delete"> This illustrate line-through. </p> <p class = "over"> This illustrate overline.</p> <p class = "under"> This illustrate underline. </p> </body> </html> Introduction System Software. Copyright Teodor Rus p.41/59
List Properties The shape of bullets and of the sequencing values that precede items in a list are specified by list-style-type property. The list-style-type of an unordered list can be set to: disc, circle, square, none. Default value is disc. The disc-style-image can also be specified with url form. Example: <style type = "text/css"> li.image {list-style-image = url("figure.gif");} </style>... <li class = "image"> Item prefixed by figure.gif </li> The values of list-style-type used for an ordered list are: decimal, upper-alpha, lower-alpha, upper-roman, lower-roman. Introduction System Software. Copyright Teodor Rus p.42/59
Example List Style The file sequence.html illustrates the usage of list-style-type property. Introduction System Software. Copyright Teodor Rus p.43/59
Color Three levels of collections of colors might be used by an XHTML document: 1. Standard name colors (see table below); 2. Named colors (140 named colors, not all browsers support all); 3. Web palette (216 Web-safe colors) colors. Name HexCode Name HexCode Name HexCode Name HexCode aqua 00ffff black 000000 blue 0000FF fuchsia FF00FF gray 808080 green 008000 lime 00ff00 maroon 800000 navy 000080 olive 808000 purple 800080 red FF0000 silver C0C0C0 teal 008080 white FFFFFF yellow FFFF00 Introduction System Software. Copyright Teodor Rus p.44/59
Color Properties Color properties are: color, background-color. The value of a color property is a color name or the color hex code prfixed by #. Introduction System Software. Copyright Teodor Rus p.45/59
Example <style type = "text/css"> th.red {color: red;} th.orange {color: orange;} p.standout {color: blue; background-color: red;} </style>... <table border = "3px"> <tr> <th class = "red"> Apple </th> <th class = "orange"> Oranges </th> </tr> </table>... <p class = "standout"> To really make it standout use red beckground </p> Introduction System Software. Copyright Teodor Rus p.46/59
Alignment of Text The alignment properties are: text-indent, text-align, float The text-indent property is used to specify text indentation. Its value is the length of percentage of text indentation. For example: <style type = "text/css"> p.indent {text-indent: 0.5in;} </style>... <p class = "indent"> Now is the time to act! </p> The text-align property is used to specify horizontal text alignment. Its values are the keywords left, center, right, justify. Default is left. The float is used to specify that text should flow around some element, often an image or a table. Possible values are left, rights or none which is default. Introduction System Software. Copyright Teodor Rus p.47/59
The Box model Virtually all document elements can have borders, which can have various styles, such as color and width. Thus, document elements can be characterized by the (abstract) box containing them, using the following concepts: Outer Edge: is the box border containing the element; Inner Edge: is the box border containing an inner element nested in an outer element. Content: is the text contents of the element; Padding: is the space between the border of an inner element and the border of the element containing it; Margin: is the space between the border of outer element and the document margin. Introduction System Software. Copyright Teodor Rus p.48/59
Border Style Properties The border-style controls element border and its style; border-top-style, border-bottom-style, border-right-style, control border components style; border-width, border-top-width, border-bottom-width, border-left-width, border-right-width; border-color, border-top-color, border-bottom-color, border-left-color, border-right-color. Introduction System Software. Copyright Teodor Rus p.49/59
CSS Border Requirements CSS1 requires that border be available for any element but only border style is solid; CSS2 provides several border styles such as: dotted, dashed, double and none which is the default value of border-style property; Introduction System Software. Copyright Teodor Rus p.50/59
Border Style Specification The style of a particular side of the border can be set with: border-top-style, border-bottom-style, border-left-style, border-right-style; The border-width property is used to specify border s sickness with values thin, medium, thick or length value in pixels; The width of each four border elements can be specified with border-top-width, border-bottom-width, border-left-width, border-right-width. The color of border (elements) is specified by the color. Introduction System Software. Copyright Teodor Rus p.51/59
Margins and Padding Padding is the space between the content of an element and its border; Margin is the space between the border of an element and the element s neighbor; When there is no border the margin plus the padding is the space between the content of the element and its neighbor. Here it may appear that there is no difference between padding and margin. Note: When an element has a background there is a difference between padding and margin when the element has no borders: background extend to the padding but not into the margin. Introduction System Software. Copyright Teodor Rus p.52/59
Margin Properties The margin properties are named margin and apply to all four sides of an element: margin-left, margin-right, margin-top, margin-bottom; The padding properties are named padding and apply to all four sides of an element: padding-left, padding-right, padding-top, padding-bottom. The example marpad.html illustrate some combinations of margin and padding. Introduction System Software. Copyright Teodor Rus p.53/59
Background Images The background-image property is used to place an image in the background of the element. Example: image.html illustrate this. Replication of the image is called tilling and can be controlled with background-repeat property which takes the values: repeat, no-repeat, repeat-x, repeat-y (no-repeat specifies just one copy of the image); Position of a no-repeating background image is specified by the background-position property which takes the values top, center, bottom, left, right. Introduction System Software. Copyright Teodor Rus p.54/59
The < span > Tag Sometimes we need to apply special font properties to less than a whole paragraph! < span > tag allows us to apply different properties to a phrase in a line. There is no default layout for the content of < span > Example: <p> It is fun to be in <span> total </span> control </p> displays control no different then other parts of the phrase. To make it different one can use < span > to change the properties of its content. Example: <style type = "text/css">.spanred {font-size: 24pt; font-family: Arial; color: red;} </style> <p> It is fun to be in <span> total </span> control </p> will display the word total differently. Introduction System Software. Copyright Teodor Rus p.55/59
The < div > Tag It is more convenient to apply a style to a section of a document using < div > tag than using < p > tag. As with < span > tag, there is no implied layout of the Content in an < div > Content < /div > element. The following example illustrate the style design for a div > element: <div class = "primary"> <p>... </p> <p>... </p>... <p>... </p> </div> The Content in the element < div > Content < /div > is displayed using the style called "primary". Introduction System Software. Copyright Teodor Rus p.56/59
Conflicts A conflict occurs when two different values for the same property apply on the same element. If the conflict occurs because different values are used in the three different levels of style sheets, it is resolved by the style sheets precedence rule: external document inline. Other source of conflicts occurs because of inheritance, specificity, and using!important specification as in the following example: p.special {font-style: italic!important; font-size: 14;} If conflicts occur during the document display by the browser, the browser needs to resolve it. Introduction System Software. Copyright Teodor Rus p.57/59
Conflict Resolution Is a multistage sorting process that orders the style properties associated with an element in the order of their application: 1. Important declarations with user origin; 2. Important declaration with the author origin; 3. Normal declarations with author origin; 4. Normal declarations with user origin; 5. Any declarations with browser (or other user agent) origin; Introduction System Software. Copyright Teodor Rus p.58/59
More Conflict Resolution If there are still conflicts after sorting the next step is sort by specificity using the following order: 1. id selectors are first; 2. Class and pseudo-class selectors; 3. Contextual selectors; 4. Universal selectors. If there are still conflicts, the precedence of most recently seen specification is used. Example: in the sequence p { font-size: 12pt;} p {font-size: 10pt} p {font-size: 10pt:} is the most recently seen. Introduction System Software. Copyright Teodor Rus p.59/59