css: cascading style sheets
TRANSCRIPT
Computer Science and Engineering n College of Engineering n The Ohio State University
CSS:Cascading Style Sheets
Lecture 10
Computer Science and Engineering n The Ohio State University
Evolution of CSS
o MIME type: text/csso CSS 1 ('96): early recognition of valueo CSS 2 ('98): improvements in language
n Adding media types (screen vs print)n Inconsistent support by browsers
o CSS 2.1 ('11)n In practice since '04n Took forever to standardize
o CSS 3n Breaks standard into many (50?) modulesn Various modules already adopted & supported
Computer Science and Engineering n The Ohio State University
Key Idea
o Separate content and stylen Different languages (syntax):HTML vs CSSn Different documents
o Goal: Single-point-of-control-over-changen Change font of every word in paragraph?n Change font of every <em> element in
document?n Change font of every <em> element in every
document on a site?n Change font of every <em> element which is
part of instructions, but not finalized, on site?
Computer Science and Engineering n The Ohio State University
CSS Syntax
o CSS is declarative (not procedural)n Describe a thing, not how to do compute itn Example: RE matching
o CSS = list of rules (order can matter)o Rule = a location & the style to use thereo Basic syntax of a rule
selector {property1: style1;property2: style2;. . .
} /*comments always help*/
Computer Science and Engineering n The Ohio State University
Example CSSh2 {/* draconian OSU visual identity */
color: darkred; background: gray;
/* additional gratuitous styling */font-style: italic;
}
Computer Science and Engineering n The Ohio State University
Available Properties (Styles)o Background
background-color, background-imageo Text, font
line-height, text-alignfont-size, font-style
o Border, margin, paddingborder-left-width, border-bottom-color
o Positioningclear, display, float
o Dimensiono List, table
list-style-typeborder-collapse, caption-side
o Generated content and other fancy stuff
Computer Science and Engineering n The Ohio State University
Shorthand Propertieso Example: Margins have 4 sides
margin-top: 3px;margin-right: 5px;margin-bottom: 7px;margin-left: 9px;
o Shorthand property: marginmargin: 3px 5px 7px 9px; /*TRBL*/margin: 7px 9px; /*TB sides*/margin: 2px 6px 8px; /*T sides B*/
o Mnemonic: always "TRouBLe"n Missing values filled in with provided value(s)
o Other shorthand properties:n Border-width, padding, font, border, background…
Computer Science and Engineering n The Ohio State University
Including CSS: Mechanicso Embed directly in element
<p style="color:red;background:gray">o Place in style element in head
<head><style media="screen" type="text/css">
p {color:red; background:gray;}</style>
</head>o Link to separate CSS file in head
<head><link type="text/css" rel="stylesheet"
href="3901Style.css" media="screen" /><head>
Computer Science and Engineering n The Ohio State University
Example CSSh2 {
color: darkred;background: gray;font-style: italic;
}em {
font-style: normal;font-weight: bold;
}
Computer Science and Engineering n The Ohio State University
Tree (Rooted at Body)
body
h1
ahref: planet.html
elementattr name:attr value
imgsrc: pic.pngalt: a globe
p ph2 h2
em
qem
Computer Science and Engineering n The Ohio State University
Tree (sans Attributes)
body
h1
a img
p ph2 h2
em
qem
Computer Science and Engineering n The Ohio State University
Tree (sans Attributes)
body
h1
a img
p ph2 h2
em
qem
h2 {…}em {…}
Computer Science and Engineering n The Ohio State University
Selectors Applied to Tree
body
h1
a img
p ph2 h2
em
qem
h2 {…}
Computer Science and Engineering n The Ohio State University
Selectors Applied to Tree
body
h1
a img
p ph2 h2
em
qem
em {…}
codepen.io/cse3901/pen/eVdMXR
Computer Science and Engineering n The Ohio State University
Multiple Selectorsh1 {
color: darkred;background: gray;font-style: italic;border-bottom-style: solid;
}h2 {
color: darkred;background: gray;font-style: italic;
}
Computer Science and Engineering n The Ohio State University
Multiple Selectors: SPOCOCh1, h2 {
color: darkred;background: gray;font-style: italic;
}
h1 {border-bottom-style: solid;
}
codepen.io/cse3901/pen/eVdMXR
Computer Science and Engineering n The Ohio State University
Inheritance for SPOCOCo A child inherits many properties from
parent by defaultn Font weight, color, family, etcn Can be overridden in child
o Set global styles in rootbody {font-family: sans-serif;
}n Contrast this with having to set property in all
possible elements!o Generally, text properties (eg color) are
inherited, box-related (eg border) are not
Computer Science and Engineering n The Ohio State University
Example Inheritancebody {font-family: sans-serif;background: lightgray;
}h2 {color: darkred;background: gray; /*new backgrnd*/font-style: italic;
/*inherits font family*/}
Computer Science and Engineering n The Ohio State University
Inherited Properties
body
h1
a img
p ph2 h2
em
qem
All nodes are sans-serifMost nodes have light gray background
codepen.io/cse3901/pen/eVdMXR
Computer Science and Engineering n The Ohio State University
Demo: FF Dev. Inspector
Computer Science and Engineering n The Ohio State University
margin
Layout: The Box Modelo Both block & inline
n Minor differenceso Border appearance
n Style, width, color, radius
o Margins & paddingn Transparentn 4 independent sides
o Padding is part of itn Content background
shows througho Margins gives space
n Some adjacent margins "collapse"
padding
Content
border
Computer Science and Engineering n The Ohio State University
The Box Model As Layers
http://geek.focalcurve.com/crashcourse-part2/
Computer Science and Engineering n The Ohio State University
Examples
Content
Content
ContentContent
Content
Computer Science and Engineering n The Ohio State University
Box Sizingp {margin: 10px 100px 10px 10px;border-width: 5px 1px 5px;width: 200px;padding: 2px;
}o Total width = ?o CSS3 adds box-sizing
n content-box (width sizes content only)n border-box (width includes border &
padding)
Content
Computer Science and Engineering n The Ohio State University
Box Sizingp {margin: 10px 100px 10px 10px;border-width: 5px 1px 5px;width: 200px;padding: 2px;
}o Total width = ?o CSS3 adds box-sizing
n content-box (width sizes content only)n border-box (width includes border &
padding)
Content
Computer Science and Engineering n The Ohio State University
Collapsing Vertical Margins
Content1
Content2
Content1
Content2
Computer Science and Engineering n The Ohio State University
Collapsing Nested Margins
Content
Content
ContentContent
Computer Science and Engineering n The Ohio State University
ContentContent
Preventing Margin Collapse
Content
Content
padding: 1px
Computer Science and Engineering n The Ohio State University
Demo: FF Dev. Inspector, Box
Computer Science and Engineering n The Ohio State University
Inheritance and Box Sizing
o Generally, text properties (eg color) are inherited, box-related (eg border) are not
o (Content) width set by parent, child "fits" insiden Relative, absolute
o (Content) height set by child, parent "fits" aroundn Relative, absolute
o Parent and child's (vertical) margins collapse (if they touch
Computer Science and Engineering n The Ohio State University
Classeso Not all paragraphs created equally
n Some paragraphs are not finalized (draft), so want them styled differently
o Solution: class attribute<p class="draft">… </p>
o CSS syntax for selector: elt.classp.draft { color: gray; }
o Wildcard (any element): .class.draft { font-style: italic; }
o An element can be in multiple classesn Recall: attributes are a map, ie names unique
<p class="draft even">… </p>
Computer Science and Engineering n The Ohio State University
Classes Add to Tree Structure
body
h1
a img
pdraft
ph2 h2
em
qdraft
em
elementclass name
Computer Science and Engineering n The Ohio State University
Notes on Classes
o When an element belongs to multiple classes, which style gets applied?n Different properties are combinedn Conflicts on same property need to be
resolved (more later)o Classes should reflect semantics or
structure, not visual formattingn Bad class name: greenn Good class name: draft
o Example: csstest.html
Computer Science and Engineering n The Ohio State University
Problem
o Multiple block elements that need to be styled togethern Example: Header and paragraph(s) are
both part of the same warning<h2 class="warning">…</h2><p class="warning"> … </p>
o This approach is awkwardn Every block element in group needs to be
decorated in this wayn Difficult to style the entire unit (e.g., add
a border around the whole warning)
Computer Science and Engineering n The Ohio State University
Solution: Div Elemento div gives a logical block elemento Can be styled just like any other block
elementn Font, dimension, border, margin, etc
.warning { border: thick; }
o Can have block elements as childrenn Style inherited by children
<div class="warning"><h2> … </h2><p> … </p>
</div>
Computer Science and Engineering n The Ohio State University
Divs in the Tree
body
h1
a img
pdraft
p
h2
h2
em
qdraft
em
elementclass name
divwarning
codepen.io/cse3901/pen/vdgQZJ
Computer Science and Engineering n The Ohio State University
Span Elemento div is a (logical) block level element
n Gives line breakso Sometimes styling/semantics belongs to inline elementsn Text discussing different textbooks, where
titles appear here and thereo Solution: span tag
<p> One book to consider is the<span class="book">Book of Ruby</span>, …
o Now all book titles can be styled consistently
o Like div, span is often used with classes
Computer Science and Engineering n The Ohio State University
Adding Spans to the Tree
body
h1
a img
pdraft
p
h2
h2
em
qdraft
spanuniversity
elementclass name
divwarning
emOhio State University
The
spanuniversity
University of Michigan
Computer Science and Engineering n The Ohio State University
Ancestors in Selectors
o Sometimes you care about where in the tree an element occursn University names appearing somewhere
inside warnings need a different stylingo CSS syntax: ancestor ancestor… elt
.warning .university
o Note: big difference between.warning em .university.warning em, .university.warning, em .university
Computer Science and Engineering n The Ohio State University
Your Turn
body
h1
a img
pdraft
p
h2
h2
em
qdraft
spanuniversity
.warning p.draft emh2 span.university.warning h2 .universitydiv .university
divwarning
emOhio State University
The
spanuniversity
University of Michigan
Computer Science and Engineering n The Ohio State University
More Exotic Paths in Selectors
o Child: >.warning > p.warning li > em
o Adjacent sibling: +h1 + p /*only first p after h1*/
o General sibling: ~h1 ~ p /*all sibling p's after h1*/
o Attributes: [attr="value"], *=, $=input[type="button"]a[href$=".pdf"] //see class website
Computer Science and Engineering n The Ohio State University
Your Turn: Select Shaded Node
body
h1
a img
pdraft
p
h2
h2
em
qdraft
spanuniversity
body > h2h1 ~ h2.warning + h2h2h2 + p
divwarning
emOhio State University
The
spanuniversity
University of Michigan
?
Computer Science and Engineering n The Ohio State University
Id = Class Plus Invariant
o Some classes are meant to be uniquen At most one such element per page
<div class="sponsors">
o Solution: id attribute<div id="sponsors">
o CSS syntax for selector: elt#idp#sponsors { color: red; }
o Wildcard (any element): #id#headline { box-style: thin; }
o An element can have at most one id
Computer Science and Engineering n The Ohio State University
Scraping With Selectors
o Nokogiri: A Ruby gem for parsing and scraping HTMLn Given CSS selector, returns matching
elements in pagen Returns NodeSet, which acts like an array
agent = Mechanize.newp = agent.get 'http://www.cse.osu.edu'news = p.css '.osu-title'news.each { |story| puts story.text}
Computer Science and Engineering n The Ohio State University
Summary
o Classes and Idsn Class gives an extra dimension to treen ID is unique: at most one per pagen CSS selector syntax (. vs #)
o Divs and Spansn Div is a logical block elementn Span is a logical inline elementn Often used together with classes/ids
o Selectors with ancestors, siblingsn CSS selector syntax (space, >, +, ~)
Computer Science and Engineering n The Ohio State University
To Ponder
o What color is the li font?
.draft div .warning li { }
.draft div #main li { !important; }div #main ul li { }.draft .warning ul li { }
.draft
ul
#main.warning
li
div