TECH@NYU WORKSHOP SERIES:
HTML + CSS (3)
Suit up!
Curriculum & Contents by Tech-Up
ME... Tech@NYU E-Board
Eric @mugmania @techupnyc
...YOUR LAB PARTNERS
ARE YOU NEW?
•Web Browser
Chrome (10.X)
•Text Editor
ANY Text Editor e.g. TextEdit (plain text), Notepad
Preferably with syntax highlighting
TextWrangler (Free, Mac) TextMate ($, Mac)
NotePad++ (Free, Win) GEdit (Free, Linux)
REVIEW (1)
Image Link
<a href=”http://www.mysite.com”>
! < img src=”logo.png” />
</a>
Relative Address
<img src=”../images/logos/logo.png” />
REVIEW (2) 20 px
Table
<table border=1 cellpadding=20px >
<tr >
<th >Name</th >
<th >Startup Week?</th >
</tr >
<tr >
<td >Eric Hong</td >
<td >Hell, yeah!</td >
</tr >
</table >
REVIEW (3)
Form
<form >
<input type=”text ” maxlength= 140><br />
<input type=”submit ” value= ”Tweet”><br />
</form >
HISTORY OF CSS
CSS 1 CSS 3
CSS 2
(1996)
XHTML XHTML
XHTML5
1.X 2.0
... HTML
(1995) 4.0
HTML5
HTML5
World Wide Web Consortium (W3C)
CODING SOUNDS SICK!
What is CSS?
Cascading Style Sheets
Control look and feel of web documents
Apply one style to many elements
Apply one style to many styles (CSS)
Apply a set of styles to many documents
Why should we use CSS?
Separate style from content
Control look and feel more efficiently
Gain flexibility and consistency
CSS IN 3 FLAVORS! (1)
In-line
style=”” attribute
We’ve already seen this!
Cannot apply one style to many elements
Use to override or apply style for one element
CSS IN 3 FLAVORS! (2)
CSS Syntax & <style> Tag
Element
{ Property
: Value(s)
; ... }
<head>
<style type=”text/css”>
CSS Declarations
</style>
</head>
CSS IN 3 FLAVORS! (2)
<style> Tag Color Hex Color Codes
http://www.color-hex.com/
Much better!
Cannot apply to many documents
Does not separate content from style
background:#BADA55
padding:20px
text-indent:50px
CSS IN 3 FLAVORS! (3)
External CSS File
<head>
<link rel=”stylesheet”
type=”text/css”
href=”master.css” />
</head>
Turn the previous style tag into an
external CSS file and link it
<P> VS <SPAN> VS <DIV>
<p>
Serves as content container
Formats content like a paragraph (paragraph break)
<span>
Serves as in-line style container
<div>
Serves as block-level style container
GIVE ME A BREAK! I NEED SOME SPACE...
<span></span>!! ! group in-line elements
no visual change
great way to stylize
Pay attention to styles
TEXTING WITH STYLE
Font
font-family: (value)
Text font-size: (value)
color: (color - name, rgb, HEX) font-style: normal, italic, oblique
text-align: center, right, justify
text-indent: (value)
text-transform: uppercase, lowercase, capitalize
font: Helvetica
color:#BADA55
http://www.nyustartupweek.com size: 30px
indent: 50px
align: justify
USEFUL RESOURCES
W3C School - HTML5
http://www.w3schools.com/html5/
W3C School - CSS
http://www.w3schools.com/CSS/
Color Hex Color Codes
http://www.color-hex.com/
LAB: BLING BLING, HTML!
Let’s put these pieces together.
Use all the concepts we learned so far to make your page
that you made prettier!
You should have:
•External CSS file
•Link tag
•Font/Text CSS Styling
