CS346: Advanced Databases Graham Cormode [email protected] Query Planning and Optimization.
Comp Sci 3461 Cascading Style Sheet CS346 Fall 2009.
-
Upload
evelyn-merritt -
Category
Documents
-
view
220 -
download
0
Transcript of Comp Sci 3461 Cascading Style Sheet CS346 Fall 2009.
Comp Sci 346Comp Sci 346 11
Cascading Style SheetCascading Style Sheet
CS346CS346
Fall 2009Fall 2009
Comp Sci 346Comp Sci 346 22
XHTML: eXtensible HyperText Markup XHTML: eXtensible HyperText Markup LanguageLanguage
Instructions to browserInstructions to browser Describe how to Describe how to renderrender a web page a web page
Two types of info:Two types of info: Structure/ContentStructure/Content PresentationPresentation
Comp Sci 346Comp Sci 346 33
Cascading Style Sheets (CSS)Cascading Style Sheets (CSS)
Mechanism for separating presentation Mechanism for separating presentation (style) from structure/content(style) from structure/content
What constitutes "style"?What constitutes "style"? Font, font sizeFont, font size Bold, underlined, italic, blinking textBold, underlined, italic, blinking text Vertical and horizontal alignmentVertical and horizontal alignment Margins, borders, paddingMargins, borders, padding Foreground and background colorsForeground and background colors Layout Layout
Comp Sci 346Comp Sci 346 44
CSS PropertiesCSS Properties
CSS1CSS1 (’96) — 50 Properties (’96) — 50 Properties CSS2CSS2 (’98) — 70 Additional Properties (’98) — 70 Additional Properties
AuralAural BoxBox Color & BackgroundColor & Background ClassificationClassification FontFont
Functional in 4.0 Browsers or GreaterFunctional in 4.0 Browsers or Greater http://www.zvon.org/xxl/css1Reference/Output/index.htmlhttp://www.zvon.org/xxl/css1Reference/Output/index.html
Comp Sci 346Comp Sci 346 55
3 Levels of Style Types3 Levels of Style Types
InlineInline — modify the appearance of a particular tag — modify the appearance of a particular tag
(lowest)(lowest)
EmbeddedEmbedded — applied to an entire document — applied to an entire document
Redefine appearance of all occurrences of tag (middle)Redefine appearance of all occurrences of tag (middle)
LinkedLinked — external file of declarations specified for any — external file of declarations specified for any
number of documents in an entire site (highest)number of documents in an entire site (highest)
Comp Sci 346Comp Sci 346 66
Where do I Specify Style Information?Where do I Specify Style Information?
InlineInline - - stylestyle attribute of any XHTML attribute of any XHTML element (not really separate from element (not really separate from structure/content)structure/content)
EmbeddedEmbedded - In the <head> element of an - In the <head> element of an XHTML documentXHTML document
LinkedLinked - In an ASCII file with an extension - In an ASCII file with an extension of .css external to (and shared by) XHTML of .css external to (and shared by) XHTML documentsdocuments
Comp Sci 346Comp Sci 346 77
Inline StyleInline Style Use the Use the stylestyle attribute in the tag attribute in the tag
SyntaxSyntax
<tag style=“attribute:value1; attribute:value2”><tag style=“attribute:value1; attribute:value2”> Semi-colon separated list of property:value pairsSemi-colon separated list of property:value pairs
• <p style = "font-size: 1.5em"><p style = "font-size: 1.5em">Contents of the paragraph</p>Contents of the paragraph</p>
font-sizefont-size is a is a propertyproperty 1.5em1.5em is the is the valuevalue of of font-sizefont-size
ExamplesExamples
<h1 style=“color:green; font-family:sans-serif”><h1 style=“color:green; font-family:sans-serif”>
<b style=“color:yellow; background-color:green”><b style=“color:yellow; background-color:green”>
Comp Sci 346Comp Sci 346 88
Embedded StyleEmbedded Style
SyntaxSyntax selector {declarations}selector {declarations}
<head><head>
<title>Untitled</title><title>Untitled</title>
<style type="text/css"><style type="text/css">
h1 {color:green; font-family:sans-serif}h1 {color:green; font-family:sans-serif}
b {color:yellow; background-color:green}b {color:yellow; background-color:green}
</style></style>
</head></head>
Comp Sci 346Comp Sci 346 99
External Style SheetsExternal Style Sheets
Many documents can share a common Many documents can share a common stylestyle
Put content of embedded style sheet into a Put content of embedded style sheet into a text file but without text file but without <style> </style><style> </style> tagstags
Name the file with extension .css e.g. Name the file with extension .css e.g. master.cssmaster.css
Link style file to document in <Link style file to document in <head>head>::
Comp Sci 346Comp Sci 346 1010
Validation of CSSValidation of CSS
External style sheets can be validated
http://jigsaw.w3.org/css-validator/#validate_by_upload
Comp Sci 346Comp Sci 346 1111
Style Specification FormatsStyle Specification Formats
Inline: Style sheet appears as the value of the style
attribute General syntax:<tag style = "property_1: value_1; property_2: value_2; … property_n: value_n;“> See See CSS/Apply/inline.html
Comp Sci 346Comp Sci 346 1212
Style Specification FormatsStyle Specification Formats
Document-level/Embedded/Internal Document-level/Embedded/Internal Style sheet is a list of rules specified in <style> tag
The <style> tag must be <style type = “text/css”> Place the list of rules in an HTML comment
• Because the rules are not HTML tags• To hide styles from older browsers
Comments in the rule list in the form of (/*…*/)
Example: See Example: See CSS/Apply/embedded.html
Comp Sci 346Comp Sci 346 1313
Style Specification FormatsStyle Specification Formats Document-level/Embedded:Document-level/Embedded:<style type = "text/css"> <!-- rule list --> </style> Form of the rules: selector {list of property/values} Each property/value pair has the form: property: value
Multiple pairs separated by semicolons, as in style tag
Comp Sci 346Comp Sci 346 1414
External Style SheetsExternal Style Sheets
Many documents can share a common styleMany documents can share a common style Put content of embedded style sheet into a text Put content of embedded style sheet into a text
file but without file but without <style> </style><style> </style> tags tags Name the file with extension .css e.g. master.cssName the file with extension .css e.g. master.css
Link style file to document in <Link style file to document in <head>head>::<link rel = "stylesheet"<link rel = "stylesheet" type = "text/css"type = "text/css" href = “master.css" />href = “master.css" />
Comp Sci 346Comp Sci 346 1515
Style Specification FormatsStyle Specification Formats
External style sheetsExternal style sheets Syntax:Syntax:
A list of style rules as in a <style> tag in document-A list of style rules as in a <style> tag in document-level style sheetlevel style sheet
But But NONO <style> or </style> tags <style> or </style> tags Example: Example: CSS/Apply/link.html, , CSS/Apply/base.css Comments: /* and */ in external style sheetComments: /* and */ in external style sheetCSS/Apply/link_comments.htmlCSS/Apply/link_comments2.html
Comp Sci 346Comp Sci 346 1616
Who has precedence?Who has precedence?
If multiple style sheets conflict, the If multiple style sheets conflict, the lowestlowest level or level or lastlast style sheet has precedence style sheet has precedence
ExamplesExamplesCSS/Apply/link.html external onlyexternal only
CSS/Apply/conflict.html external vs embeddedexternal vs embedded
CSS/Apply/conflict2_linklast.html embedded vs externalembedded vs external
CSS/Apply/conflict3.html external vs embeded vs inlineexternal vs embeded vs inline
Comp Sci 346Comp Sci 346 1717
Selector Forms
1. Simple Selector Forms
Syntax: tag name or a list of tag names, separated by commas
Examples:p {color:blue;}See CSS/name.htmlh1, h3 {color:blue;}See CSS/group.html
Comp Sci 346Comp Sci 346 1818
Selector Forms
2. Contextual selectors Syntax: tag names separated by space Exampleol ol li {color:blue;}
Applied only to li elements which are descendants of ol elemets which are descendants of ol elements
See CSS/descendant.html
Comp Sci 346Comp Sci 346 1919
Selector Forms3. Class Selectors
Syntax: tag.className A style class is given a nameA style class is given a name className className, which is attached to a tag , which is attached to a tag
namename Effect: to enable different occurrences of the same tag to use Effect: to enable different occurrences of the same tag to use
different style specificationsdifferent style specifications Examplep.para1 {color:red;}p.para2 {color:blue;} See CSS/class.htmlSee CSS/class.html.para {color:red;}.para {color:red;} All elements with classes para are selectedAll elements with classes para are selected
Comp Sci 346Comp Sci 346 2020
Selector Forms The class for a particular occurrence of a tag is specified with
the class attribute of the tag
For example,p.para1 {color:red;}p.para2 {color:blue;}
<p class = “para1"> ... </p> ... <p class = “para2"> ... </p>
Comp Sci 346Comp Sci 346 2121
Selector Forms
4. id Selectors Purpose: enable the application of a style to one
specific element with that id Syntax: #specific-id {property-value list} Example:<h2 id = “section2”>1.2 CSS</h2> #section2 {font-size: 20}See divid.html and divid.cssSee divid.html and divid.css
Comp Sci 346Comp Sci 346 2222
Selector Forms5. Generic Selectors
Purpose: To apply a style to more than one kind of tag
Note: A generic class must be named in tags, and the name must begin with a period in the selector
Example .really-big { … } /* all elements with class really-big */
<h1 class = "really-big"> … </h1> ... <p class = "really-big"> … </p> The style will be applied to the selected h1 and p classes
Comp Sci 346Comp Sci 346 2323
Selector Forms
6. Pseudo Classes Selecting link elements based on their state Selecting part of an element
Syntax: Names begin with colons Example:a:link {color:red}a:visited{color:yellow}a:focus {color:olive}a:hover {color:green}a:active {color:blue} See CSS/state.html
Comp Sci 346Comp Sci 346 2424
Selector Forms
6. Pseudo Classes Selecting part of an element
Syntax: Names begin with colons Example:div#oshkosh p:first-line {color:red}div#oshkosh p:first-letter {color:red}p:first-letter { font-size: 200%; float: left }
See CSS/firstline.html, firstline.css See CSS/firstletter.html See CSS/firstletter2.html See CSS/firstchild.html
Comp Sci 346Comp Sci 346 2525
Graphic Arts tooGraphic Arts too
Css Zen Garden projectCss Zen Garden project http://www.csszengarden.com/http://www.csszengarden.com/
Comp Sci 346Comp Sci 346 2626
7. Misc. Selector Forms (not in IE)
A. Children elementsA. Children elementsdiv#oshkosh div#oshkosh >> p {color:red} p {color:red} Chooses those p elements that are Chooses those p elements that are childrenchildren of div element with id of div element with id
oshkoshoshkosh See CSS/children.htmlSee CSS/children.html
B. Adjacent SiblingB. Adjacent Siblingdiv#oshkosh pdiv#oshkosh p++h3 {color:red;}h3 {color:red;}#oshkosh p#oshkosh p++h3 {color:red;}h3 {color:red;} Desired target is h3Desired target is h3 ““p” is an element p” is an element immediately precedingimmediately preceding the desired target (h3) the desired target (h3)
within the same parent elementwithin the same parent element #oshkosh must be unique#oshkosh must be unique See example CSS/adjsibling.htmlSee example CSS/adjsibling.html
Comp Sci 346Comp Sci 346 2727
7. Misc. Selector Forms (not in IE)
C. Select elements based on C. Select elements based on attributesattributes Syntax element[attribute] { …}Syntax element[attribute] { …} Not supported by IENot supported by IE Example: div[class] {color:red}Example: div[class] {color:red} See CSS/attribute.htmlSee CSS/attribute.html
Comp Sci 346Comp Sci 346 2828
Difference between class and idDifference between class and id
IDs identify a specific element IDs identify a specific element UniqueUnique Only use a specific ID once per documentOnly use a specific ID once per document Basic rule of HTML/XHTML but not observed by many Basic rule of HTML/XHTML but not observed by many
browsersbrowsers Classes mark elements as members of a groupClasses mark elements as members of a group
Not necessarily uniqueNot necessarily unique Can be used multiple times, Can be used multiple times,
CSS Application: to apply a style to multiple CSS Application: to apply a style to multiple elements, use a classelements, use a class
Comp Sci 346Comp Sci 346 2929
Alternate Style SheetsAlternate Style Sheets
To designate a style sheet as first choice (but To designate a style sheet as first choice (but can be deactivated), add title=“can be deactivated), add title=“ labellabel” to link ” to link element. “element. “labellabel” identifies the preferred style ” identifies the preferred style sheetsheet
To designate a style sheet as an alternate To designate a style sheet as an alternate choice use rel=“choice use rel=“alternate stylesheetalternate stylesheet” title=“” title=“labellabel” ” in link elementin link element
Supported by Netscape 6, Opera, FirefoxSupported by Netscape 6, Opera, Firefox Support dropped in later versionsSupport dropped in later versions See example CSS/Apply/choices.htmlSee example CSS/Apply/choices.html
Comp Sci 346Comp Sci 346 3030
Importing External Style SheetImporting External Style Sheet
Earlier Importing style sheets was an Earlier Importing style sheets was an alternative way to linkalternative way to link
Now a trick to bypass buggy browsersNow a trick to bypass buggy browsers Use @import “Use @import “filename.cssfilename.css”” Must precede all rulesMust precede all rules Example: Netscape 4.x does not Example: Netscape 4.x does not
understand @import and ignores it.understand @import and ignores it. See CSS/Apply/import.htmlSee CSS/Apply/import.html
Comp Sci 346Comp Sci 346 3131
User styleUser style Browsers allow users to specify users’ preferred way of Browsers allow users to specify users’ preferred way of
rendering a pagerendering a page IE:Tools>Internet Options/AccessabilityIE:Tools>Internet Options/AccessabilitySelect “Format documents using my style sheet” and use Select “Format documents using my style sheet” and use
“Browse…” button to select the style sheet“Browse…” button to select the style sheet Opera: Tools>Preferences>select “Enable styling of Opera: Tools>Preferences>select “Enable styling of
forms”, click “Styling Options…” button, set Default mode forms”, click “Styling Options…” button, set Default mode to “user mode” and use the “Choose” button to select to “user mode” and use the “Choose” button to select desired style sheet.desired style sheet.
Firefox?Firefox? Use CSS/Apply/userstyle.cssUse CSS/Apply/userstyle.css
Comp Sci 346Comp Sci 346 3232
Property Value FormsProperty Value Forms
Colors Backgrounds Fonts Lists Alignment of text Margins Borders
Comp Sci 346Comp Sci 346 3333
LengthLength Length - numbers, maybe with decimal points Units:
px - pixels in - inches cm - centimeters mm - millimeters pt - points pc - picas (12 points) em - height of the letter ‘m’ ex-height - height of the letter ‘x’
No space is allowed between the number and the unit specification
e.g., 1.5 in is illegal!
Comp Sci 346Comp Sci 346 3434
CCoolloorrss: Color Names: Color Names
16 color names recognized by all versions of 16 color names recognized by all versions of HTML (Appendix Fig. B.1)HTML (Appendix Fig. B.1)
AquaAqua GrayGray NavyNavy SilverSilver
BlackBlack GreenGreen OliveOlive TealTeal
BlueBlue LimeLime PurplePurple WhiteWhite
FuchsiaFuchsia MaroonMaroon RedRed YellowYellow
Comp Sci 346Comp Sci 346 3535
Extended Color NamesExtended Color Names
XHTML added 124 Extended Color XHTML added 124 Extended Color Names (appendix B.2 of Deitel)Names (appendix B.2 of Deitel)
Not all browsers support the Extended Not all browsers support the Extended Color NamesColor Names
Use color valuesUse color values
Comp Sci 346Comp Sci 346 3636
Color ValuesColor Values Color — combination of three primary colorsColor — combination of three primary colors
RGBRGB — Red, Green, Blue— Red, Green, Blue
Software uses a triplet of primary colors to define any Software uses a triplet of primary colors to define any colorcolor
0 — absence of color0 — absence of color
255 — highest intensity of color255 — highest intensity of color
• Red = 255,0,0; Green = 0,255,0; Yellow = 255,255,0Red = 255,0,0; Green = 0,255,0; Yellow = 255,255,0
Often represented in HexadecimalOften represented in Hexadecimal
2552553 = 3 = 16.7 million combinations16.7 million combinations
Comp Sci 346Comp Sci 346 3737
Color ValuesColor Values
Alternate format for green: Alternate format for green: #00ff00#00ff00 In general, six hexadecimal digits In general, six hexadecimal digits
preceded with #preceded with # Red intensityRed intensity Green intensityGreen intensity Blue intensityBlue intensity
Comp Sci 346Comp Sci 346 3838
Web Safe ColorsWeb Safe Colors
216 Colors Displayed Same in All Browsers216 Colors Displayed Same in All Browsers
Any Hex Notation That Includes:Any Hex Notation That Includes:
00, 33, 66, 99, CC, FF00, 33, 66, 99, CC, FF
Comp Sci 346Comp Sci 346 3939
Foreground and Background colorsForeground and Background colors
color foreground color of elements
background-color
background color of elements
Example: CSS/Property/color.html
CSS/Property/background-color.html
Comp Sci 346Comp Sci 346 4040
BackgroundsBackgroundsbackground-color: #00ff00background-color: #00ff00background-image: url("tess.jpg")background-image: url("tess.jpg")background-repeatbackground-repeat
values:values: repeat repeat-x repeat-yrepeat repeat-x repeat-yno-repeatno-repeat
background-attachmentbackground-attachmentvalues:values: scroll fixedscroll fixed
background-position: 50% 100%background-position: 50% 100%Point 50% across and 100% down image is positionedPoint 50% across and 100% down image is positioned
50% across and 100% down the padding area50% across and 100% down the padding area
background-position: 1cm 2cmbackground-position: 1cm 2cmUpperleft corner of image is positioned 1cm over and 2cm down from upperleft corner Upperleft corner of image is positioned 1cm over and 2cm down from upperleft corner of paddingof padding
Comp Sci 346Comp Sci 346 4141
Style PropertiesStyle Properties
www.w3.org/TR/REC-CSS2 lists www.w3.org/TR/REC-CSS2 lists allall CSS CSS style propertiesstyle properties
Comp Sci 346Comp Sci 346 4242
Font-related PropertiesFont-related Propertiesfont-familyfont-family Use font name. Use quotes for names w/ whitespaceUse font name. Use quotes for names w/ whitespace<h1 style = "font-family: 'Times New Roman' "><h1 style = "font-family: 'Times New Roman' ">
Generic font families:Generic font families: serif sans-serif cursive serif sans-serif cursive fantasy monospacefantasy monospace
<h1 style = "font-family: 'Times New Roman', serif "><h1 style = "font-family: 'Times New Roman', serif ">
Use multiple fonts to ensure all characters are rendered Use multiple fonts to ensure all characters are rendered as desiredas desired
Use generic font family as a fallbackUse generic font family as a fallback
Comp Sci 346Comp Sci 346 4343
font-sizefont-size Length values Length values 12pt 1.5em 12pt 1.5em Absolute (browser has a table of these sizes)Absolute (browser has a table of these sizes)
xx-small x-small small medium xx-small x-small small medium large x-large xx-largelarge x-large xx-large
Relative (to parent element's font-size)Relative (to parent element's font-size)
larger smaller larger smaller Percentage values (relative to parent's font-Percentage values (relative to parent's font-
height) height) 120% 80%120% 80%<h1 style = "font-size: medium"><h1 style = "font-size: medium">
Comp Sci 346Comp Sci 346 4444
More Font-related PropertiesMore Font-related Properties font-stylefont-style
normal oblique italicnormal oblique italic font-weight – font-weight – degree of boldnessdegree of boldnessnormal bold bolder lighternormal bold bolder lighterAs a multiple of 100:As a multiple of 100: 100 200 300 400 500 100 200 300 400 500 600 700 800 900600 700 800 900
font-variantfont-variant normal small-capsnormal small-caps
To specify a list of font propertiesTo specify a list of font propertiesfont: bolder 14pt Arial Helvetica Order must be: style, weight, size, name(s)
Comp Sci 346Comp Sci 346 4545
Font ExamplesFont Examples text-decoration propertyline-through, overline, underline, none
letter-spacing – value is any length property value
CSS/Property/fonts.htmlCSS/Property/fonts.html CSS/Property/fonts2.htmlCSS/Property/fonts2.html CSS/Property/decoration.htmlCSS/Property/decoration.html CSS/Property/letterspacing.htmlCSS/Property/letterspacing.html
Comp Sci 346Comp Sci 346 4646
List properties list-style-type controls how list items are displayedcontrols how list items are displayed Unordered lists
disc circle squaredisc circle square Example: CSS/Property/ul.htmlExample: CSS/Property/ul.html Use list-style-image to display an image as a bullet Example: home.htmlExample: home.html
li {list-style-image: url(http://www.uwosh.edu/departments/computer_science/dotblue.gif) }
Ordered lists decimal lower-roman upper-romandecimal lower-roman upper-roman upper-alpha lower-alphaupper-alpha lower-alpha
Comp Sci 346Comp Sci 346 4747
CSS rules for nested listsCSS rules for nested lists
/* Rules for standard outline numbering *//* Rules for standard outline numbering */
ol ol {list-style-type: upper-roman}{list-style-type: upper-roman}
ol ol ol ol {list-style-type: upper-alpha}{list-style-type: upper-alpha}
ol ol ol ol ol ol {list-style-type: decimal}{list-style-type: decimal}
ol ol ol ol {list-style-type: lower-alpha}ol ol ol ol {list-style-type: lower-alpha}
Comp Sci 346Comp Sci 346 4848
Alignment of Text text-indent property to allow indentation
either a length or a % value text-align property
left (the default), center, right, or justify float property
To flow the text around another element possible values:
left, right, and none (the default) To place an element (e.g. image) on the right with text
flowing on its left, use • default text-align value (left) for the text and• the right value for float on the element on the right
Example: CSS/Property/float.htmlCSS/Property/float2.html
Comp Sci 346Comp Sci 346 4949
PositioningPositioning
CSS gives authors control over positioning CSS gives authors control over positioning of elementsof elements
Every element has a boxEvery element has a box Two main types of boxes:Two main types of boxes:
Default type determined by elementDefault type determined by element Can override with Can override with display: block display: block orordisplay: inlinedisplay: inline
Three positioning schemesThree positioning schemes
Comp Sci 346Comp Sci 346 5151
Element ClassificationElement Classification
CSS recognizes three types of elements:CSS recognizes three types of elements: Block-level elementsBlock-level elements Inline elementsInline elements List-item elementsList-item elements
An invisible element box surrounds every An invisible element box surrounds every elementelement
Each box has outer edge, margin, border, Each box has outer edge, margin, border, padding, and inner edgepadding, and inner edge
Comp Sci 346Comp Sci 346 5252
Block-level elementsBlock-level elements
Always begin on a new lineAlways begin on a new line ParagraphsParagraphs HeadingsHeadings ListsLists TablesTables divsdivs
Comp Sci 346Comp Sci 346 5353
Inline elementsInline elements
IncludeInclude Anchors <a></a>Anchors <a></a> SpansSpans Form elementsForm elements ImagesImages
Exists in natural flow without forced line Exists in natural flow without forced line breaksbreaks
May contain other inline elements but not May contain other inline elements but not block-level elementsblock-level elements
Comp Sci 346Comp Sci 346 5454
List-item elementsList-item elements
<li></li> elements in unordered and order <li></li> elements in unordered and order listslists
Comp Sci 346Comp Sci 346 5555
Scheme 1: Normal FlowScheme 1: Normal Flow Block formatting contextBlock formatting context
Boxes laid out vertically Boxes laid out vertically Vertical margins collapseVertical margins collapse Left edge of box touches left edge of containing Left edge of box touches left edge of containing
blockblock
Inline formatting contextInline formatting context Boxes laid out horizontally into “line boxes”Boxes laid out horizontally into “line boxes” Line boxes are stacked horizontallyLine boxes are stacked horizontally Line box edges touch left & right edges of Line box edges touch left & right edges of
containing blockcontaining block A long inline box may be splitA long inline box may be split
Comp Sci 346Comp Sci 346 5656
Relative PositioningRelative Positioning
Specified bySpecified by
position: relativeposition: relative
Box is laid out according to normal flowBox is laid out according to normal flow Box is then shifted according to Box is then shifted according to
left right top bottom left right top bottom properties properties Values can be lengths or percentagesValues can be lengths or percentages Subsequent boxes unaffectedSubsequent boxes unaffected
Comp Sci 346Comp Sci 346 5757
Scheme 2: FloatsScheme 2: Floats
Remove an element from normal flow byRemove an element from normal flow byfloat: left float: left oror float: right float: right
The element floats to one side (left or The element floats to one side (left or right)right)of the containing blockof the containing block
Other content flows around the floatOther content flows around the float Other block boxes are placed w/o regard to Other block boxes are placed w/o regard to
floating boxesfloating boxes Line boxes alongside floats are shortenedLine boxes alongside floats are shortened
Comp Sci 346Comp Sci 346 5858
The The clearclear property property
Prevents an element from being adjacent Prevents an element from being adjacent to a floating elementto a floating element
May only be specified for a block-level May only be specified for a block-level elementelement
Values are Values are left right bothleft right both Specifies which edges may not be Specifies which edges may not be
adjacent to a floatadjacent to a float
Comp Sci 346Comp Sci 346 5959
Scheme 3: Absolute PositioningScheme 3: Absolute Positioning
Specify absolute positioning by Specify absolute positioning by position: absoluteposition: absolute
Position of element's box specified byPosition of element's box specified byleft right top bottom left right top bottom properties which properties which are offsets between containing block and box's are offsets between containing block and box's edgesedges
Values can be lengths or percentagesValues can be lengths or percentages Absolute boxes do not affect layout of later Absolute boxes do not affect layout of later
boxesboxes Margins of absolute boxes do not collapseMargins of absolute boxes do not collapse
Comp Sci 346Comp Sci 346 6060
Border propertiesBorder properties border-colorborder-color
color valuecolor value transparent transparent border-styleborder-style
none dotted dashed solid doublenone dotted dashed solid double
groove ridge inset outsetgroove ridge inset outset Can set these individuallyCan set these individually::
border-top-styleborder-top-style border-right-styleborder-right-style border-bottom-styleborder-bottom-style border-right-styleborder-right-style
Comp Sci 346Comp Sci 346 6161
Border propertiesBorder properties border-widthborder-width
thin medium thick thin medium thick length valuelength value Can set these individuallyCan set these individually::
border-top-widthborder-top-width border-right-widthborder-right-width border-bottom-widthborder-bottom-width border-right-widthborder-right-width
Comp Sci 346Comp Sci 346 6262
Border ShorthandBorder Shorthand
Border shorthand format: Order must be Border shorthand format: Order must be width style colorwidth style color
Example:Example:
border: thick dashed #0000ffborder: thick dashed #0000ff
border-bottom: thin groove redborder-bottom: thin groove red
Comp Sci 346Comp Sci 346 6363
Margin propertiesMargin properties margin-top margin-bottom margin-top margin-bottom margin-left margin-rightmargin-left margin-rightLength value or percentageLength value or percentagePercentage is relative to width of parentPercentage is relative to width of parent
ShorthandShorthandmargin 1em margin 1em (all sides)(all sides)margin 1em 2em margin 1em 2em
(top&bottom=1, left&right=2)(top&bottom=1, left&right=2)margin 1em 2em 3emmargin 1em 2em 3em
(top=1, left&right=2, bottom=3)(top=1, left&right=2, bottom=3)margin 1em 2em 3em 4emmargin 1em 2em 3em 4em
(top=1, right=2, bottom=3, left=4)(top=1, right=2, bottom=3, left=4)
Comp Sci 346Comp Sci 346 6464
Together with <div>Together with <div>
<div>…</div><div>…</div> — used to contain other HTML elements— used to contain other HTML elements
***Displayed discretely from the rest of the document by adding ***Displayed discretely from the rest of the document by adding paragraph breaks before and after the contents of the <div>paragraph breaks before and after the contents of the <div>
AttributesAttributes
align=“left|center|right”align=“left|center|right” — sets the alignment of the <div> — sets the alignment of the <div> contentscontents
class=“name”class=“name” — apply a CSS class to the <div> contents— apply a CSS class to the <div> contents
Comp Sci 346Comp Sci 346 6565
Together with <div>Together with <div>
Source:Source: This is some text <div style="color:#FF0000;">This is some text <div style="color:#FF0000;">
<h4>This is a header in a div section</h4><h4>This is a header in a div section</h4><p>This is a paragraph in a div section</p><p>This is a paragraph in a div section</p></div>Reminder of the text </div>Reminder of the text
Output:Output:
This is some text This is some text This is a header in a div sectionThis is a header in a div sectionThis is a paragraph in a div sectionThis is a paragraph in a div sectionReminder of the textReminder of the text
Comp Sci 346Comp Sci 346 6666
<span><span>
<span>…</span><span>…</span> — used to contain other HTML — used to contain other HTML elementselements
Used within text blocksUsed within text blocks
AttributesAttributes
class=“name”class=“name” — apply a CSS class to the <span> contents— apply a CSS class to the <span> contents
Example:Example: To present 'first-letter' pseudo-element in To present 'first-letter' pseudo-element in
p:first-letter { font-size: 200%; float: left }p:first-letter { font-size: 200%; float: left }See example CSS/firstLetter.htmlSee example CSS/firstLetter.html
Comp Sci 346Comp Sci 346 6767
Together with <span> Together with <span> SourceSource
<p>This is a paragraph <span style="color:#0000FF;">This is a <p>This is a paragraph <span style="color:#0000FF;">This is a paragraph</span> This is a paragraph</p> <p>paragraph</span> This is a paragraph</p> <p><span style="color:#00DD45;"><span style="color:#00DD45;">This is another paragraphThis is another paragraph</span></span></p></p>
Output:Output:
This is a paragraph This is a paragraph This is a paragraphThis is a paragraph This This is a paragraphis a paragraph
This is another paragraphThis is another paragraph
Comp Sci 346Comp Sci 346 6868
CascadingCascading
CSS rules can be specified by:CSS rules can be specified by: Author (external, embedded, inline)Author (external, embedded, inline) UserUser User agent (browser)User agent (browser)
Primary precedence:Primary precedence: User !important User !important Author !important Author !important Author Author User User UA (User Agent)UA (User Agent)
Comp Sci 346Comp Sci 346 6969
CascadingCascading
Secondary precedence: Secondary precedence:
more specific rules have precedence over more specific rules have precedence over more general rulesmore general rules
Breaking ties: Breaking ties:
when two rules have equal precedence, when two rules have equal precedence, the last one winsthe last one wins
Comp Sci 346Comp Sci 346 7070
InheritanceInheritance
Some style properties are inherited from Some style properties are inherited from ancestor elementsancestor elements
All properties may explicitly have the value All properties may explicitly have the value inherit inherit which forces inheritance (not which forces inheritance (not supported by all browsers)supported by all browsers)
Comp Sci 346Comp Sci 346 7171
Resolving Style PrecedenceResolving Style Precedence
DescendantDescendant — — element within an elementelement within an element
ParentParent — — element that contains another elementelement that contains another element
InheritanceInheritance — — styles defined for parent are styles defined for parent are transferred to descendanttransferred to descendant
Override by specifying different style for element’s descendantsOverride by specifying different style for element’s descendants
Conflicts — resolved closest to tagConflicts — resolved closest to tag