comp sci 3461 cascading style sheet cs346 fall 2009

Comp Sci 346Comp Sci 346 11

Cascading Style SheetCascading Style Sheet

CS346CS346

Fall 2009Fall 2009


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


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


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


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)


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


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”>


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>


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>::


Validation of CSSValidation of CSS

External style sheets can be validated

http://jigsaw.w3.org/css-validator/#validate_by_upload


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



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

Style Specification FormatsStyle Specification Formats Document-level/Embedded:Document-level/Embedded:<style type = "text/css">  </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


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" />



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


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


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


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


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


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>


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


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


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


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


Graphic Arts tooGraphic Arts too

Css Zen Garden projectCss Zen Garden project http://www.csszengarden.com/http://www.csszengarden.com/


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


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


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


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


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


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


Property Value FormsProperty Value Forms

Colors Backgrounds Fonts Lists Alignment of text Margins Borders


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!


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


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


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


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


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


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


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


Style PropertiesStyle Properties

www.w3.org/TR/REC-CSS2 lists www.w3.org/TR/REC-CSS2 lists allall CSS CSS style propertiesstyle properties


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


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">


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)


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


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


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}


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


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


Box ModelBox Model

content

padding border margin


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


Block-level elementsBlock-level elements

Always begin on a new lineAlways begin on a new line ParagraphsParagraphs HeadingsHeadings ListsLists TablesTables divsdivs


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


List-item elementsList-item elements

<li></li> elements in unordered and order <li></li> elements in unordered and order listslists


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


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


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


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


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


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


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


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


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)


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


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


<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


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


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)


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


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)


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

comp sci 3461 cascading style sheet cs346 fall 2009

Documents