Your Federal Quarterly Tax Payments are due April 15th Get Help Now >>

HTML and CSS The Basics by nef90815


									HTML and CSS: The Basics

       John Ryding
                   Tools of the Trade
• Browsers:
   – IE 6/7/8
   – Firefox 3.0+
   – Safari 3.0+
   – Chrome, Opera
• Firebug (a firefox extension)
• Web Inspector
   – Developer menu in Chrome
   – Debug menu in Safari (not stable)
• IE8 Developer Tools (IE8)
   – Can render pages in version 7 or 8
• Used for mapping out the structure of your
• Never use tables for layout
• That’s what CSS is for
                        Basic HTML Structure
<!DOCTYPE html>
    <title>My Awesome Page Title</title>
    <link type="text/css" rel="stylesheet" href=“/path/to/file.css"/>
    <style type="text/css”>
      //CSS Rules

     <script type=“text/javascript src=“/path/to/file.js”></script>
     <script type=“text/javascript”>
              //javascript code


    <!– Structure and Content of your page -->
• Used to create the layout and look of your
• Handles all design elements from font,
  borders, images, and some effects
• CSS sees HTML through the use of selectors
• CSS sees everything in an HTML page as a box
                           CSS Selectors
•   Right most selector determines performance of a CSS rule

•   HTML: <div style=“width: 100%;“></div>

•   CSS:   .foo {}
    HTML: <div class=“foo”></div>
              <span class=“foo lolz”></div>

•   CSS: {}
    HTML: <div class=“foo”></div>

•   CSS: #bar {}
    HTML: <div id=“bar”></div>

•   CSS:   A:hover {}
    HTML: <a href=“”>Click Here!</a>
                         Selectors Cont.
•   CSS: ul > li {}
    HTML: <ul>
                       <ul> <li> </li> <ul> <!– Won’t affect these tags -->

•   CSS: ul li *{}
    HTML: <ul>
                       <ul> <li> </li> <ul> <!– Will affect these tags -->
• “ul > li” is faster to render than “ul li”
                      Box Model
• Every element on a page is a rectangular box

• The sizing, positioning, and behavior of these boxes is
  controlled by CSS

• .box {
      margin: 0 0 0 0;
      padding: 0 0 0 0;
      border: 1px solid black;
      height: 100%;
      width: 100%;
                 “display” Rule
• Determines how a page element is rendered
• Has three properties
  – block: takes up the full available width and forces a
    new line before and after itself
  – inline: the width of its content, and does not insert
    new lines
  – None: hides the element completely
• <div>and <p> are block elements by default
  – “width: auto;” by default
• <a> and <span> are inline elements by default
     “width” and Block Elements
• Can have different values
  – auto: means "expand to the inner width of my
  – 100%: means "expand to the same width as the
    first ancestor with position: relative”
  – Length (px, em, etc.): set a fixed width
  – %: set a width relative to width of parent box
        Floats, Overflow, and Element
•   “float” property is used to move elements around page
•   Used to keep elements a part of the page flow
•   All elements defaults to “float: none”
•   Elements that exist after floated elements will wrap.
    • Solved by clearing the float
• Overflow property is useful for forcing floated divs to
  become separate from siblings and to clear floats
               IE and HasLayout
• Hidden property in IE’s rendering engine
• Element that “has layout” set to true is
  responsible for sizing and positioning itself
  and child elements
• Elements that don’t have layout produce bugs
  in your page in IE
• Best solutions:
     • <= IE6: set “height: 1%” (only if overflow != visible)
     • >= IE7: set “min-height: 0”
         Conditional Comments
• Used for IE Specific CSS Rules
• <!--[if IE]> only IE will display this
• <!--[if gte IE 6]> only IE6+ will display this
• Can use lt, lte, gt, gte
• Browser versions: 5, 5.5, 6, 7, 8
•   www.smashingmagazine.come
K thx bai!

To top