























Study with the several resources on Docsity
Earn points by helping other students or get them with a premium plan
Prepare for your exams
Study with the several resources on Docsity
Earn points to download
Earn points by helping other students or get them with a premium plan
Community
Ask the community for help and clear up your study doubts
Discover the best universities in your country according to Docsity users
Free resources
Download our free guides on studying techniques, anxiety management strategies, and thesis advice from Docsity tutors
Missing values filled in with provided value(s). □ Other shorthand properties: ▫ Padding, border-width, font, border, background…
Typology: Study notes
1 / 31
This page cannot be seen from the preview
Don't miss anything!
Computer Science and Engineering College of Engineering The Ohio State University
Lecture 15
Computer Science and Engineering The Ohio State University
MIME type: text/css 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 ' Took forever to standardize CSS 3 Breaks standard into many (50?) modules Various modules already adopted & supported
Computer Science and Engineering The Ohio State University
CSS is declarative (not procedural) Describe a thing, not how to do 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
h2 { /* draconian OSU visual identity / color: darkred; background: gray; / additional gratuitous styling */ font-style: italic; }
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: Padding, border-width, font, border, background…
Computer Science and Engineering The Ohio State University
Embed directly in element
Place in style element in head
Link to separate CSS file in headComputer Science and Engineering The Ohio State University
body h a href: planet.html element attr name: attr value img src: pic.png alt: a globe h2 p^ h2 p em em q
Computer Science and Engineering The Ohio State University
body h a img h2 p^ h2 p em em q
Computer Science and Engineering The Ohio State University
body h a img h2 p^ h2 p em em q h2 {…}
Computer Science and Engineering The Ohio State University
body h a img h2 p^ h2 p em em q em {…} codepen.io/cse3901/pen/eVdMXR
Computer Science and Engineering The Ohio State University
h1, h2 { color: darkred; background: gray; font-style: italic; } h1 { border-bottom-style: solid; } codepen.io/cse3901/pen/eVdMXR
Computer Science and Engineering The Ohio State University
A child inherits many properties from parent by default Font weight, color, family, etc Can be overridden in child Set global styles in root body { font-family: sans-serif; } Contrast this with having to set property in all possible elements! Generally, text properties (eg color) are inherited, box-related (eg border) are not
Computer Science and Engineering The Ohio State University
body h a img h2 p^ h2 p em em q All nodes are sans-serif Most nodes have light gray background codepen.io/cse3901/pen/eVdMXR
Computer Science and Engineering The Ohio State University