Intro to CSS & the Dom

Intro to CSS & the Dom WRA 210 10.21.13

Today’sAgenda • Overview of standards • Overview of semantic markup • Intro to the Document Object Model (DOM) • Intro to CSS • Activities along the way

Reminder: Web Standards • What was life like for web designers before web standards? • What do web standards do?

The Document Object Model (DOM) • Model for parsing [reading] HTML • A model – any number of metaphors • Implemented in the browser • rules for how the browser reads a document • humans see tags; browser sees objects • nobody ever “uses” the DOM • think: how did you know plain text was a menu? • Inconsistency in adoption • Not magical

The Document Object Model (DOM) • Structure – creates the relationships between objects (parent-child) • Objects have properties (border, color, font) that can be accessed and manipulated by CSS and JavaScript. • Enables manipulation / transformation of objects • CSS - applying styles, sizes, position • JavaScript - manipulate objects • read / change content of objects • change display properties dynamically • destroy completely, remove from the document

Cascading Style Sheets [CSS] • Allows us to add style to our markup • Re-usable • one rule can style many objects • one CSS file can be used by many documents • Cascading - one change has many effects • change the style of many objects • change all of the documents using the rules

CSS - manipulating objects • CSS could not exist without the DOM • CSS manipulates the properties of objects in the DOM • Because the DOM sees objects (not tags), CSS can: • Style all instances of a particular type of object • Style all instances of objects with a particular class • Style the children of a parent object • Style specifics objects based on names or attributes

Prepare to Style • Create an HTML document (file or Thimble) • Add the following objects to your document • at least two headers (<h1>) • at least four paragraphs • a list with 4 items • 3 links (anywhere) • Save document, open in a browser (if file)

Add Some Style • Inline - the kind we like least • Add this attribute to one of your paragraphs: style="color:green;" • Save your doc, reload, see what happens

CSS Property: color • Can take human-readable values • examples: "red", "olive", "blue", "black", "white" • style="color:olive;" • Can take hex values for more precise colors • examples: "#808000", "#C0C0C0" • style="color:#808000;" • Can use RGB values (for print values) • example: "rgb(255,0,0)" • style="color: rgb(255,0,0);"

Super Short Activity • Find a hex color value you used in your design comps • Add an in-line style to any object and change it's color property to the hex value you chose

Add Some Style • Inline - the kind we like least • Add this attribute to your first header: style="border:thin solid red;" • Save your doc, reload, see what happens

CSS Property: border • First property: thickness • examples: "thin", "thick," "2px," "5px" • style="border: 5px solid red;" • Second property: style • examples: dotted, dashed, solid • style="border: 5px dashed red;" • Third property: color • same values for colors previously used • style="border: 5px dashed #808000;"

Add Some Style • Inline - the kind we like least • Add this attribute to your first header: style="font-size:20px;" • Save your doc, reload, see what happens

CSS Property: font-size • Can take a pixel value • examples: "12px", "20px" • style="font-size: 20px;" • Can take a textual value • examples: small, medium, large, xx-small • style="font-size: xx-large;" • Many other ways to control font size • More Information on font-size

Kick it up a notch • Let's ditch inline styles for embedded • Still in-document, but at least not inline • Add the following to your <head>:position in <head> is irrelevant <style type="text/css"> </style>

Experiment with some style • Let's make every header object red • In between the <style> tags, add: h1 { color:red; }

Anatomy of a CSS Rule p { color:#ffffff; background:#000000; } • Selector: p - the object or objects targeted • Declarations: color, background - properties • You can apply infinite declarations

Kick it up another notch • Add the following to two of your paragraphs: class="special" <p class="special">

Targeted Styles p.special { background:green; } • Note: which paragraphs receive this style?

CSS Class Selectors Apply styles to objects of a specified class

Kick it to the extreme • Add the following to one of your paragraphs: id="magic" <p id="magic">

Targeted Styles #magic { background:blue; } • Note: which paragraphs receive this style?

CSS ID Selector Apply styles to an object with a unique ID

Targeted Styling of Objects • styling a generic object type will apply styles to all of those objects • "class" can be reused - all objects can have a class attribute and they can be the same • "id" must be unique - all objects can have an id attribute but they must all be different

Targeted Styling of Objects • No modules for a few weeks • Ungraded exercises • Create a new AFs folder - exercises • Create a new HTML file • name file session14.html • paste code from Thimble into it, save to AFS • Add sublist, create link to today's exercise

For Next Time • Explore further - play! • Read/Watch: • Anatomy of a CSS Rule • CSS and the DOM • 3 Ways to use CSS • Separation of Content from Presentation • Browse the csszengarden.com - what's this about?

Intro to CSS & the Dom