css basics

cascading style sheets

“A simple mechanism for adding style to web pages” - w3c

standard design language for the web

controls color, typography, sizing and layout of elements (i.e. your web pages design)

replaces tables, frames, and presentational hacks

separates presentation (design) from structure (content)

accessibility

global change

bandwidth friendly

css selectors

tag (html)

class

id

pseudo class (links)

the css rule

selector declaration property value

p { color: red; }

p { color: #ff0000; }

p { color: #f00; }

p { color: rgba(255,0,0,1); }

p { color: hsla(0,100,54,1); }

tag selector

ability to “rewrite” every html element

add functionality, change inherent attributes

body, img, p, h1...

multiple declarationsp { color: rgba(255,0,0,1);

text-indent: 20px; }

body { font-family: Arial, Helvetica, sans-serif;font-size: 13px;color: rgba(32,144,43,1);background-color: rgba(0,43,144,1);

}

h1 {font-family: "Times New Roman", Times, serif;

}

class selectors

“dot class”

use multiple times on same page

REUSABLE!

.catch-phrase {font-style: italic;font-weight: bold;color: rgba(22,233,85,1);

}

pseudo class selectors(css links)

link, visited, hover, active

a:link, a:visited, a:hover, a:active

lvha (love ha!)

id selectors

“pound id”

unique identifier

only once per web page

good for javascript and jQuery

#special-item {background-color: rgba(32,0,234,1);border: solid 1px rgba(0,0,0,0.8);

width: 61%; padding: 10px; opacity: 0.2;

}

box model

content

padding

border

margin

box positionsstatic (in the flow)

“float” relative fixed absolute “z-index”

descendant selectors

both conditions must be met for declaration to work

.content p {text-indent: 20px;font-style: italic;text-align: right;

}

useful for styling main navigation links

nav a:link {color: rgba(0,34,200,1);text-decoration: none;

}

aka contextual class selectors

.about p {text-indent: 20px;

}

p.about {text-indent: 20px;

}

3 ways to css

external embedded inline

external style sheet

global cached the right way

<link href=“css/mystyle.css" rel="stylesheet">

embedded style

<style>p {color: red;}</style>

the “meh” way

only reason(s) to use embedded

1. single page website (still no) 2. override global style 3. design/ testing process

inline styles

bulky code, style not separated from content the wrong way

<h1 style=”font-weight: normal;“>just say NO</h1>