GRA422 W14 Lecture 3

GRA422 Electronic Document Design II — Lecture #3 Cascading Style
Sheets Winter 2014 Instructor: Ahmed Sagarwala

GRA422 Electronic Document Design II — Lecture #3 + #4
Cascading Style Sheets Announcements Lab Quiz #1 Week of February 3 5% of final mark 15-minutes, 20 questions Multiple choice and fill-in-the-blanks CSS, HTML, web concepts

Cascading Style Sheets CSS Specific Declaration Styles are applied using DOM hierarchy body #sidebar p.special Paragraph with class, within an element with ID of sidebar, inside body tag.

Cascading Style Sheets Cascading What it means CSS defines markup language presentation Target elements / ID / class Browser/Initial Redeclared Internal Inline Specific Override

Cascading Style Sheets The Cascade Hierarchy of CSS declarations Last property statement DOM reference External < Internal < Inline !important override

Cascading Style Sheets CSS Internal & Inline Internal = styles defined in the document head Inline = style defined within tag <span style='color:red'>X</span>

Cascading Style Sheets Including Styles Referencing techniques Inline: use style attribute within tag <p style='color:#000'> ... </p> Internal: specify style tag within HTML <style type='text/css'>p { color:#000; }</style> External: reference external CSS file using link tag <link rel='stylesheet' type='text/css' href='css/style.css'>

Cascading Style Sheets CSS Override p { color:pink !important; } The !important declaration will override all other declarations at the specified DOM level

Cascading Style Sheets Syntax Important notes End property declarations with semi-colon (;) Use {curly braces} to encapsulate properties Zero values don’t require units, can also use ‘none’ Classes start with period (.), IDs with hash (#) ID can only be used once per page Selectors can be combined to keep it D.R.Y. D.R.Y. ≈ K.I.S.S.

Cascading Style Sheets Cascading More Syntax /* comment */ selector:pseudo-class, selector2, ... { property: value; -prefix-property2: value2; ... } Selectors target a tag, class or ID Pseudo classes target conditions or state of selector Properties specify appearance/behaviour to modify Value specifies appearance metric Vendor Prefixes are browser specific properties

Cascading Style Sheets Syntax CSS Example /* General anchor style */ a { color: blue; -webkit-transition: all 2s ease; -moz-transition: all 2s ease; transition: all 2s ease; } /* main para + special hover */ body p#main, a.special:hover { color: #0f0; } <html> <body> <p id='main'> Text, blah blah </p> <a class='special'> Hover me! </a> </body> </html>

Cascading Style Sheets Syntax Shorthand /* bloated style code */ div.boxit { border-top: 2px rgb(255,0,0) solid; border-right: 2px rgb(255,0,0) solid; border-bottom: 2px rgb(255,0,0) solid; border-left: 2px rgb(255,0,0) solid; padding-left: 4px; } /* shorthand style code */ div.boxit { border: 2px rgb(255,0,0) solid; padding: 1px none 0 4px; /* padding: top, right, bottom, left (clockwise) */ }

Cascading Style Sheets The Reset Normalizing across browsers Browsers make assumptions They have built in stylesheets A CSS reset is used to level the playing field Reset first and then cascade http://www.cssreset.com/

Cascading Style Sheets DIV Designer’s block element Generally used for layout No semantic value Styled like a paragraph/object style Style using classes or an ID

Cascading Style Sheets Span Designer’s inline element No semantic value Styled like a character style Often used to insert icons (as a background image)

Cascading Style Sheets Typography Relating semantics to style H1-H6: levels for headings Strong/em: Bold and italics (emphasis) Blockquote: Article or author quotes U, I, B: Deprecated tags from HTML 3.2 Abbr: Abbreviations + accessibility

Cascading Style Sheets Typography Web safe fonts Arial, Garamond, Lucida /Sans/Grande, Tahoma, Trebuchet, Courier, Courier New, Georgia, Palatino Linotype, Times New Roman, Times, Verdana sans-serif / serif = default (browser makes choice) Dreamweaver has preset lists which can be modified

Cascading Style Sheets Typography External fonts Embed using @font-face selector to define the family + provide links to WOFF, TTF, EOT, SVG files for compatibility Google Web Fonts, Typekit, etc. supply embeddable fonts http://www.google.com/webfonts

Cascading Style Sheets Units Supported options Typographical: pt, pc Print: in, mm, cm Screen: px Relative: %, em, rem

Cascading Style Sheets Colour (Recap) Supported values RGB is an additive colour space 16.7 million colours (2563, 166) Higher value = brighter Hex: #1199FF or #19F RGB: rgb(255, 100, 0) RGBa: rgba(red, green, blue, alpha)

Cascading Style Sheets Colour Supported values HSL + HSLa: hsl(#,%,%) / hsla(#,%,%,#) Not widely supported. Use fallbacks. Common names (147, 140 unique) Aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow

Cascading Style Sheets Layout Position property position: absolute/relative/fixed/static; Absolute: position relative to container Relative: position from element origin Fixed: stay at loaded origin and moves with page Static: Normal behaviour

Cascading Style Sheets Layout Background options background, background-color, background-repeat, background-position, background-image background: url('alert.png') #fff no-repeat left top; Can also specify multiple images for background Try to use fallbacks as much as possible

Cascading Style Sheets Layout Background gradients Not fully supported in all browsers Might need to use vendor prefixes Always specify solid colour and/or image fallback background: #fff; background: linear-gradient(top,#fff,#f00,#333,...); background: radial-gradient(circle,#fff,#f00,#333,...);

Cascading Style Sheets Pseudo Classes What are they? CSS properties on events Additional methods for selecting sub-elements Reduces number of classes & JS Introduced in CSS2, more types added in CSS3 IE8 and lower lacks proper support

Cascading Style Sheets Pseudo Classes Examples nav a { color: #900; border-left: 1px solid #000 } nav a:last-child { border:none } a:hover { color: #f00 } a:active { color: #ff0 } li:before { content: "»" } li:nth-child(2n+1) { color: #444 } p:first-child:first-letter { float:left; font-size:200%; line-height: 200%; font-family: Georgia; } input:focus { background: #ffe } .required:after { content: "*"; color: red } tr:nth-child(even) { background: #eee }

Cascading Style Sheets Media Queries Targeting according to intent Allocates styles for specific scenarios (screen-size, orientation, display density, etc) Supported by almost all modern browsers + devices Enables responsive design CSS3 only — specified within HTML or CSS

Cascading Style Sheets Media Queries Examples HTML link element with media attribute <link rel='stylesheet' media='all' href='normal.css' /> <link rel='stylesheet' media='print' href='print.css' /> CSS media query @media screen and (min-width: 1200px) { body { background: #000; color: #fff; } } @media print { body { background: none; color: #333; } }

Cascading Style Sheets Media Queries Print vs. screen

Cascading Style Sheets Fallback Providing styles to all Some browsers fail to keep up with standards For older browsers, basic styles are required Specify fallback first then progressively enhance Online tools help generate accessible code

Cascading Style Sheets Fallback Example .gradient { background: #eef; /* CSS1 compatible fallback */ background: url(gradient.png) repeat-x; background: -moz-linear-gradient(...); background: -ms-linear-gradient(...); background: -o-linear-gradient(...); background: -webkit-gradient: ( linear, left top, left bottom, color-stop(0, #000), color-stop(1, #fff) ); background: linear-gradient:(top,#000 0%,#fff 100%); }

Cascading Style Sheets Frameworks Fastest way to beautiful Powerful CSS and JS libraries Templates to base pages on Each with pros and cons Foundation, Bootstrap, Skeleton, Gumby Hundreds to choose from Can be used for your group project*

Cascading Style Sheets Next Lecture Forms Created using the following elements: form, input, select, textarea, option fieldset, legend, optgroup Files are available on GRA422.com

GRA422 W14 Lecture 3

GRA422 W14 Lecture 3

Ahmed Sagarwala

More Decks by Ahmed Sagarwala

Other Decks in Programming

Featured

Transcript

GRA422 Electronic Document Design II — Lecture #3 Cascading Style

GRA422 Electronic Document Design II — Lecture #3 + #4

GRA422 Electronic Document Design II — Lecture #3 + #4

GRA422 Electronic Document Design II — Lecture #3 + #4

GRA422 Electronic Document Design II — Lecture #3 + #4

GRA422 Electronic Document Design II — Lecture #3 + #4

GRA422 Electronic Document Design II — Lecture #3 + #4

GRA422 Electronic Document Design II — Lecture #3 + #4

GRA422 Electronic Document Design II — Lecture #3 + #4

GRA422 Electronic Document Design II — Lecture #3 + #4

GRA422 Electronic Document Design II — Lecture #3 + #4

GRA422 Electronic Document Design II — Lecture #3 + #4

GRA422 Electronic Document Design II — Lecture #3 + #4

GRA422 Electronic Document Design II — Lecture #3 + #4

GRA422 Electronic Document Design II — Lecture #3 + #4

GRA422 Electronic Document Design II — Lecture #3 + #4

GRA422 Electronic Document Design II — Lecture #3 + #4

GRA422 Electronic Document Design II — Lecture #3 + #4

GRA422 Electronic Document Design II — Lecture #3 + #4

GRA422 Electronic Document Design II — Lecture #3 + #4

GRA422 Electronic Document Design II — Lecture #3 + #4

GRA422 Electronic Document Design II — Lecture #3 + #4

GRA422 Electronic Document Design II — Lecture #3 + #4

GRA422 Electronic Document Design II — Lecture #3 + #4

GRA422 Electronic Document Design II — Lecture #3 + #4

GRA422 Electronic Document Design II — Lecture #3 + #4

GRA422 Electronic Document Design II — Lecture #3 + #4

GRA422 Electronic Document Design II — Lecture #3 + #4

GRA422 Electronic Document Design II — Lecture #3 + #4

GRA422 Electronic Document Design II — Lecture #3 + #4

GRA422 Electronic Document Design II — Lecture #3 + #4

GRA422 Electronic Document Design II — Lecture #3 + #4

GRA422 Electronic Document Design II — Lecture #3 + #4