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

HTML and CSS The Basics by nef90815

VIEWS: 7 PAGES: 15

									HTML and CSS: The Basics

       John Ryding
    www.johnryding.com
        @strife25
                   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
                   HTML
• Used for mapping out the structure of your
  page
• Never use tables for layout
• That’s what CSS is for
                        Basic HTML Structure
<!DOCTYPE html>
<html>
<head>
    <title>My Awesome Page Title</title>
    <link type="text/css" rel="stylesheet" href=“/path/to/file.css"/>
    <style type="text/css”>
      //CSS Rules
    </style>

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

</head>

<body>
    <!– Structure and Content of your page -->
</body>
</html>
                     CSS
• Used to create the layout and look of your
  page
• 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:   div.foo {}
    HTML: <div class=“foo”></div>

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

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

•   CSS: ul li *{}
    HTML: <ul>
                    <li></li>
                    <li>
                       <ul> <li> </li> <ul> <!– Will affect these tags -->
                    </li>
               </ul>
• “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
    parent”
  – 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
• http://www.johnryding.com/pres/width.html
        Floats, Overflow, and Element
                  Positioning
•   “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
• http://www.johnryding.com/pres/floats.html
               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
  text<![endif]-->
• <!--[if gte IE 6]> only IE6+ will display this
  text<![endif]-->
• Can use lt, lte, gt, gte
• Browser versions: 5, 5.5, 6, 7, 8
                  Links!
•   www.css-tricks.com
•   www.smashingmagazine.come
•   www.alistapart.com
•   www.quirksmode.com
K thx bai!

								
To top