Scribd
Upload
146 views

Introduction To Web Development Lecture 3

[Tech-Up] Introduction to Web Development Lecture 3 Suit Up - History of CSS - Coding Sounds Sick! - CSS in 3 Flavors - vs. vs. - Texting with Style [Lab 3] Bling Bling, HTML!

Uploaded by

Tech-Up
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as PDF, TXT or read online on Scribd
146 views

Introduction To Web Development Lecture 3

[Tech-Up] Introduction to Web Development Lecture 3 Suit Up - History of CSS - Coding Sounds Sick! - CSS in 3 Flavors - vs. vs. - Texting with Style [Lab 3] Bling Bling, HTML!

Uploaded by

Tech-Up
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 17

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

You might also like