Docsity
Docsity

Prepare for your exams
Prepare for your exams

Study with the several resources on Docsity


Earn points to download
Earn points to download

Earn points by helping other students or get them with a premium plan


Guidelines and tips
Guidelines and tips

CSS: Cascading Style Sheets, Study notes of Engineering

Missing values filled in with provided value(s). □ Other shorthand properties: ▫ Padding, border-width, font, border, background…

Typology: Study notes

2021/2022

Uploaded on 09/12/2022

merielynd
merielynd 🇬🇧

4.7

(9)

218 documents

1 / 31

Toggle sidebar

This page cannot be seen from the preview

Don't miss anything!

bg1
Computer Science and Engineering College of Engineering The Ohio State University
CSS:
Cascading Style Sheets
Lecture 15
pf3
pf4
pf5
pf8
pf9
pfa
pfd
pfe
pff
pf12
pf13
pf14
pf15
pf16
pf17
pf18
pf19
pf1a
pf1b
pf1c
pf1d
pf1e
pf1f

Partial preview of the text

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