8/7/2019 Introduction to Web Development Lecture 3

1/17

TECH@NYU WORKSHOP SERIES:

HTML + CSS (3)

Suit up!

Curriculum & Contents by Tech-Up

8/7/2019 Introduction to Web Development Lecture 3

2/17

ME...

...YOUR LAB PARTNERS

Eric

Tech@NYU E-Board

@mugmania @techupnyc

8/7/2019 Introduction to Web Development Lecture 3

3/17

ARE YOU NEW?

Web Browser Chrome (10.X)

Text Editor ANY Text Editore.g. TextEdit (plain text), Notepad Preferably with syntaxhighlightingTextWrangler (Free, Mac) TextMate ($, Mac) NotePad++ (Free, Win) GEdit (Free, Linux)

8/7/2019 Introduction to Web Development Lecture 3

4/17

REVIEW (1)

Image Link

< =http://www.mysite.com>! < src=logo.png />< >

Relative Address

a href

img

/a

../images/logos/

8/7/2019 Introduction to Web Development Lecture 3

5/17

REVIEW (2)Table

< >

< >

< >Name

< >Startup Week?

< >

< >Eric Hong

< >Hell, yeah!< >

table border=1 cellpadding=20px

tr

th th

th thtr

tr

td td

td td/tr

table

20 px

8/7/2019 Introduction to Web Development Lecture 3

6/17

REVIEW (3)

Form

< >< type= 140>

< type= Tweet>

forminput text maxlength=

input submit value=

form

8/7/2019 Introduction to Web Development Lecture 3

7/17

HISTORY OF CSS

World Wide Web Consortium (W3C)

...

(1995)

HTML

4.0HTML5

XHTML

1.X

XHTML

2.0 XHTML5

HTML5

CSS 1

(1996)CSS 2 CSS 3

8/7/2019 Introduction to Web Development Lecture 3

8/17

CODING SOUNDS SICK!What is CSS?

Cascading Style SheetsControl look and feel of web documentsApply 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 contentControl look and feel more efficientlyGain flexibility and consistency

8/7/2019 Introduction to Web Development Lecture 3

9/17

CSS IN 3 FLAVORS! (1)

In-linestyle= attribute

Weve already seen this!

Cannot apply one style to many elementsUse to override or apply style for one element

8/7/2019 Introduction to Web Development Lecture 3

10/17

CSS IN 3 FLAVORS! (2)

CSS Syntax & Tag

Element

{Property Value(s)

: ; ... } CSS Declarations

8/7/2019 Introduction to Web Development Lecture 3

11/17

CSS IN 3 FLAVORS! (2)

Tag

Much better!Cannot apply to many documents

Does not separate content from style

background:#BADA55

padding:20pxtext-indent:50px

Color Hex Color Codeshttp://www.color-hex.com/

http://www.color-hex.com/http://www.color-hex.com/

8/7/2019 Introduction to Web Development Lecture 3

12/17

CSS IN 3 FLAVORS! (3)

External CSS File

8/7/2019 Introduction to Web Development Lecture 3

13/17

VS VS

Serves as content containerFormats content like a paragraph (paragraph break)

Serves as in-line style container

Serves as block-level style container

8/7/2019 Introduction to Web Development Lecture 3

14/17

GIVE ME A BREAK!I NEED SOME SPACE...

!! ! group in-line elements no visual change great way to stylizePay attention to styles

8/7/2019 Introduction to Web Development Lecture 3

15/17

TEXTING WITH STYLE

font: Helveticacolor:#BADA55

size: 30pxhttp://www.nyustartupweek.com

indent: 50pxalign: justify

Textcolor: (color - name, rgb, HEX)text-align: center, right, justifytext-indent: (value)

text-transform: uppercase, lowercase, capitalize

Font

font-family: (value)font-size: (value)

font-style: normal, italic, oblique

8/7/2019 Introduction to Web Development Lecture 3

16/17

USEFUL RESOURCES

W3C School - HTML5http://www.w3schools.com/html5/

W3C School - CSShttp://www.w3schools.com/CSS/

Color Hex Color Codeshttp://www.color-hex.com/

http://www.color-hex.com/http://www.w3schools.com/html5/http://www.color-hex.com/http://www.color-hex.com/http://www.w3schools.com/html5/http://www.w3schools.com/html5/http://www.w3schools.com/html5/http://www.w3schools.com/html5/

8/7/2019 Introduction to Web Development Lecture 3

17/17

LAB: BLING BLING, HTML!

Lets 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 tagFont/Text CSS Styling