C:\acbooks\QPack2008\CSS.fm 9/28/08r.r 1 Introduction to Cascad Just What presented as a "tree" model) th at can be displayed to a user, usually visually, but aural style quirements. The actual /* mystyle.css (This is a comment line in a CSS file) */ h1 { font-family:Arial; font-size:16pt; } h2 {font-family:Arial; font-size:14pt; } p { font-family: "Times New Roman"; font-size:1em; } The example above first displays a comment line, C:\acbooks\QPack2008\CSS.fm 9/28/08r.r 2 Keeping Content and Presen tation Separate with CSS herwise the closest available Similarly, the second rule says th Keeping Content and Presentation Separate with CSS presentation was offered in the form of anothe r W3C complementary presentation language called ing, for example, in a separate CSS document, calle the rule might specify that all often present the same content on different client modes will be very different. Having the con ontent to remain the same while several different C:\acbooks\QPack2008\CSS.fm 9/28/08r.r 3 Origins and Evolution Word Processors (WP), Web Styling Desk Top Publishing has always us larly, word processors like Microsoft Wo Browser Implementations crop of browsers, IE 6.0 a The CSS specification is now at CSS1 in 1996. Much has changed of course, and many new de vices have caused a re-thinking of how specs are to be developed and issued. Currently, one of the most issue them in a modular fashion. So, instead of rest in making additions to the specifica cation, it will be much easier and more efficien support all of CSS. For exam may care nothing for aural styles. In such case that specifies a cation that forms the basis for th C:\acbooks\QPack2008\CSS.fm 9/28/08r.r 4 Origins and Evolution Rule Structure lows: structure ***. First off, the whole structure is called a then decomposes into a and a in turn . Within each of those there is a property show a Once the selector matches an element, it then applies a color property value of "red" to the text and also makes the text "italic". Type Selector - this selects elements in h1 { color:silver; } h1 h1,h2,h3,h4 { font-family:Arial; } applies the same font "Ari al", to all of the listed in CSS1) this selects ele p em {color:red; } elements from the document . Note that the p element can . p.warning em {color:green; } This specifies that if there is a paragraph in the HTML document that is specially marked as a "warni p clas&#xp cl; s6s;&#x="wa;&#xrnin;&#xg" 0;s="warning" This is a warning paragraph text with subtext that m00;&#x/em0;em turns green /em &#x/p00;and on and on. /p Universal Selector - this will se will cause all text in the docum Child Selector - this will select any el C:\acbooks\QPack2008\CSS.fm 9/28/08r.r 5 Origins and Evolution p strong {color:green; } will cause a strong element to color it Adjacent Sibling Selector - this will select any element that follows a specific element in the p + cite {color:yellow; } element (at the same level). This means there is no other element Class Selector - The class selector is used to ing properties and values. Here th e specially marked feature is indicated by the ".warning" suf fix on the paragraph selector. S o, any paragraph element marked as a "warning" have its text colored red and made italic. (We have seen an exampl e of this earlier). Similarly, I could specify that a head tag marked as warning woul d also need to be set as red italic text. The p.warning { color:red; font-style:italic; } h1.warning { color:red; font-style:italic; } or more compactly, p.warning, h1.warning {color:red; font-style:italic; } or really compact! *.warning {color:red; font-style:italic; } Within the HTML document, we mark such pa the attribute "class" . . . !-- previous HTML co!--;&#x pre;&#xviou;&#xs HT;&#xML c;&#xo6de;&#x --0;de -- p clas&#xp cl; s6s;&#x="wa;&#xrnin;&#xg" 0;s="warning" Do NOT drop this carton! . . . !-- additional HTML !--;&#x add;&#xitio;&#xnal ;&#xHTML;&#x 6co;Þ -; code -- . . . !-- additional HTML !--;&#x add;&#xitio;&#xnal ;&#xHTML;&#x 6co;Þ -; code -- ID Selector - This type of selector is used to assign propert ies to an element with a specific and unique identifier. As contrasted with the "Class" elements, the ID selector can fix on the paragraph selector. So , a paragraph in the HTML docum ent marked as a "unique123" p#unique123 { color:red; font-style:italic; } p#unique456 { color:blue; font-style:italic; } Within the HTML document, we mark such para graphs by inserting the attribute "id" with . . . !-- previous HTML co!--;&#x pre;&#xviou;&#xs HT;&#xML c;&#xo6de;&#x --0;de -- p id="&#xp id;&#x="6u;&#xniqu;&#x" 00;unique123" Do NOT drop this carton! /p0;/p . . . !-- additional HTML !--;&#x add;&#xitio;&#xnal ;&#xHTML;&#x 6co;Þ -; code -- p id="&#xp id;&#x="6u;&#xniqu;&#x" 00;unique456" Do NOT drop this carton! /p0;/p C:\acbooks\QPack2008\CSS.fm 9/28/08r.r 6 . . . !-- additional HTML !--;&#x add;&#xitio;&#xnal ;&#xHTML;&#x 6co;Þ -; code -- Inheritance Inheritance is where a nest ed ( child) element inheri ts the property values of its parent or ancestor, if these property values aren't declared in the child. For exam ple, suppose we had the following body {color:black;} p {color:red;} h1{ font-size:1.25em;} In this case, the element encloses all of the other el the text in the document will be black. Since the element overrides the co lor element, the outcome will be paragraph text. Also, any tags nested within the element will inherit this red text, un less it overrides th element, being nested within the element, will in ement content is laid out, prim arily in the visual mode. The two basic layout patterns within C SS are the Box model and the Inline layout model. In effect, these are "layout managers" that may be familiar to the reader from the graphics components of languag es like Java. CSS assumes that every generates one or more boxe s. These are rectangular and are called element boxes . This box has a content core that is surrounded by padding, borders, th "positioned elements" and "flo ating elements". Consider the border-left-width + + + + left C:\acbooks\QPack2008\CSS.fm 9/28/08r.r 7 In an inline formatting context, boxes are la id out horizontally, one after the other, beginning at the top of a containing bloc k. Horizontal margins, borders, and pad ding are respected between these boxes. The boxes may be aligned vertically in different ways: their bottoms or tops may be aligned, or the baselines of text within them may be aligned. The rectangu lar area that contains the boxes that form a line is called a line box. When several inline boxes cannot fit horizont ally within a single line box, they are distributed among two or more vertically-s tacked line boxes. Thus, a paragraph is a vertical stack of line boxes. Line box es are stacked with no vertical separation and they never overlap. In general, the left edge of a line box touches the le ft edge of its containing block and the right edge touches the right edge of its c ontaining block. However, floati taining block edge and the line line boxes in the same inline formatting context generally have the same width (that of the containing bloc k), they may vary in width if available horizontal space is reduced due to floats. Line boxes in the same inline formatting context generally vary in height (e.g., one line might c ontain a tall image while the others contain only Since an inline box may not exceed the width of a line box, long inli ne boxes are split into several boxes and these boxes distributed acro ss several line boxes. When an inline box is split, margins, borders, and padding have no visual effect where the split occurs. Formatting of margins, borders, split occurs within a Inline boxes may also be split into several boxes within the same li ne box due to bidi Property Values Once a property is specified, such as a color property, then that requires a value to be associated with it. On the other ha nd, a property such as a margin on the left side of the text, that is , it can take a numeric such as 0.5i n. Below you will see several sect ions of types of values that properties can take. It wi ll be convenient to spec ify several keyword that will represent these cat The keywords used in th olo;&#xr ke;&#xywor; 00;color keyword C:\acbooks\QPack2008\CSS.fm 9/28/08r.r 8 hexadecima&#xhe5.;x1.;㫞Å.1;&#xima5;&#x.1l0;l Value Representations Double vertical bars ( || ) indicate alternates, but you can select any one ( or more) in any order. ord, value types, or groups, the following symbols will be used: An asterisk ( * ) indicates that the preceding entity ( that is keyword, value type, or group), can entity is optional. 1.A plus sign( + ) indicates the preceding entity must occur at least once, with an unlimited A pair of integer within curl ing entity. For example indicates that the word can occur from zero up to Value Framework Color Values Color values can be used to specif y a foreground color, that is, text ground color. In addition, borders can have colo rs specified. A keyword for the color values de scribed below is *color*. The particular types of va lues that may be used to specify colors follow: ponds to how much "red" is in the color, denotes the "blue" quantity. Each of these nd pure blue would be written as - #0000FF. rgb(r%, g%, b%) - Using percentages from 0- 100, then red would be written as - rgb(100%, 0%, 0%), while blue would look like - rgb (0%, 0%, 100%). Gray would be rgb(50%, 50%, C:\acbooks\QPack2008\CSS.fm 9/28/08r.r 9 ds: aqua, black, blue, fuchsia, gray, green lime, maroon, navy, olive, purple, red, silver, teal, white, yellow. Length Values Absolute and relative lengths ar + sign. The numeric value is em ( em-height) - *this is the pr eferred measure on the web. It is a measure that depends on the current font's character box height . Traditionally, this was equivale nt to the width of the capital elements). These are the small dots that make up the total imag Since each monitor has (usually) a dif they are still useful however. Angle Values These are used for Time Values These are used for Frequency Values These are used for String Values C:\acbooks\QPack2008\CSS.fm 9/28/08r.r 10 Percentage Values bers optionally preceded by a sign (+ , -). These values are URI values (Universal Resource Indicator) are used fo r unique identifications , or more usually to refer to a more specific type of URI called a URL (Univers al Resource Locator). A common body {background-image: url(http://www.company.com/images/jpg1.jpg) } This example will attempt to fetch a "jpg" image from a location on the web and use that image as element. These values will be re :link, :visited, and :active are called and are used to assign properties to link states such as unvisite d, visited, active and hover. Thes e are all associated with the 1.a:link {color:purple;} 2.a:visited {color:gray;} 3.a:active {color:red;} 4.a:hover {color:fuchsia;} Pseudo-Elements - this selector is used to apply styles to the firs first letter of element "E". first:line - this selector is used to apply styles to the first line of an element. For example: E:first-line {color:red;} "E". - this selector is used to put generated content into the document before the content E:before {content:"Look Ahead!"; color:blue;} generated content after the c ontent of an element. For exam E:after {content:"Look Behind You!"; color:blue;} content of the element "E". C:\acbooks\QPack2008\CSS.fm 9/28/08r.r 11 style &#xstyl; 6t;&#xype=;&#x"tex;&#xt/cs;&#xs" 0;type="text/css" @import url(extra.css&#x/sty;&#xle 0;) /style @media print {body {margin-left:5cm;} } @media screen {body {margin-left:2em;} } @media print,screen {body {color:gray;} } @page @page {size: 8.5in 11in; margin: 1in; } CSS - {HTML, XHTML} Interactions ement that is inserted within the section of an (X)HTML docum ent. The structure of this this spec in context as follows: identifying a We will extract from this spec property table, as shown below. Legend for the Table The following symbols and their interpretations are as follows: Interpretation choose any one, in any order. C:\acbooks\QPack2008\CSS.fm 9/28/08r.r 12 CSS Reference Table ( Selectors and Properties ) CSS Property Table apply to the preceding at least "n" times and no more that "m" times. Selector Type Type selectors Type selectors is a descendant of Matches element E if E is the source anchor of div.warning Class selectors Property Name CSS Values Initial value(s) 'background' alternatives listed ['background-color' || 'background-image' blue url(snow.gif) top center scroll attachment: scroll} C:\acbooks\QPack2008\CSS.fm 9/28/08r.r 13 an image to be placed image: url(snow.png) left; } repeated background repeat|repeat-x|repeat-y|no-repeat | inherit alternatives listed ['border-width' || 'border- h3 { border: 0.15em inset blue; background- color:transpar erties 'border-color' erties 'border-style' border- ord;r22;&#x.8--;.2s;&#xtyle;style {1,4}|inherit erties 'border-top' 'border- right' 'border-bottom' 'border-left' ['border-top-width'||'border-olo;&#xr000;style'|| color ]|inherit erties C:\acbooks\QPack2008\CSS.fm 9/28/08r.r 14 'border-top-color' 'border-right-color' 'border-bottom-color' 'border-left-color' 'border-top-style' 'bor der-right-style' 'bor der-bottom-style' 'border-left-style' set the styles of border segments border- ord;r22;&#x.9--;.1s;&#xtyle;style |inherit 'border-top-width' 'border-right-width' 'border-bottom-width' 'border-left-width' border- ord;r22;&#x.6--;.4w;&#xidth;width |inherit 'border-width' border- ord;r22;&#x.8--;.2w;&#xidth;width{1,4}|inherit erties to floated elements none|left|right|both|inherit user agent dependent h1 { color:#f00; background:trans h3{color:green; background:trans color:#ff3300; background:trans rgb(255, 0,0); background:trans C:\acbooks\QPack2008\CSS.fm 9/28/08r.r 15 play properties play:block; pad ding: 0.5em; border:0.1em;} make an element left|right|none|inherit ariant'||'font-weight']? p { font: bold 1.15em/120% fonts to be selected user agent dependent p { font-family: Arial, sans- this is the size of the characters in the cho &#xrela;&#xtive;&#x-siz;relative-size style:italic; font-family: Arial, sans- 'font-variant' p { font-vari ant:small-caps; font-size:1.3em; style:italic; font-family: Arial, sans- C:\acbooks\QPack2008\CSS.fm 9/28/08r.r 16 'font-weight' 100|200|300|400|500|600|700|800|900|inherit h3 {font-family: yle-position'||'list-style-image']|inherit erties 'list-style-image' this refers to an image marker for a list this places the marker relative to the list con 'list-style-type' this sets the ordinal or imal|lower-roman|upper- roman| lower-alpha|upper-alpha|none|inherit 'margin' this sets the spacing mar&#xmar1;.8g;&#xin-w;&#xidth;gin-width{1,4}|inherit erties body {margin: 2em 1em 3em 4em; } 'margin-top' 'margin- right' 'margin-bottom' 'margin-left' this sets the margin for that segment of the that is, margin above, mar&#xmar1;.7g;&#xin-w;&#xidth;gin-width|inherit C:\acbooks\QPack2008\CSS.fm 9/28/08r.r 17 this sets immediate bottom' 'padding-left' that is, padding above, user agent dependant h3 {text-align: p { text-align: h3 {text-decora tion: underline; color:blue; back ground:transpar a { text-decora tion: underline; color:purple; } 'text-transform' set the vertical align C:\acbooks\QPack2008\CSS.fm 9/28/08r.r 18 Additional Features of the CSS Language Linking and Styling Approaches Here are the ways you can invoke th e properties specified in Table I, shown later in this document. The Style Element This STYLE element is c ontained within the HEAD element and is used to embed styles within is nested within the HEAD element) : style type= "text/css"&#x s4.;t-2;&#xyle ;&#xtype;&#x= "t;xt/;ss4;&#x.4"-;.6 ; h1 { color:red; margin-top:2em; } Link Element The LINK element is nested within the HEAD element and is used to reference an external style sheet to be used with this web page. For example, here is a call out to use This rule is nested within the STYLE element and must appear before any ot her style rules. It is styl&#x sty;&#xl6e ;&#xtype;&#x= "t;xt/;ss"; e type= "text/css" h1 { color:red; margin-top:2em; } /styl&#x/sty;&#xl6e ;e &#xleng;&#xth00;&#xperc;nta;&#xge00;length| percentage|auto|inherit h3 {width: 15em; height:7em; bor ding:2em 1em 2em;