CSS Fundamentals

What is CSS?

• Cascading Style Sheets

• Rules that define how HTML elements should look

body {background:black;}

• Cascades part determines the order the rules are applied in

Types of Style Sheets

•Browser-Applies some styles by default

•User-Some browsers allow you to create your own styles.

•Author-Websites can also have style sheets...these are the ones you'll be doing.

• selectors select elements to be styled

• declaration tells browser how to style

• property is what you want to modify

• value is the option you want for the property

What does it look like?<style>

em { color:red; font-weight:bold; }</style>

declarationselector property value

Where does CSS go

• Inline style="" attribute - Only good for one tag

• Embedded <style> - Good for the whole page

• External <link rel="stylesheet" href="" /> - Many Pages

• When you need to share code

• Only affects a specific tag

Inline

<em style="color:red;">dog</em>

• Uses the <style> tag

• Affects the current page

• Uses selectors to specify which tags to affect

Embedded

<style> em { color: green; font-size:18px;}</style>

• Can affect a multitude of documents

• Uses a separate file that must be linked to

• The CSS file does NOT need <STYLE> tag

External<link rel="stylesheet" type="text/css" href="my.css" />

HTML Color Modes

• Can use Color Names like Black, Red, Blue

• Can use Red, Green and Blue values from Photoshop

• To be more specific, use Hexadecimal codes #FFCC00

• Can be shortened to three letters if they're the same #FC0

• Newer browsers can use rgba(0,0,0,0.5);

• Children inherit styles from parent

• BODY is the big daddy

Inheritance

body { font-family:verdana; }p { font-size:10px;}

SPECIFICITY

• Which rules take over when there's more than one

• Browsers always deal with multiple style sheets

• Browser/User/Author style sheet/External/embedded/inline

• If two rules conflict, generally the later rule wins

<style>em { color: red; }</style><p>The quick <em style="color:green;">fox</em>.</p>

Common Selectors

• Type Selectors: em {color: blue; }

• Class Selectors: .wrapper {background-color: #CFC;}

• ID Selectors: #content {width:960px;}

• Descendant Selectors: p em {color:red;}

Advanced Selectors

• Child Selectors: div>em {color:red;}

• Universal Selector: * {color:red;}

• Adjacent Sibling: h1+h3 {color:red;}

• Attribute Selectors: a[href=""],img[alt] {color:red;}

Clean HTML is Crucial• DOM (Document Object Model)

• The Order of Things

Pseudo Elements

• Pseudo Classes: :hover,:first-child

• Pseudo Elements: :first-line, :first-letter

• Insertion Elements: :before, :after

Multiple Class Selectors

• You can combine multiple classes by separating them by spaces

"wrapper mod"

Class Shortcuts

• Font

• Background

• Border

The generic Tags

• Span-Inline

• DIV-Block Level

The Box Model• Inline vs Block

• Margin

• Border

• Padding

Floating

• To the Right or to the Left

• The container problem

• Fixing it with the mod class in html5reset

Positioning

• Static-Normal positioning of objects

• Fixed-Fixed to the browser window

• Relative-Relative to it's current position, but can be moved

• Absolute-Relative to the last relatively positioned object, if one is not present, then works like Fixed...relative to the window.

• Z-index

The End