(introduction to CSS and Javascript behaviors)

Inspiration | The Fire fox Developer Toolbar | Code Snippets | Source Files (mac zip)

Today's Outline:

• Quick intro - "where you are at right now with D. W. and CSS
• First things first...The FREE fire fox Developer Toolbar!
• Why CSS? - the much better way to build a site. main benefits..
  • with css in place on the site, updates are easy
  • creates less code for the HTML
  • separates content (HTML),from presentation, (CSS) look at this example (make sure and install the firefox developers toolbar for this)
  • helps your pages rank better in search engines because your content is clean and meaningful

CSS -

• Stands for Cascading Style sheet

• In a nutshell: a collection of rules that mark up our web page
• Theses rules "hook" onto the html elements on our web page and make them look how we define.
• these rules come in the form of text css code (can be VERY simple code) that live in three places:
  • internal (within the HTML head tags)
  • external (this is best practice)
  • in-line (you don't ever really want to do this)
• The code structure of a Cascading Style sheet: lets jot this one down on notes.
• CSS Selectors: the heavy lifting done here, so what are they?
• Types of selectors:
  • tags (we can override the existing default look for ANY tag!)
  • ID selectors (must be unique in the document)
  • Class selectors (can use multiple times)
  • dynamic selectors (pseudo selectors) meaning we can style up our links!
• Everything is an Element on a web page (this is what the CSS Selector affects)
• We have been using css styles for a while actually and may not have known it.......
• Browsers have their own default styles (warning! this is also a common pitfall for browser inconsistencies), with CSS, what we are saying to the browser is"hey I know you give the <p> tag certain padding, margin and color, etc on your own, but I want to you to use these values instead."

--------------------------------------- 15 minute break--------------------------------------------

• The CSS panel - the hub for css management.
• Create our styles and build up the look for a while.
• Style sheet best practices, segment your style sheet.....
  • "Layout" section (css rules that only work on how the page is laid out, Header, body with two columns, footer as an example.
  • "presentation" section (css rules that control how the formatting is setup, ie, color, font, bold
  • use comments for these sections in the Code view,
  • comments in css..... /* everything here is a comment */
• Export out internal styles so they become an external style sheet.
  • open the css panel
  • Highlight the all the rules we want to export
  • right-click on the selected css rules and choose "Move Css Rules..."
• Link the style sheet to all other web pages in the site (the real reason why this CSS thing is so cool)
• Edit the style sheet whenever we need to.
• Troubleshooting our style sheets:
  • Watch out for that cascade! The golden rule: internal styles will override external styles, 90% of your pitfalls.
  • check the CSS panel out, to let you know if you have internal styles!, you always know this if you see the generic <style> tag in the Css panel
  • other trouble shooting tips
• Positioning Elements in CSS: absolute positioning Vs relative positioning
• the normal flow of the document, gravity is backwards on an HTML page!
• Using Divs