css: cascading style sheets

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


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?


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


Example CSSh2 {/* draconian OSU visual identity */

color: darkred; background: gray;

/* additional gratuitous styling */font-style: italic;

}


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


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…


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>


Example CSSh2 {

color: darkred;background: gray;font-style: italic;

}em {

font-style: normal;font-weight: bold;

}


Tree (Rooted at Body)

body

h1

ahref: planet.html

elementattr name:attr value

imgsrc: pic.pngalt: a globe

p ph2 h2

em

qem


Tree (sans Attributes)

body

h1

a img

p ph2 h2

em

qem


Tree (sans Attributes)

body

h1

a img

p ph2 h2

em

qem

h2 {…}em {…}


Selectors Applied to Tree

body

h1

a img

p ph2 h2

em

qem

h2 {…}


Selectors Applied to Tree

body

h1

a img

p ph2 h2

em

qem

em {…}

codepen.io/cse3901/pen/eVdMXR

https://codepen.io/cse3901/pen/eVdMXR


Multiple Selectorsh1 {

color: darkred;background: gray;font-style: italic;border-bottom-style: solid;

}h2 {


}


Multiple Selectors: SPOCOCh1, h2 {


}

h1 {border-bottom-style: solid;

}




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


Example Inheritancebody {font-family: sans-serif;background: lightgray;

}h2 {color: darkred;background: gray; /*new backgrnd*/font-style: italic;

/*inherits font family*/}


Inherited Properties

body

h1

a img

p ph2 h2

em

qem

All nodes are sans-serifMost nodes have light gray background




Demo: FF Dev. Inspector


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


The Box Model As Layers

http://geek.focalcurve.com/crashcourse-part2/


Examples

Content

Content

ContentContent

Content


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


Collapsing Vertical Margins

Content1

Content2

Content1

Content2


Collapsing Nested Margins

Content

Content

ContentContent


ContentContent

Preventing Margin Collapse

Content

Content

padding: 1px


Demo: FF Dev. Inspector, Box


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


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>


Classes Add to Tree Structure

body

h1

a img

pdraft

ph2 h2

em

qdraft

em

elementclass name


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


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)


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>


Divs in the Tree

body

h1

a img

pdraft

p

h2

h2

em

qdraft

em

elementclass name

divwarning

codepen.io/cse3901/pen/vdgQZJ

https://codepen.io/cse3901/pen/vdgQZJ


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


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


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


Your Turn

body

h1

a img

pdraft

p

h2

h2

em

qdraft

spanuniversity

.warning p.draft emh2 span.university.warning h2 .universitydiv .university

divwarning


The

spanuniversity



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


Your Turn: Select Shaded Node

body

h1

a img

pdraft

p

h2

h2

em

qdraft

spanuniversity

body > h2h1 ~ h2.warning + h2h2h2 + p

divwarning


The

spanuniversity


?


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


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}


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, >, +, ~)


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

css: cascading style sheets

Documents