Scribd
Upload
32 views

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

This document discusses CSS, JavaScript, and the box model for web design. It covers topics like typography, layout, and the separation of content, design, and interaction using the MVC model. HTML elements, CSS properties, and JavaScript are presented as ways to control content, design, and user interaction respectively. The document also provides examples of using CSS for typography, links, and applying styles through classes, IDs, and the cascade.

Uploaded by

Deni Rohendar
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
32 views

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

This document discusses CSS, JavaScript, and the box model for web design. It covers topics like typography, layout, and the separation of content, design, and interaction using the MVC model. HTML elements, CSS properties, and JavaScript are presented as ways to control content, design, and user interaction respectively. The document also provides examples of using CSS for typography, links, and applying styles through classes, IDs, and the cascade.

Uploaded by

Deni Rohendar
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 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
(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.

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 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 class=general>A generic block</div>
<div id=group>
<div class=general>A generic block</div>
</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;
}

You might also like