CSS: Cascading Style Sheets, Study notes of Engineering

Download CSS: Cascading Style Sheets and more Study notes Engineering in PDF only on Docsity!

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

CSS:

Cascading Style Sheets

Lecture 15

Computer Science and Engineering  The Ohio State University

Evolution of CSS

 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 Syntax

 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

Example CSS

h2 { /* draconian OSU visual identity / color: darkred; background: gray; / additional gratuitous styling */ font-style: italic; }

Computer Science and Engineering  The Ohio State University

Shorthand Properties

 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

Including CSS: Mechanics

 Embed directly in element

 Place in style element in head  Link to separate CSS file in head

Computer Science and Engineering  The Ohio State University

Tree (Rooted at Body)

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

Tree (sans Attributes)

body h a img h2 p^ h2 p em em q

Computer Science and Engineering  The Ohio State University

Selectors Applied to Tree

body h a img h2 p^ h2 p em em q h2 {…}

Computer Science and Engineering  The Ohio State University

Selectors Applied to Tree

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

Multiple Selectors: SPOCOC

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

Inheritance for SPOCOC

 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

Inherited Properties

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

Demo: Chrome Dev. Inspector