XHTML CSS by xbh15356

VIEWS: 10 PAGES: 33

									XHTML & CSS
Michael Lindsey; AALL Portland 2008
Division of labor
   Structure = semantic XHTML
   Presentation = CSS
   Behavior = Javascript
XML must be well-formed
   DOCTYPE
       Quirks mode v. strict
   Only one root element
       <html>…</html>
   Close all tags
       <div>…</div>, <br/>
   Elements must be nested properly
   Attributes must be quoted
     href=“link.html”
     class=“error”
     id=“navigation”
Michael Lindsey; AALL Portland 2008




                        FROM SCRATCH
                        where we style a page from the beginning
Double check the connections
   Keep “pageIterations” folder handy
   Open 00sourceDocument.html in your text editor
   Open 00sourceDocument.html in your web browser
   Change something in the editor, save it, reload it in
    the browser.
01: External, Internal, Inline
   <link rel=“stylesheet” type=“text/css” href=“…”
    />
   <style type=“text/css”>…</style>
   <p style=“…”>
   Overriding and the cascade
02: Syntax

selector { property: value; }
                              declaration
a{
  color: #000066;
  text-decoration: none;
}
h4     {
  font-variant: small-caps;
}
  03: Selectors 1
    Multiple
    Ids

    Classes

    Pseudo-classes

h1, h2, h3, h4 { font-weight: normal; }
#header        {
       min-height: 150px;
       background-color: #F0F2BF;
}
.error { color: red; }
a:hover { text-decoration: underline; }
  04: Selectors 2
     Descendants
     Mixed
#navigation ul {
      list-style-type: none;
}
#navigation .majorCategory {
      font-size: 14px;
}
#navigation .majorCategory li   {
      font-size: 12px;
}
05: Wrapper/container convention
#container {
  border: 1px solid black;
  width: 800px;
  background: white;
}
body {
  background: #333333;
}
Box Model

                       border


    padding

      content area

              margin
06: Universal Selector
* {
  margin: 0;
  padding: 0;
}
07: Margins and padding
#navigation ul ul li{
  margin-left: 1em;
}
#content p {
  margin-bottom: 1em;
}
#content li {
  margin-left: 2em;
}
07: Margins and padding
1.    All
2.    Top/bottom sides
3.    Top sides bottom
4.    Top right bottom left
#content ul {
   margin: 0.7em 0 1em;
}
#container {
   ...
   margin: 1em auto;
}
08: Font-size
#content p#breadCrumbs   {
  font-size: 12px;
}
Block/inline and positioning
   Document flow
     Block  Elements: include a built-in line break
     Inline Elements: flow left to right until room runs out

   Relative – offset it but keep the footprint
   Absolute – set exact coordinates
   Float – Content flows around it
Relative Positioning


                        id=“moveMe”




    #moveMe       {
           position: relative;
           top: 10px;
           left: 10px;
    }
  Absolute Positioning

                a
                                            c



                         b
                    id=“moveMe”
                                            #moveMe       {
                                                   position: absolute;
                                                   top: 100px;
                                                   left: 100px;
                                            }

positioned ancestor OR document container
   Floating

                                         id=“moveMe”
Lorem ipsum dolor sit amet,                                      consectetuer adipiscing elit.
Donec convallis nibh ac nibh. Mauris lacus. Praesent arcu justo,


                                  Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
                                  Donec convallis nibh ac nibh. Mauris lacus. Praesent arcu
       id=“moveMe”
                                  justo,


<p class=“clear”> sagittis sit amet, pellentesque sit amet, aliquet sit</p>


                                          #moveMe { float: left; }
                                          .clear { clear: both; }
09: Three column layout
#navigation         {
   width: 170px;
   padding: 10px 10px 20px;
   border-right: 1px dashed red;
}
#content {
   width: 390px;
   font-size: 14px;
   padding: 10px 10px 20px;
}
#sidebar {
   font-size: 12px;
   padding: 10px 10px 20px;
   background: #eeeeee;
}
09: Three column layout
#navigation, #content   {
    float: left;
}
#sidebar          {
    …
    float: right;
}
.clearBoth        {
    clear: both;
}
#sidebar input {
    font-size: 12px;
}
10: Font family
body {
  …
  font-family: "Lucida Grande", "Lucida Sans", "Lucida
  Sans Unicode", sans-serif;
}
11: Footer
#footer {
   background-color: #f0f2bf;
   font-size: 11px;
   padding: 0 5px;
}
#footer p           {
   float: right;
}
#footer p:first-child    {
   float: left;
}
#footer p a         {
   margin-left: 0.5em;
}
Specificity: dull but !important
   Specificity is a dull, complex calculation
   Remember this ranking:
     Inline   (i.e. “style”) attributes
     IDs

     Classes

     Elements

   !important
JavaScript Libraries
   Browsers & the DOM - no more coding for browsers
   Prototype, Dojo
   Added methods simplify coding
   CSS selectors – collect arrays of elements using IDs
    and classes.
   Simplified Ajax and event handling
Plug in prototype

<script language=“javascript”
 src=“prototype.js”>
</script>

   124K, 28K gzipped
$ : Get an element by it‟s ID
<script language=“javascript”>
$(„headline‟).replace(„Today‟s News‟);
</script>
…
<p id=“headline”>Yesterday‟s News</p>
$$ : Get elements by CSS selector
<script language=“javascript”>
$$(„.advertisement‟). invoke(„hide‟);
$(„orderForm‟).hide();
</script>
$F : simplified form field values
var formValue = $F(„dateNeeded‟);

   Text fields
   Option-selects
   Checkboxes
   Radio buttons
Event Handling
   Event.observe(DOM element, event, function);
   Events: e.g. click, hover, load, mouseover, keypress,
    etc.

<script language=“javascript”>
Event.observe(window, 'load', preparePage);
</script>
AJAX
new Ajax.Request(„ajaxHandler.php‟, {
   method: 'get',
   onSuccess: function(transport) {
       $(„#surveyForm‟).replace(transport.responseText);
   },
   parameters: {action: „getForm‟, id: 12 }
} );
Match columns
function matchColumns() {
  var layoutColumns = $$('div.layoutColumn');
  var max_height =
       layoutColumns.invoke('getHeight').max();
  layoutColumns.invoke('setStyle',
       {height: (max_height + 10) + 'px'});
}
Resources
   Firebug
       addons.mozilla.org/en-US/firefox/search?q=firebug
   HTML/CSS/JavaScript reference at SitePoint
       reference.sitepoint.com/
   Javascript Libraries
     Prototype      - www.prototypejs.org
     Dojo- dojotoolkit.org
     jQuery - jquery.com

								
To top