Tutorial CSS 1 by bedhoel24

VIEWS: 17 PAGES: 28

									
CSS, JavaScript & Box Model




Lee Byron
Web Design, Fall 2007
CMU School of Design
Lets talk about the
“building blocks” of a
website as we know it.
       <font> The Font Tag </font>

<font face=“verdana” size=“2” color=“#000000”>


           Typeface    Font size    Font color
                      (Arbitrary)
   <table><tr><td> Cells </td></tr></table>

<table cellpadding=“0” cellspacing=“0” width=“200” height=“100”>



                 For all            For all     Total (px)   Total (px)
                cells (px)         cells (px)
   <td align=“center” valign=“top” width=“200” height=“100”>



           Horz. Align       Vert. Align   Width (px)    Height (px)
One is about typography
The other about placement

But...
Your typography is limited
Your placement is constrained
A Nerdy Tangent: MVC

Tables are around to hide you
from the truth.
A Nerdy Tangent: MVC

Model: The content
View: The design
Controller: The interaction
A Nerdy Tangent: MVC

HTML: The content
CSS: The design
JavaScript: The interaction
A Nerdy Tangent: MVC

Make your content concise
Keep your design in one place
HTML
Make it about the content
<library>
     <name>Squirrel Hill Public Library</name>
     <location>Forbes Ave. & Murray Ave., Pittsburgh PA</location>
     <aisle>
          <topic>Science</topic>
          <book>
              <title>A Brief History of Time</title>
              <author>Stephen Hawking</author>
              <pages>340</pages>
          </book>
     </aisle>
     <aisle>
          <topic>Non-Fiction</topic>
          <book>
              <title>The Art of War</title>
              <author>Sun Tzu</author>
              <pages>230</pages>
          </book>
     </aisle>
</library>
All the HTML you’ll ever need
<div>    Basic building block
<span>   Inline building block
<p>      Paragraph
<a>      Link

<h1>     Header (<h1> through <h6>)
<ol>     Ordered list (1, 2, 3)
<ul>     Unordered list (•, •, •)
<li>     A list item
<dl>     A dictionary definition list
<dt>     A dictionary term
<dd>     A dictionary definition
<div> A new kind of tag </div>

<div id=“unique” class=“general”>


       A unique       A general
        name            type
<library>
     <name>Squirrel Hill Public Library</name>
     <location>Forbes Ave. & Murray Ave., Pittsburgh PA</location>
     <aisle>
          <topic>Science</topic>
          <book>
              <title>A Brief History of Time</title>
              <author>Stephen Hawking</author>
              <pages>340</pages>
          </book>
     </aisle>
     <aisle>
          <topic>Non-Fiction</topic>
          <book>
              <title>The Art of War</title>
              <author>Sun Tzu</author>
              <pages>230</pages>
          </book>
     </aisle>
</library>
<div id=“library”>
    <div class=“name”>Squirrel Hill Public Library</div>
    <div class=“location”>Forbes Ave. & Murray Ave., Pittsburgh</div>
    <div class=“aisle”>
         <div class=“topic”>Science</div>
         <div class=“book”>
              <div class=“title”>A Brief History of Time</div>
              <div class=“author”>Stephen Hawking</div>
              <div class=“pages”>340</div>
         </div>
    </div>
    <div class=“aisle”>
         <div class=“topic”>Non-Fiction</div>
         <div class=“book”>
              <div class=“title”>The Art of War</div>
              <div class=“author”>Sun Tzu</div>
              <div class=“pages”>230</div>
         </div>
    </div>
</div>
What is CSS?
Cansei de Ser Sexy?
Cascading Style Sheets
Take control of Typography
Have flexibility in Placement
Linking CSS to HTML
<head>
   <link href=“style.css” rel=“stylesheet” type=“text/css” />
</head>




          website




         
   index.html page2.html page3.html           style.css
Inline CSS ...but it breaks MVC
<head>
   <style>
      .myStyleName{
          color: #FF6633;
      }
   <style>
</head>

or...
<div style=“color:#FF6633;”>Content</div>
A CSS rule
selector{
    attribute: value;
}

selector    What HTML should this apply to?
attribute   The style to change (size, color...)
value       The style to change it to (big, red...)
CSS mirrors HTML
<div id=“unique”>A unqiue block</div>
<div class=“general”>A general block</div>

#unique{
   attribute: value;
   font-family: georgia;
}
.general{
   font-size: 14px;
}
Per-tag CSS
<td class=“general”>A generic table cell</td>
<div class=“general”>A generic block</div>

General                      Per-tag
td{                          td.general{
      font-weight: bold;         font-size: 12px;
}                            }

.general{                    div.general{
   color: #FF6633;               font-size: 14px;
}                            }
“Cascading” CSS
<div class=“general”>A generic block</div>
<div id=“group”>
   <div class=“general”>A generic block</div>
</div>

.general{
   font-weight: bold;   Bold & Colored
}

#group .general{
   color: #FF6633;
}
CSS Typography
color:             #RRGGBB;
font-family:       serif, sans-serif, monospace;
font-weight:       bold, normal;
font-style:        italic, normal;
font-variant:      small-caps, none;
font-size:         12px, 120%, 1.2em;
text-decoration:   underline, line-through, none;
text-indent:       20px, 3em;
text-align:        left, right, center;
letter-spacing:    2px, 0.2em;
word-spacing:      10px, 1em;
line-height:       14px, 140%, 1.5em;
text-transform:    capitalize, lowercase, uppercase, none;
font-family
font-family expects a list of fonts, for example...
font-family: “Lucida Grande”, Helvetica, Arial, sans-serif;

If the first font isn’t found, it will try the next, and the
next, and so on. This way you can specify a non web
standard font, as long as you specify backup fonts.

Fonts with spaces must be in quotes, i.e. “Lucida Grande”

There should always be a “generic” font at the end of the
list. The actual font used will be different depending on
the user’s language and operating system.

serif, sans-serif, cursive, fantasy, monospace
Sizing in CSS: Units
Pixels
Defines a size absolutely, in terms of pixels
font-size: 12px;

Relative
Defines a size based on the
current font size “em”
line-height: 1.3em;
                                   1em
Percentage
Defines a size relative to a default value
letter-spacing: 150%;
CSS links, oh that <a>
standard   a{
                color: #333333;
                text-decoration: none;
           }

:hover     a:hover{
              color: #FF6633;
              text-decoration: underline;
           }

:visited   a:visited{
               color: #666666;
           }

								
To top