1 of 56

Web Dev

Introduction to HTML and CSS

2 of 56

3 of 56

4 of 56

5 of 56

6 of 56

How Websites Load

7 of 56

8 of 56

HTTP request

HTTP response

9 of 56

HTTP request

HTTP response

10 of 56

HTTP request

HTTP response

11 of 56

HTTP request

HTTP response

12 of 56

13 of 56

<html>

</html>

14 of 56

<html>

<body>

</body>

</html>

15 of 56

<html>

<body>

<header>...</header>

</body>

</html>

HEADER HEADER YAY

16 of 56

<html>

<body>

<header>...</header>

<p><p>

</body>

</html>

HEADER HEADER YAY

This is a paragraph. So much paragraph. Para ara ara graph. Graphs! Graphs are fun! Let’s get a pair of graphs. Then we can parrot what paragraphs say.

17 of 56

<html>

<body>

...

<img>

</body>

</html>

HEADER HEADER YAY

This is a paragraph. So much paragraph. Para ara ara graph. Graphs! Graphs are fun! Let’s get a pair of graphs. Then we can parrot what paragraphs say.

18 of 56

<html>

<body>

...

<img href=”...”>

</body>

</html>

HEADER HEADER YAY

This is a paragraph. So much paragraph. Para ara ara graph. Graphs! Graphs are fun! Let’s get a pair of graphs. Then we can parrot what paragraphs say.

19 of 56

<html>

<body>

...

<footer>...</footer>

</body>

</html>

HEADER HEADER YAY

This is a paragraph. So much paragraph. Para ara ara graph. Graphs! Graphs are fun! Let’s get a pair of graphs. Then we can parrot what paragraphs say.

Footer footer way

20 of 56

HEADER HEADER YAY

This is a paragraph. So much paragraph. Para ara ara graph. Graphs! Graphs are fun! Let’s get a pair of graphs. Then we can parrot what paragraphs say.

Footer footer way

HEADER HEADER YAY

This is a paragraph. So much paragraph. Para ara ara graph. Graphs! Graphs are fun! Let’s get a pair of graphs. Then we can parrot what paragraphs say.

Footer footer way

21 of 56

<html>

<head>

<link rel = "stylesheet"

type = "text/css"

href = "myStyle.css" />

</head>

<body>...</body>

</html>

HEADER HEADER YAY

This is a paragraph. So much paragraph. Para ara ara graph. Graphs! Graphs are fun! Let’s get a pair of graphs. Then we can parrot what paragraphs say.

Footer footer way

22 of 56

<html>

<head>

<link rel = "stylesheet"

type = "text/css"

href = "myStyle.css" />

</head>

<body>...</body>

</html>

HEADER HEADER YAY

This is a paragraph. So much paragraph. Para ara ara graph. Graphs! Graphs are fun! Let’s get a pair of graphs. Then we can parrot what paragraphs say.

Footer footer way

23 of 56

HTTP request

HTTP response

24 of 56

25 of 56

What

Can I Style?

Pretty much anything.

  1. Font, colour, border
  2. Margins & padding
  3. Positioning

26 of 56

What Can I Style?

Text

​

​

​

​

​

​

​

​

​

​

{

}

27 of 56

What Can I Style?

Text

​

​

​

​

​

​

​

​

​

​

{

background-color: #4285F4;

}

28 of 56

What Can I Style?

Text

​

​

​

​

​

​

​

​

​

​

{

background-color: #4285F4;

font-family: “Open Sans”, sans-serif;

}

29 of 56

What Can I Style?

Text

​

​

​

​

​

{

background-color: #4285F4;

font-family: “Open Sans”, sans-serif;

font-size: 24px;

}

30 of 56

What Can I Style?

Text

​

​

​

​

​

{

background-color: #4285F4;

font-family: “Open Sans”, sans-serif;

font-size: 24px;

color: #FFF;

}

31 of 56

What Can I Style?

Text

​

​

​

​

​

{

background-color: #4285F4;

font-family: “Open Sans”, sans-serif;

font-size: 24px;

color: #FFF;

border: 4px solid #F4B400;

}

32 of 56

What Can I Style?

{

}

TEXT TEXT TEXT TEXT TEXT

TEXT TEXT TEXT TEXT TEXT

TEXT TEXT TEXT TEXT TEXT

TEXT TEXT TEXT TEXT TEXT

TEXT TEXT TEXT TEXT TEXT

TEXT TEXT TEXT TEXT TEXT

TEXT TEXT TEXT TEXT TEXT

TEXT TEXT TEXT TEXT TEXT

33 of 56

What Can I Style?

{

margin: 5px;

}

TEXT TEXT TEXT TEXT TEXT

TEXT TEXT TEXT TEXT TEXT

TEXT TEXT TEXT TEXT TEXT

TEXT TEXT TEXT TEXT TEXT

TEXT TEXT TEXT TEXT TEXT

TEXT TEXT TEXT TEXT TEXT

TEXT TEXT TEXT TEXT TEXT

TEXT TEXT TEXT TEXT TEXT

34 of 56

What Can I Style?

{

margin: 5px 5px 10px 5px;

}

TEXT TEXT TEXT TEXT TEXT

TEXT TEXT TEXT TEXT TEXT

TEXT TEXT TEXT TEXT TEXT

TEXT TEXT TEXT TEXT TEXT

TEXT TEXT TEXT TEXT TEXT

TEXT TEXT TEXT TEXT TEXT

TEXT TEXT TEXT TEXT TEXT

TEXT TEXT TEXT TEXT TEXT

35 of 56

What Can I Style?

{

margin: 5px 5px 10px 5px;

padding: 5px 0px 5px 0px;

}

TEXT TEXT TEXT TEXT TEXT

TEXT TEXT TEXT TEXT TEXT

TEXT TEXT TEXT TEXT TEXT

TEXT TEXT TEXT TEXT TEXT

TEXT TEXT TEXT TEXT TEXT

TEXT TEXT TEXT TEXT TEXT

TEXT TEXT TEXT TEXT TEXT

TEXT TEXT TEXT TEXT TEXT

​

36 of 56

What Can I Style?

{

margin: 5px 5px 10px 5px;

padding: 5px 0px;

}

TEXT TEXT TEXT TEXT TEXT

TEXT TEXT TEXT TEXT TEXT

TEXT TEXT TEXT TEXT TEXT

TEXT TEXT TEXT TEXT TEXT

TEXT TEXT TEXT TEXT TEXT

TEXT TEXT TEXT TEXT TEXT

TEXT TEXT TEXT TEXT TEXT

TEXT TEXT TEXT TEXT TEXT

​

37 of 56

What Can I Style?

{

margin: 5px 5px 10px 5px;

padding: 5px 0px;

background-color: #4285F4;

color: #FFF;

}

TEXT TEXT TEXT TEXT TEXT

TEXT TEXT TEXT TEXT TEXT

TEXT TEXT TEXT TEXT TEXT

TEXT TEXT TEXT TEXT TEXT

TEXT TEXT TEXT TEXT TEXT

TEXT TEXT TEXT TEXT TEXT

TEXT TEXT TEXT TEXT TEXT

TEXT TEXT TEXT TEXT TEXT

​

38 of 56

Positioning: Static

{

position: static;

}

39 of 56

Positioning: Relative

{

position: relative;

left: 0px;

top: 0px;

}

40 of 56

Positioning: Relative

{

position: relative;

left: 0px;

top: -20px;

}

41 of 56

Positioning: Absolute

{

position: absolute;

left: 0px;

top: 0px;

}

42 of 56

Positioning: Absolute

{

position: absolute;

left: 0px;

top: 100px;

}

43 of 56

But… how do I specify what to style?

44 of 56

{

background-color: #4285F4;

}

45 of 56

{

background-color: #4285F4;

}

46 of 56

CSS Selectors

47 of 56

Selectors: By Attribute

{

font-size: 25px;

}

<h1>This is a header</h1>

48 of 56

Selectors: By Type

h1 {

font-size: 25px;

}

<h1>This is a header</h1>

49 of 56

Selectors: Class Selector

.woot {

font-size: 25px;

}

<h1 class=“woot”>This is a header</h1>

50 of 56

Selectors: Class Selector

h1.woot {

font-size: 25px;

}

<h1 class=“woot”>This is a header</h1>

51 of 56

Selectors: Class Selector

body h1.woot {

font-size: 25px;

}

<h1 class=“woot”>This is a header</h1>

52 of 56

Selectors: Class Selector

h1.woot,

h2.woot {

font-size: 25px;

}

<h1 class=“woot”>This is a header</h1>

53 of 56

Selectors: Id Selector

#woot {

font-size: 25px;

}

<h1 id=“woot”>This is a header</h1>

54 of 56

Selectors: Pseudo-Class Selector

#woot {

font-size: 25px;

}

​

#woot:hover {

font-size: 50px;

}

<h1 id=“woot”>This is a header</h1>

55 of 56

Selectors: Conflicts

#woot {

font-size: 25px;

}

​

#woot:hover {

font-size: 50px;

}

<h1 id=“woot”>This is a header</h1>

56 of 56

Developer Tools