css: cascading style sheets

of 46 /46
Computer Science and Engineering n College of Engineering n The Ohio State University CSS: Cascading Style Sheets Lecture 10

Upload: others

Post on 10-Dec-2021

4 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: CSS: Cascading Style Sheets

Computer Science and Engineering n College of Engineering n The Ohio State University

CSS:Cascading Style Sheets

Lecture 10

Page 2: CSS: Cascading Style Sheets

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

Page 3: CSS: Cascading Style Sheets

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?

Page 4: CSS: Cascading Style Sheets

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

Page 5: CSS: Cascading Style Sheets

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;

}

Page 6: CSS: Cascading Style Sheets

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

Page 7: CSS: Cascading Style Sheets

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…

Page 8: CSS: Cascading Style Sheets

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>

Page 9: CSS: Cascading Style Sheets

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;

}

Page 10: CSS: Cascading Style Sheets

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

Page 11: CSS: Cascading Style Sheets

Computer Science and Engineering n The Ohio State University

Tree (sans Attributes)

body

h1

a img

p ph2 h2

em

qem

Page 12: CSS: Cascading Style Sheets

Computer Science and Engineering n The Ohio State University

Tree (sans Attributes)

body

h1

a img

p ph2 h2

em

qem

h2 {…}em {…}

Page 13: CSS: Cascading Style Sheets

Computer Science and Engineering n The Ohio State University

Selectors Applied to Tree

body

h1

a img

p ph2 h2

em

qem

h2 {…}

Page 14: CSS: Cascading Style Sheets

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

Page 15: CSS: Cascading Style Sheets

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;

}

Page 16: CSS: Cascading Style Sheets

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

Page 17: CSS: Cascading Style Sheets

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

Page 18: CSS: Cascading Style Sheets

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

Page 19: CSS: Cascading Style Sheets

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

Page 20: CSS: Cascading Style Sheets

Computer Science and Engineering n The Ohio State University

Demo: FF Dev. Inspector

Page 21: CSS: Cascading Style Sheets

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

Page 22: CSS: Cascading Style Sheets

Computer Science and Engineering n The Ohio State University

The Box Model As Layers

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

Page 23: CSS: Cascading Style Sheets

Computer Science and Engineering n The Ohio State University

Examples

Content

Content

ContentContent

Content

Page 24: CSS: Cascading Style Sheets

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

Page 25: CSS: Cascading Style Sheets

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

Page 26: CSS: Cascading Style Sheets

Computer Science and Engineering n The Ohio State University

Collapsing Vertical Margins

Content1

Content2

Content1

Content2

Page 27: CSS: Cascading Style Sheets

Computer Science and Engineering n The Ohio State University

Collapsing Nested Margins

Content

Content

ContentContent

Page 28: CSS: Cascading Style Sheets

Computer Science and Engineering n The Ohio State University

ContentContent

Preventing Margin Collapse

Content

Content

padding: 1px

Page 29: CSS: Cascading Style Sheets

Computer Science and Engineering n The Ohio State University

Demo: FF Dev. Inspector, Box

Page 30: CSS: Cascading Style Sheets

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

Page 31: CSS: Cascading Style Sheets

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>

Page 32: CSS: Cascading Style Sheets

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

Page 33: CSS: Cascading Style Sheets

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

Page 34: CSS: Cascading Style Sheets

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)

Page 35: CSS: Cascading Style Sheets

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>

Page 36: CSS: Cascading Style Sheets

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

Page 37: CSS: Cascading Style Sheets

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

Page 38: CSS: Cascading Style Sheets

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

Page 39: CSS: Cascading Style Sheets

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

Page 40: CSS: Cascading Style Sheets

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

Page 41: CSS: Cascading Style Sheets

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

Page 42: CSS: Cascading Style Sheets

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

?

Page 43: CSS: Cascading Style Sheets

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

Page 44: CSS: Cascading Style Sheets

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}

Page 45: CSS: Cascading Style Sheets

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

Page 46: CSS: Cascading Style Sheets

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