Cascading Style Sheets
Computer Science and Engineering College of Engineering The Ohio State University
Evolution of CSS
Copyright By PowCoder代写 加微信 powcoder
MIME type: text/css
Computer Science and Engineering The Ohio State University
CSS 1 (’96): early recognition of value
CSS 2 (’98): improvements in language
Adding media types (screen vs print) Inconsistent support by browsers
CSS 2.1 (’11)
In practice since ’04
Took forever to standardize
Breaks standard into many (50?) modules
Various modules already adopted & supported
Separate content and style
Different languages (syntax):HTML vs CSS
Computer Science and Engineering The Ohio State University
Different documents
Goal: Single-point-of-control-over-change Change font of every word in paragraph?
Change font of every element in
Change font of every element in every
document on a site?
Change font of every element which is
part of instructions, but not finalized, on
CSS Syntax
CSS is declarative (not procedural) Describe a thing, not how to compute it
Example: RE matching
CSS = list of rules (order can matter) Rule = a location & the style to use there
Basic syntax of a rule
selector {
property1: style1; property2: style2;
} /*comments always help*/
Computer Science and Engineering The Ohio State University
Example CSS
Computer Science and Engineering The Ohio State University
/* draconian OSU visual identity */
color: darkred;
background: gray;
/* additional gratuitous styling */
font-style: italic;
Available Properties (Styles)
Computer Science and Engineering The Ohio State University
Background
background-color, background-image
Text, font
line-height, text-align font-size, font-style
Border, margin, padding border-left-width, border-bottom-color
Positioning
clear, display, float
Dimension
List, table
list-style-type border-collapse, caption-side
Generated content and other fancy stuff
Shorthand Properties
Computer Science and Engineering The Ohio State University
Example: Margins have 4 sides
margin-top: 3px;
margin-right: 5px;
margin-bottom: 7px;
margin-left: 9px;
Shorthand property: margin
margin: 3px 5px 7px 9px; /*TRBL*/ margin: 7px 9px; /*TB sides*/ margin: 2px 6px 8px; /*T sides B*/
Mnemonic: always “TRouBLe”
Missing values filled in with provided value(s)
Other shorthand properties:
Border-width, padding, font, border, background…
Including CSS: Mechanics
Computer Science and Engineering The Ohio State University
Embed directly in element
Place in style element in head