CSS, Javascript & Box Model: Lee Byron Web Design, Fall 2007 Cmu School of Design

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
(Arbitrary)
Font color
<table><tr><td> Cells </td></tr></table>

<table cellpadding=0 cellspacing=0 width=200 height=100>
For all
cells (px)
For all
cells (px)
Total (px)
Total (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.

Model: The content
View: The design
Controller: The interaction

HTML: The content
CSS: The design
JavaScript: The interaction

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 youll ever need

<div>
<span>
<p>
<a>
Basic building block

Inline building block
Paragraph
Link
<h1>
<ol>
<ul>
<li>
<dl>
<dt>
<dd>
Header (<h1> through <h6>)

Ordered list (1, 2, 3)
Unordered list (, , )
A list item
A dictionary definition list
A dictionary term
A dictionary definition
<div> A new kind of tag </div>

<div id=unique class=general>
A unique
name
A general
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{
font-weight: bold;
}
td.general{
font-size: 12px;
}
.general{
color: #FF6633;
}
div.general{
font-size: 14px;
}
Cascading CSS
<div id=group>
</div>
.general{
font-weight: bold;
}
#group .general{
color: #FF6633;
}
Bold & Colored
CSS Typography
color:
font-family:
font-weight:
font-style:
font-variant:
font-size:
text-decoration:
text-indent:
text-align:
letter-spacing:
word-spacing:
line-height:
text-transform:
#RRGGBB;
serif, sans-serif, monospace;
bold, normal;
italic, normal;
small-caps, none;
12px, 120%, 1.2em;
underline, line-through, none;
20px, 3em;
left, right, center;
2px, 0.2em;
10px, 1em;
14px, 140%, 1.5em;
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 isnt 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 users 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;
Percentage
1em
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;
}

CSS, Javascript & Box Model: Lee Byron Web Design, Fall 2007 Cmu School of Design

Cargado por

Información del documento

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

CSS, Javascript & Box Model: Lee Byron Web Design, Fall 2007 Cmu School of Design

Cargado por

Copyright:

Formatos disponibles

CSS, JavaScript & Box Model

Lets talk about the

<font> The Font Tag </font>

<table><tr><td> Cells </td></tr></table>

<td align=center valign=top width=200 height=100>

One is about typography

A Nerdy Tangent: MVC

A Nerdy Tangent: MVC

A Nerdy Tangent: MVC

A Nerdy Tangent: MVC

All the HTML youll ever need

Basic building block

Header (<h1> through <h6>)

<div> A new kind of tag </div>

Cansei de Ser Sexy?

Cascading Style Sheets

Linking CSS to HTML

index.html page2.html page3.html

Inline CSS ...but it breaks MVC

What HTML should this apply to?

The style to change (size, color...)

The style to change it to (big, red...)

CSS mirrors HTML

Bold & Colored

Sizing in CSS: Units

Defines a size relative to a default value

CSS links, oh that <a>

También podría gustarte