CSI 3140 WWW Structures, Techiques ad Stadards Cascadig Style Sheets (CSS)
Motivatio whtml markup ca be used to represet Sematics: h1 meas that a elemet is a top-level headig Presetatio: h1 elemets look a certai way wit s advisable to separate sematics from presetatio because: It s easier to preset documets o multiple platforms (browser, cell phoe, spoke, ) It s easier to geerate documets with cosistet look Sematic ad presetatio chages ca be made idepedetly of oe aother (divisio of labor) User cotrol of presetatio is facilitated
Style Sheet Laguages wcascadig Style Sheets (CSS) Applies to (X)HTML as well as XML documets i geeral Focus of this chapter wextesible Stylesheet Laguage (XSL) Ofte used to trasform oe XML documet to aother form, but ca also add style XSL Trasformatios covered i later chapter
CSS Itroductio wa styled HTML documet produced by the style sheet style1.css:
CSS Itroductio lik elemet associates style sheet with doc.
CSS Itroductio type attribute specifies style laguage used
CSS Itroductio href attribute provides style sheet URL
CSS Itroductio title attribute provides style sheet ame
CSS Itroductio Alterative, user selectable style sheets ca be specified
CSS Itroductio
CSS Itroductio wa styled HTML documet produced by the style sheet style2.css:
CSS Itroductio Note that alterate, user selectable style is ot widely supported: firefox 3 ad IE 8 do, but IE 6, IE 7 ad Chrome do t.
CSS Itroductio wsigle documet ca be displayed o multiple media platforms by tailorig style sheets: This documet will be prited differetly tha it is displayed.
CSS Sytax wparts of a style rule (or statemet)
CSS Sytax: Selector Strigs wsigle elemet type: wmultiple elemet types: wall elemet types: wspecific elemets by id:
CSS Sytax: Selector Strigs
CSS Sytax: Selector Strigs welemets belogig to a style class: class selector: begis with a period. Referecig a style class i HTML: welemets of a certai type ad class:
CSS Sytax: Selector Strigs welemets belogig to a style class: Referecig a style class i HTML: this spa belogs to three style classes welemets of a certai type ad class:
CSS Sytax: Selector Strigs welemets belogig to a style class: Referecig a style class i HTML: welemets of a certai type ad class: this rule applies oly to spa s belogig to class special
CSS Sytax: Selector Strigs wsource achor elemets: pseudo-classes welemet types that are descedets:
CSS Sytax: Selector Strigs wsource achor elemets: welemet types that are descedats: rule applies to li elemet that is
CSS Sytax: Selector Strigs wsource achor elemets: welemet types that are descedats: rule applies to li elemet that is part of the cotet of a ol elemet
CSS Sytax: Selector Strigs wsource achor elemets: welemet types that are descedats: rule applies to li elemet that is part of the cotet of a ol elemet that is part of the cotet of a ul elemet
CSS Sytax wstyle rules covered thus far follow ruleset sytax wat-rule is a secod type of rule URL relative to style sheet URL Reads style rules from specified URL Must appear at begiig of style sheet
Style Sheets ad HTML wstyle sheets refereced by lik HTML elemet are called exteral style sheets wstyle sheets ca be embedded directly i HTML documet usig style elemet wmost HTML elemets have style attribute (value is list of style declaratios)
Style Sheets ad HTML wrules of thumb: Use exteral style sheets to defie site-wide style Prefer style sheets (either exteral or embedded) to style attributes XML special characters l Must use refereces i embedded style sheets ad style attribute l Must ot use refereces i exteral style sheets
CSS Rule Cascade wwhat if more tha oe style declaratio applies to a property of a elemet? wthe CSS rule cascade determies which style rule s declaratio applies
CSS Rule Cascade To fid the value for a elemet/property combiatio, user agets must apply the followig sortig order: 1- Fid all declaratios that apply to the elemet ad property i questio, for the target media type. Declaratios apply if the associated selector matches the elemet i questio.
CSS Rule Cascade 2- The primary sort of the declaratios is by weight ad origi: for ormal declaratios, author style sheets override user style sheets which override the default style sheet. For "!importat" declaratios, user style sheets override author style sheets which override the default style sheet. "!importat" declaratio override ormal declaratios. A imported style sheet has the same origi as the style sheet that imported it. Five origi/weight levels: 1. user/importat 2. author/importat 3. author/ormal 4. user/ormal 5. user aget/ormal
CSS Rule Cascade 3- The secodary sort is by specificity of selector: more specific selectors will override more geeral oes. Pseudoelemets ad pseudo-classes are couted as ormal elemets ad classes, respectively. Specificity: 1. style attribute 2. rule with selector: 1. ID 2. class/pseudo-class 3. descedat/elemet type 4. uiversal 3. HTML attribute
CSS Rule Cascade 4- Fially, sort by order specified: if two rules have the same weight, origi ad specificity, the latter specified wis. Rules i imported style sheets are cosidered to be before ay rules i the style sheet itself. Coceptually, create oe log style sheet. Later style rules have higher priority tha earlier rules.
CSS Iheritace wwhat if o style declaratio applies to a property of a elemet? wgeerally, the property value is iherited from the earest acestor elemet that has a value for the property wif o acestor has a value (or the property does ot iherit) the CSS defies a iitial value that is used
CSS Iheritace
CSS Iheritace wproperty values: Specified: value cotaied i declaratio l Absolute: value ca be determied without referece to cotext (e.g., 2cm) l Relative: value depeds o cotext (e.g., larger) Computed: absolute represetatio of relative value (e.g., larger might be 1.2 x paret fot size) Actual: value actually used by browser (e.g., computed value might be rouded)
CSS Iheritace wmost properties iherit computed value Exceptio discussed later: lie-height wa little thought ca usually tell you whether a property iherits or ot Example: height does ot iherit
CSS Fot Properties w A fot is a mappig from code poits to glyphs Glyph (visual represetatio) character cell (cotet area)
CSS Fot Properties w A fot is a mappig from code poits to glyphs glyphs do ot ecessary stay iside cells!
CSS Fot Properties wa fot family is a collectio of related fots (typically differ i size, weight, etc.) wfot-family property ca accept a list of families, icludig geeric fot families first choice fot
CSS Fot Properties wa fot family is a collectio of related fots (typically differ i size, weight, etc.) wfot-family property ca accept a list of families, icludig geeric fot families secod choice fot
CSS Fot Properties wa fot family is a collectio of related fots (typically differ i size, weight, etc.) wfot-family property ca accept a list of families, icludig geeric fot families geeric
CSS Fot Properties geeric fots are systemspecific
CSS Fot Properties wnote that most geeric fot ca be easily set o Firefox ad Chrome, but such optio does t seem to be available o IE 7 ad 8. IE will still default to somethig although maybe ot what you had hoped for!
CSS Fot Properties w May properties, such as fot-size, have a value that is a CSS legth w All CSS legth values except 0 eed uits
CSS Fot Properties Computed value of fot-size property
CSS Fot Properties wreferece fot defies em ad ex uits Normally, referece fot is the fot of the elemet beig styled Exceptio: Usig em/ex to specify value for fot-size paret elemet s fot is referece fot
CSS Fot Properties wother ways to specify value for fot-size: Percetage (of paret fot-size) Absolute size keyword: xx-small, x-small, small, medium (iitial value), large, x-large, xx-large l User aget specific; should differ by ~ 20% Relative size keyword: smaller, larger l Relative to paret elemet s fot
CSS Fot Properties
CSS Fot Properties wtext is redered usig lie boxes wheight of lie box give by lie-height Iitial value: ormal (i.e., cell height; relatioship with em height is fot-specific) Other values (followig are equivalet):
CSS Fot Properties wwhe lie-height is greater tha cell height: wiheritace of lie-height: Specified value if ormal or uit-less umber Computed value otherwise
CSS Fot Properties wfot shortcut property:
CSS Fot Properties wfot shortcut property: Iitial values used if o value specified i fot property list (that is, potetially reset)
CSS Fot Properties wfot shortcut property: specifyig lie-height (here, twice cell height) ay order size ad family required, order-depedet
CSS Text Formattig
CSS Text Color wfot color specified by color property wtwo primary ways of specifyig colors: Color ame: black, gray, silver, white, red, lime, blue, yellow, aqua, fuchsia, maroo, gree, avy, olive, teal, purple, full list at http://www.w3.org/tr/svg11/types.html#color Keywords red/gree/blue (RGB) values
CSS Text Color
CSS Text Color
CSS Box Model wevery redered elemet occupies a box: (or outer edge) (or ier edge)
CSS Box Model
CSS Box Model
CSS Box Model
CSS Box Model
CSS Box Model
CSS Box Model
CSS Box Model
CSS Box Model
CSS Box Model wif multiple declaratios apply to a property, the last declaratio overrides earlier specificatios Left border is 30px wide, iset style, ad red
Backgrouds wbackgroud-color Specifies backgroud color for cotet, paddig, ad border areas Margi area is always trasparet Not iherited; iitial value trasparet wbackgroud-image Specifies (usig url() fuctio) image that will be tiled over a elemet
Backgrouds <body style="backgroud-image:url('cucumberflowerpot.pg')">
Normal Flow Layout wi ormal flow processig, each displayed elemet has a correspodig box html elemet box is called iitial cotaiig block ad correspods to etire documet Boxes of child elemets are cotaied i boxes of paret Siblig block elemets are laid out oe o top of the other Siblig ilie elemets are oe after the other
Normal Flow Layout (body) (html)
Normal Flow Layout Block elemets oly
Normal Flow Layout html body div d1 div d2 div d3 div d4 Top edges of block boxes are i documet order
Normal Flow Layout wwhat is a block elemet? Elemet with value block specified for its display property User aget style sheet (ot CSS) specifies default values; typical block elemets iclude html, body, p, pre, div, form, ol, ul, dl, hr, h1 through h6 Most other elemets except li ad table-related have ilie specified for display
Normal Flow Layout wwhe blocks stack, adjacet margis are collapsed to the size of the larger margi
Normal Flow Layout wiitial value of width property is auto, which for block boxes meas to make the cotet area as wide as possible withi margi/paddig costraits: Width of block boxes icreases as browser cliet area is wideed
Normal Flow Layout wca also specify CSS legth or percetage (of paret s cotet width) for width property By default, width of right margi is adjusted to accommodate a chage to width
Normal Flow Layout wca also specify CSS legth or percetage (of paret s cotet width) for width property Ceterig ca be achieved by settig both margis to auto
Normal Flow Layout wboxes correspodig to character cells ad ilie elemets are laid out side by side i lie boxes that are stacked oe o top of the other Heights based o cotet Character cells aliged by baselie
Normal Flow Layout Paddig/borders/margis affect width but ot height of ilie boxes
Normal Flow Layout wspecify value for vertical-alig to positio a ilie elemet withi lie box: iitial value of verticalalig
Beyod Normal Flow wcss allows for boxes to be positioed outside the ormal flow: Relative positioig spa s shifted backwards relative to ormal flow
Beyod Normal Flow wcss allows for boxes to be positioed outside the ormal flow: Float positioig spa take out of ormal flow ad floated to the left of its lie box
Beyod Normal Flow wcss allows for boxes to be positioed outside the ormal flow: Absolute positioig spa s removed from ormal flow ad positioed relative to aother box
Beyod Normal Flow wproperties used to specify positioig: positio: static (iitial value), relative, or absolute l Elemet is positioed if this property ot static l Properties left, right, top, bottom apply to positioed elemets w Primary values are auto (iitial value) or CSS legth float: oe, left, or right l Applies to elemets with static ad relative positioig oly
Beyod Normal Flow wrelative positioig Specifyig positive value for right property of relatively positioed box moves it to left <spa style="backgroud-color:red">&bsp;&bsp;&bsp;&bsp; </spa><spa class="right">red</spa> spa cotaiig text moves left
Beyod Normal Flow wrelative positioig Specifyig egative value for left property also moves box to left <spa style="backgroud-color:red">&bsp;&bsp;&bsp;&bsp; </spa><spa class="right">red</spa> same effect as before
Beyod Normal Flow wfloat positioig Specify value for float property
Beyod Normal Flow wfloat positioig Specify value for float property Floated elemet becomes a CSS block elemet (e.g., ca set height ad width)
Beyod Normal Flow wabsolute positioig Specify locatio for corer of box relative to positioed cotaiig block p elemets are positioed (but do t move!) cotaiig block margi area paddig area This secod paragraph has a ote.
Beyod Normal Flow wabsolute positioig Specify locatio for edges of box relative to positioed cotaiig block
Beyod Normal Flow wabsolute positioig 10em paddig top edge paddig left edge
Beyod Normal Flow wabsolute positioig 8em
Beyod Normal Flow wabsolutely positioed box does ot affect positioig of other boxes! Secod absolutely positioed box obscures first
CSS Positio-Related Properties wz-idex: drawig order for overlaid boxes (largest umber draw last)
CSS Positio-Related Properties wdisplay: value oe meas that elemet ad its descedats are ot redered ad do ot affect ormal flow wvisibility: value hidde (iitial value is visible) meas that elemet ad its descedats are ot redered but still do affect ormal flow