1 of 226

Web Design

Lecture & Discussion:

The CSS Box Model: �<div> Elements & HTML5 Semantics

​

2 of 226

Quick Review

Web Literacy, Syntax, Clients & Servers, File Naming Conventions, Folder Structure

DIVs

HTML <div> Elements, The CSS Box Model, �Content, padding, border, margin

HTML5 Semantic Tags

CSS Reset

CSS display Property

IDs, Classes, Pseudo-classes

​

3 of 226

Quick Review

Web Literacy, Syntax, Clients & Servers, File Naming Conventions, Folder Structure

DIVs

HTML <div> Elements, The CSS Box Model, �Content, padding, border, margin

HTML5 Semantic Tags

CSS Reset

CSS display Property

IDs, Classes, Pseudo-classes

​

4 of 226

Quick Review

Web Literacy, Syntax, Clients & Servers, File Naming Conventions, Folder Structure

DIVs

HTML <div> Elements, The CSS Box Model, �Content, padding, border, margin

HTML5 Semantic Tags

CSS Reset

CSS display Property

IDs, Classes, Pseudo-classes

​

5 of 226

Web Literacy

Structure/Semantics

Hypertext Markup Language (HTML)

HTML documents provide the structure of a website. An HTML document is comprised of a system of <tags> </tags> �that describe (or “markup”) the content of a webpage.

​

Style/Design

Cascading Style Sheets (CSS)

CSS rulesets hold the visual instructions for each HTML <tag>, using selectors, {declarations: and values;}.

html

css

6 of 226

Web Literacy

Structure/Semantics (HTML)

+

Style/Design (CSS)

=

Browser Display (WWW)

An Internet browser (such as Chrome, Firefox, Internet Explorer, or Safari) is software that is able to read and synthesize web-based media and coding languages, including audio/video/imagery, such as HTML, CSS, JavaScript, PHP, Python, Flash, etc.

html

css

www

7 of 226

Clients & Servers

Clients are software (like internet browsers) and hardware (like smartphones, tablets, and laptop computers) that use a network connection (like the Internet) to access information provided by a server

www

8 of 226

Clients & Servers

Clients

​

&

​

Servers are the software and hardware that make the Internet possible. They provide clients with files and services via HTTP; they are computers that store, process, and deliver websites to clients

www

9 of 226

Clients & Servers

html

css

html

css

The�Internets

(Clients)

HTTP

HTTP

FTP

FTP

FTP

Your

Website

(Hosted)

Your

Site

(Local)

Hosting Service Data Center (Server)

Your Computer, �Los Angeles, CA

(Client)

10 of 226

HTML Syntax

Structure/Semantics

<html>

<head>

<title>My site</title>

</head>

<body>

<h1>My site</h1>

<h2>Welcome to my site!</h2>

</body>

</html>

​

​

html

11 of 226

HTML Syntax

Structure/Semantics

​

​

​

​

​

​

Most HTML elements consist of an opening <tag> and a closing </tag>. Some elements have content or other tags nested inside them. The image tag <img> opens and closes in the same tag (it’s an unpaired tag), with an attribute src="" for the image source.

<p>This <em>is</em> a paragraph.</p>

​

<img src="cat.jpg">

​

html

12 of 226

HTML Syntax

Structure/Semantics

<p>This is a paragraph.</p>

​

An HTML Element has three parts:

Open tag

Element content

Close tag

​

html

13 of 226

HTML Syntax

Structure/Semantics

<img src="funny-cat.gif">

​

An HTML Void Element has four parts:

Open tag

Attribute

Attribute Value

Close bracket

​

html

14 of 226

CSS Syntax

Style/Design

p {

Xxx font-size: 12pt; Xxx

}

A CSS Rule Set has four parts:

Selector {

xxxxDeclaration Block Property-Name: Property-Value; xxxx

}

​

css

15 of 226

File Naming Conventions

Best Practices for Naming Files

no%20spaces%20ever.html

hyphens-are-ok.html

underscores_are_also_cool.html

NEVER-UPPERCASE-EVER.html

always-lowercase-everything.html

nº--$pe©i@l--©h@®@çters!!!!.html

less-than-thirty-letters-long.html

16 of 226

Folder Structure

root-directory

​

The folder that you build all of your HTML and CSS files in is called a root-directory. Folders inside of the root directory (such as “css,” “img,” and “pages”) are called sub-directories.

​

​

17 of 226

Folder Structure

Root Directory

​

Index index.html

​

CSS Folder stylesheet.css

​

Images Folder

​

Pages Folder

css

html

html

html

html

html

css

html

img

pages

​

fi-la

18 of 226

Quick Review

Web Literacy, Syntax, Clients & Servers, File Naming Conventions, Folder Structure

DIVs

HTML <div> Elements, The CSS Box Model, �Content, padding, border, margin

HTML5 Semantic Tags

CSS Reset

CSS display Property

IDs, Classes, Pseudo-classes

​

19 of 226

Quick Review

Web Literacy, Syntax, Clients & Servers, File Naming Conventions, Folder Structure

DIVs

HTML <div> Elements, The CSS Box Model, �Content, padding, border, margin

HTML5 Semantic Tags

CSS Reset

CSS display Property

IDs, Classes, Pseudo-classes

​

20 of 226

Quick Review

Web Literacy, Syntax, Clients & Servers, File Naming Conventions, Folder Structure

DIVs

HTML <div> Elements, The CSS Box Model, �Content, padding, border, margin

HTML5 Semantic Tags

CSS Reset

CSS display Property

IDs, Classes, Pseudo-classes

​

21 of 226

HTML <div> Elements

22 of 226

HTML <div> Elements

<div> </div>

We use the HTML division elements to create �boxes that hold the content on our web page.

23 of 226

HTML <div> Elements

<div> </div>

We use the HTML division elements to create �boxes that hold the content on our web page.

​

​

A <div> </div> is like a Rectangle Frame �that you might use in design software �(such as Adobe InDesign or Illustrator):

24 of 226

HTML <div> Elements

<div> </div>

We use the HTML division elements to create �boxes that hold the content on our web page.

​

​

A <div> </div> is like a Rectangle Frame �that you might use in design software �(such as Adobe InDesign or Illustrator):

25 of 226

HTML <div> Elements

<div> </div>

We use the HTML division elements to create �boxes that hold the content on our web page.

​

​

A <div> </div> is like a Rectangle Frame �that you might use in design software �(such as Adobe InDesign or Illustrator):

​

The <div> element is typically used to hold on to content like text, images, or videos, but it’s also useful for page composition.

26 of 226

Quick Review

Web Literacy, Syntax, Clients & Servers, File Naming Conventions, Folder Structure

DIVs

HTML <div> Elements, The CSS Box Model, �Content, padding, border, margin

HTML5 Semantic Tags

CSS Reset

CSS display Property

IDs, Classes, Pseudo-classes

​

27 of 226

Quick Review

Web Literacy, Syntax, Clients & Servers, File Naming Conventions, Folder Structure

DIVs

HTML <div> Elements, The CSS Box Model, �Content, padding, border, margin

HTML5 Semantic Tags

CSS Reset

CSS display Property

IDs, Classes, Pseudo-classes

​

28 of 226

The CSS Box Model

29 of 226

The CSS Box Model

All <div> </div> elements can be considered boxes:

30 of 226

The CSS Box Model

All <div> </div> elements can be considered boxes:

31 of 226

The CSS Box Model

All <div> </div> elements can be considered boxes:

​

The CSS Box Model is an approach to building a website based on a structure of <div> </div> elements and stacking/nesting them like boxes.

32 of 226

The CSS Box Model

33 of 226

The CSS Box Model

So if we look at any website, we can start to imagine a very simple combination of “boxes” (or HTML <div> elements) that might be used to structure the page.

34 of 226

The CSS Box Model

So if we look at any website, we can start to imagine a very simple combination of “boxes” (or HTML <div> elements) that might be used to structure the page.

​

For instance, look at the login page for Facebook.com and try to imagine the simplest combination of HTML <div> elements that could be used to compose the page:

35 of 226

36 of 226

This is a Box

37 of 226

This is a Box

38 of 226

This is a Box

39 of 226

40 of 226

So this particular website layout is basically �just three big boxes stacked vertically!

​

​

​

41 of 226

So this particular website layout is basically �just three big boxes stacked vertically!

​

We can create this layout structure �in the HTML using three <div> elements.

42 of 226

<div> </div>

43 of 226

<div> </div>

<div> </div>

44 of 226

<div> </div>

<div> </div>

<div> </div>

45 of 226

<div> </div>

<div> </div>

<div> </div>

46 of 226

The CSS Box Model

Great! So we can start to imagine a very basic structure for the page: just three boxes (HTML <div> elements) stacked on top of each other vertically.

47 of 226

The CSS Box Model

Great! So we can start to imagine a very basic structure for the page: just three boxes (HTML <div> elements) stacked on top of each other vertically.

​

But if we look closer, we notice that there seems to be some additional structure within some of those boxes:

48 of 226

49 of 226

This is a box

50 of 226

This is a box

51 of 226

<div> </div>

52 of 226

<div> </div>

<div> </div>

53 of 226

And they both are nested inside of this box

54 of 226

<div> </div>

55 of 226

<div> </div>

<div> </div>

56 of 226

<div> </div>

<div> </div>

<div> </div>

57 of 226

<div> </div>

<div> </div>

<div> </div>

This is a box

58 of 226

<div> </div>

<div> </div>

<div> </div>

This is a box

59 of 226

<div> </div>

<div> </div>

<div> </div>

<div> </div>

60 of 226

<div> </div>

<div> </div>

<div> </div>

<div> </div>

<div> </div>

61 of 226

<div> </div>

<div> </div>

<div> </div>

And they are both nested inside of this box

62 of 226

<div> </div>

<div> </div>

<div> </div>

<div> </div>

63 of 226

<div> </div>

<div> </div>

<div> </div>

<div> </div>

<div> </div>

64 of 226

<div> </div>

<div> </div>

<div> </div>

<div> </div>

<div> </div>

<div> </div>

65 of 226

<div> </div>

<div> </div>

<div> </div>

<div> </div>

<div> </div>

<div> </div>

66 of 226

<div> </div>

<div> </div>

<div> </div>

<div> </div>

<div> </div>

<div> </div>

This is a box. It doesn’t look like it has any other boxes nested inside of it.

67 of 226

<div> </div>

<div> </div>

<div> </div>

<div> </div>

<div> </div>

<div> </div>

<div> </div>

68 of 226

The CSS Box Model

Awesome! So we started with a very basic structure for the page: just three boxes (HTML <div> elements) stacked on top of each other vertically:

69 of 226

<div> </div>

<div> </div>

<div> </div>

70 of 226

The CSS Box Model

Awesome! So we started with a very basic structure for the page: just three boxes (HTML <div> elements) stacked on top of each other vertically.

​

Then we added in some additional boxes inside of those boxes:

71 of 226

<div> </div>

<div> </div>

<div> </div>

72 of 226

<div> </div>

<div> </div>

<div> </div>

<div> </div>

<div> </div>

<div> </div>

<div> </div>

73 of 226

The CSS Box Model

Awesome! So we started with a very basic structure for the page: just three boxes (HTML <div> elements) stacked on top of each other vertically.

​

Then we added in some additional boxes inside of those boxes.

​

This is how we should think about building our web pages: As a combination of boxes stacked next to or on top of other boxes. �That’s the CSS Box Model strategy of web page design!

74 of 226

The CSS Box Model

75 of 226

The CSS Box Model

There are four basic components �to each HTML <div> </div> element.

76 of 226

The CSS Box Model

There are four basic components �to each HTML <div> </div> element.

​

These components dictate the size and spacing �of HTML <div> </div> elements on the page:

77 of 226

The CSS Box Model

There are four basic components �to each HTML <div> </div> element.

​

These components dictate the size and spacing �of HTML <div> </div> elements on the page:

​

  • <div> The content inside the box (like words or images). </div>

78 of 226

The CSS Box Model

There are four basic components �to each HTML <div> </div> element.

​

These components dictate the size and spacing �of HTML <div> </div> elements on the page:

​

  • <div> The content inside the box (like words or images). </div>
  • padding: (empty space that we can add around the content)

79 of 226

The CSS Box Model

There are four basic components �to each HTML <div> </div> element.

​

These components dictate the size and spacing �of HTML <div> </div> elements on the page:

​

  • <div> The content inside the box (like words or images). </div>
  • padding: (empty space that we can add around the content)
  • border: (a visible stroke or line on the edges of the box)

80 of 226

The CSS Box Model

There are four basic components �to each HTML <div> </div> element.

​

These components dictate the size and spacing �of HTML <div> </div> elements on the page:

​

  • <div> The content inside the box (like words or images). </div>
  • padding: (empty space that we can add around the content)
  • border: (a visible stroke or line on the edges of the box)
  • margin: (empty space that we can add outside of the box)

81 of 226

Quick Review

Web Literacy, Syntax, Clients & Servers, File Naming Conventions, Folder Structure

DIVs

HTML <div> Elements, The CSS Box Model, �Content, padding, border, margin

HTML5 Semantic Tags

CSS Reset

CSS display Property

IDs, Classes, Pseudo-classes

​

82 of 226

Quick Review

Web Literacy, Syntax, Clients & Servers, File Naming Conventions, Folder Structure

DIVs

HTML <div> Elements, The CSS Box Model, �Content, padding, border, margin

HTML5 Semantic Tags

CSS Reset

CSS display Property

IDs, Classes, Pseudo-classes

​

83 of 226

​

Content, padding, border, margin

84 of 226

​

Content, padding, border, margin

Let’s declare some <div> </div> elements in our HTML.

85 of 226

​

Content, padding, border, margin

<div></div>

Let’s declare some <div> </div> elements in our HTML.

86 of 226

​

Content, padding, border, margin

<div></div>

Let’s declare some <div> </div> elements in our HTML. Then put some dummy “Lorem ipsum” text inside of them.

87 of 226

​

Content, padding, border, margin

<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</div>

Let’s declare some <div> </div> elements in our HTML. Then put some dummy “Lorem ipsum” text inside of them.

88 of 226

​

Content, padding, border, margin

<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</div>

Let’s declare some <div> </div> elements in our HTML. Then put some dummy “Lorem ipsum” text inside of them.

​

We know that these <div> elements should go between the <body> and </body> element tags, because that’s where all of the display content on the web page belongs.

89 of 226

​

Content, padding, border, margin

90 of 226

​

Content, padding, border, margin

div {

width: 150px;

margin: 40px;

border: 4px solid orange;

padding: 40px;

background-color: lime;

}

In a linked CSS stylesheet, let’s mess with some of the basic property declarations for the <div>, like width, margin, border, and padding.

​

Also give the <div> a background-color property declaration, to help see it on your page.

91 of 226

​

Content, padding, border, margin

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.

div {

width: 150px;

margin: 40px;

border: 4px solid orange;

padding: 40px;

background-color: lime;

}

92 of 226

​

Content, padding, border, margin

(margin-right)

(margin-top)

​

​

​

​

​

​

​

​

(margin-bottom)

​

(margin-left)

​

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.

div {

width: 150px;

margin: 40px;

border: 4px solid orange;

padding: 40px;

background-color: lime;

}

93 of 226

​

Content, padding, border, margin

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.

​

div {

width: 150px;

margin: 40px;

border: 4px solid orange;

padding: 40px;

background-color: lime;

}

(margin-top)

(border-top)

​

​

​

​

​

​

​

​

(border-bottom)

(margin-bottom)

​

(margin-right)

(border-right)

​

(margin-left)

(border-left)

​

94 of 226

​

Content, padding, border, margin

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.

div {

width: 150px;

margin: 40px;

border: 4px solid orange;

padding: 40px;

background-color: lime;

}

(margin-top)

(border-top)

(padding-top)

​

​

​

​

​

​

​

​

(padding-bottom)

(border-bottom)

(margin-bottom)

​

(margin-right)

(border-right)

(padding-right)

(margin-left)

(border-left)

(padding-left)

95 of 226

​

Content, padding, border, margin

96 of 226

​

Content, padding, border, margin

The CSS property declarations margin, border, �and padding are all shorthand declarations.

97 of 226

​

Content, padding, border, margin

So when we declare a property value to the shorthand declaration margin, the CSS actually applies the value to the longhand properties margin-top, margin-right, margin-bottom, and margin-left (in that order, like a clock, moving clockwise from the top position).

98 of 226

​

Content, padding, border, margin

So this CSS shorthand:

div {

margin: 40px;

}

99 of 226

​

Content, padding, border, margin

So this CSS shorthand: Is the same as this:

div {

margin-top: 40px;

margin-right: 40px;

margin-bottom: 40px;

margin-left: 40px;

}

div {

margin: 40px;

}

100 of 226

​

Content, padding, border, margin

And when we declare a property value to the shorthand declaration padding, the CSS actually applies the value to the longhand properties padding-top, padding-right, padding-bottom, and padding-left.

101 of 226

​

Content, padding, border, margin

So this CSS shorthand:

div {

padding: 40px;

}

102 of 226

​

Content, padding, border, margin

So this CSS shorthand: Is the same as this:

div {

padding-top: 40px;

padding-right: 40px;

padding-bottom: 40px;

padding-left: 40px;

}

div {

padding: 40px;

}

103 of 226

​

Content, padding, border, margin

And when we declare a property value to the shorthand declaration border, the CSS actually applies the value to the longhand properties border-width, border-style, and border-color.

104 of 226

​

Content, padding, border, margin

So this CSS shorthand:

div {

border: 4px solid orange;

}

105 of 226

​

Content, padding, border, margin

So this CSS shorthand: Is the same as this:

div {

border-width: 4px;

border-style: solid;

border-color: orange;

}

div {

border: 4px solid orange;

}

106 of 226

​

Content, padding, border, margin

To save ourselves time, it makes sense to try to use shorthand CSS declarations as often as possible.

​

We might choose to use longhand CSS declarations if we want our <div> elements to have different values on different sides of the box.

107 of 226

​

Content, padding, border, margin

div {

margin-top: 80px;

margin-bottom: 80px;

border: 4px solid orange;

border-top: 4px dashed cyan;

padding-left: 20px;

padding-right: 40px;

background-color: lime;

}

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco

108 of 226

Content, padding, border, margin

div {

margin-top: 80px;

margin-bottom: 80px;

border: 4px solid orange;

border-top: 4px dashed cyan;

padding-left: 20px;

padding-right: 40px;

background-color: lime;

}

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco

(padding-left)

(padding-right)

​

(margin-top)

​

(border-top)

​

​

​

​

​

​

(border-bottom)

​

(margin-bottom)

​

109 of 226

​

Content, padding, border, margin

110 of 226

​

Content, padding, border, margin

Because all <div> </div> elements are block-level elements, we can center a <div> </div> on the page by setting the margin-left: auto; and the margin-right: auto; in the linked CSS stylesheet.

111 of 226

​

Content, padding, border, margin

Centering DIVs using auto margins:

div {

margin: auto;

border: 4px solid orange;

padding: 40px;

background-color: lime;

}

112 of 226

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco…

113 of 226

Quick Review

Web Literacy, Syntax, Clients & Servers, File Naming Conventions, Folder Structure

DIVs

HTML <div> Elements, The CSS Box Model, �Content, padding, border, margin

HTML5 Semantic Tags

CSS Reset

CSS display Property

IDs, Classes, Pseudo-classes

​

114 of 226

Quick Review

Web Literacy, Syntax, Clients & Servers, File Naming Conventions, Folder Structure

DIVs

HTML <div> Elements, The CSS Box Model, �Content, padding, border, margin

HTML5 Semantic Tags

CSS Reset

CSS display Property

IDs, Classes, Pseudo-classes

​

115 of 226

HTML5 Semantic Element Tags

116 of 226

HTML5 Semantic Element Tags

Semantic elements are just like the division element <div> </div>, but semantic elements clearly describe their meaning for both humans and computers.

117 of 226

HTML5 Semantic Element Tags

Semantic elements are just like the division element <div> </div>, but semantic elements clearly describe their meaning for both humans and computers.

​

<div> is non-semantic, a blank, meaningless element. BAD!!!!!

118 of 226

HTML5 Semantic Element Tags

Semantic elements are just like the division element <div> </div>, but semantic elements clearly describe their meaning for both humans and computers.

​

<div> is non-semantic, a blank, meaningless element. BAD!!!!!

​

<div id="header"> only has semantic meaning for humans. Computers can’t make sense of this, its meaning is illegible. BAD!!!

119 of 226

HTML5 Semantic Element Tags

Semantic elements are just like the division element <div> </div>, but semantic elements clearly describe their meaning for both humans and computers.

​

<div> is non-semantic, a blank, meaningless element. BAD!!!!!

​

<div id="header"> only has semantic meaning for humans. Computers can’t make sense of this, its meaning is illegible. BAD!!!

​

<header> is semantic for both humans and computers, which vastly improves legibility and SEO (Search Engine Optimization). GOOD!!!!!

120 of 226

HTML5 Semantic Element Tags

121 of 226

HTML5 Semantic Element Tags

So from now on, we should never use semantically meaningless <div> division elements ever again.

122 of 226

HTML5 Semantic Element Tags

So from now on, we should never use semantically meaningless <div> division elements ever again.

​

We should only use HTML5 Semantic Element Tags!

123 of 226

HTML5 Semantic Element Tags

<body>

<header> <h1></h1> <h2></h2> </header>

<nav> <ul> <li></li> </ul> </nav>

<main>

<section> <h3></h3>

<article>

<figure>

<figcaption></figcaption>

</figure>

</article>

</section>

</main>

<footer> </footer>

</body>

​

Like all display content, HTML5 Semantic Tags should always nest inside of the <body> tags

124 of 226

HTML5 Semantic Element Tags

<body>

<header> <h1></h1> <h2></h2> </header>

<nav> <ul> <li></li> </ul> </nav>

<main>

<section> <h3></h3>

<article>

<figure>

<figcaption></figcaption>

</figure>

</article>

</section>

</main>

<footer> </footer>

</body>

​

The <header> holds the headline information, it’s a container for introductory content

125 of 226

HTML5 Semantic Element Tags

<body>

<header> <h1></h1> <h2></h2> </header>

<nav> <ul> <li></li> </ul> </nav>

<main>

<section> <h3></h3>

<article>

<figure>

<figcaption></figcaption>

</figure>

</article>

</section>

</main>

<footer> </footer>

</body>

​

The <nav> is for a group of navigation links in ordered <ol> or unordered <ul> lists and list items <li>

126 of 226

HTML5 Semantic Element Tags

<body>

<header> <h1></h1> <h2></h2> </header>

<nav> <ul> <li></li> </ul> </nav>

<main>

<section> <h3></h3>

<article>

<figure>

<figcaption></figcaption>

</figure>

</article>

</section>

</main>

<footer> </footer>

</body>

​

The <main> tag should hold on to unique content for the page, so elements such as <header> and <nav> (which are usually repeated across many pages) are not part of the <main> tag

127 of 226

HTML5 Semantic Element Tags

<body>

<header> <h1></h1> <h2></h2> </header>

<nav> <ul> <li></li> </ul> </nav>

<main>

<section> <h3></h3>

<article>

<figure>

<figcaption></figcaption>

</figure>

</article>

</section>

</main>

<footer> </footer>

</body>

​

The <section> tag marks a thematic grouping of content, typically with a heading like the <h3> tag

128 of 226

HTML5 Semantic Element Tags

<body>

<header> <h1></h1> <h2></h2> </header>

<nav> <ul> <li></li> </ul> </nav>

<main>

<section> <h3></h3>

<article> <h4></h4>

<figure>

<figcaption></figcaption>

</figure>

</article>

</section>

</main>

<footer> </footer>

</body>

​

The <article> tag is for self-contained body content. This content should make sense on its own, and it should be possible to read it independent of the rest of the website

129 of 226

HTML5 Semantic Element Tags

<body>

<header> <h1></h1> <h2></h2> </header>

<nav> <ul> <li></li> </ul> </nav>

<main>

<section> <h3></h3>

<article> <h4></h4>

<figure>

<figcaption></figcaption>

</figure>

</article>

</section>

</main>

<footer> </footer>

</body>

​

The <figure> tag is for visuals, imagery, photography, video, etc.

130 of 226

HTML5 Semantic Element Tags

<body>

<header> <h1></h1> <h2></h2> </header>

<nav> <ul> <li></li> </ul> </nav>

<main>

<section> <h3></h3>

<article> <h4></h4>

<figure>

<figcaption> </figcaption>

</figure>

</article>

</section>

</main>

<footer> </footer>

</body>

​

The <figcaption> tag is for captions that explain the <figure>, a caption or credit for the imagery

131 of 226

HTML5 Semantic Element Tags

<body>

<header> <h1></h1> <h2></h2> </header>

<nav> <ul> <li></li> </ul> </nav>

<main>

<section> <h3></h3>

<article> <h4></h4>

<figure>

<figcaption> </figcaption>

</figure>

</article>

</section>

</main>

<footer> </footer>

</body>

​

The <footer> tag is for copyright information, terms of use, contact information, social media links, email list sign-up, etc.

132 of 226

HTML5 Semantic Element Tags

<body>

<header> <h1></h1> <h2></h2> </header>

<nav> <ul> <li></li> </ul> </nav>

<main>

<section> <h3></h3>

<article> <h4></h4>

<figure>

<figcaption> </figcaption>

</figure>

</article>

</section>

</main>

<footer> </footer>

</body>

133 of 226

HTML5 Semantic Element Tags

The Semantic Web

134 of 226

HTML5 Semantic Element Tags

The Semantic Web

​

The Semantic Web provides a common framework �that allows data to be shared and reused across �application, enterprise, and community boundaries.

(https://www.w3.org/2001/sw/)

135 of 226

Quick Review

Web Literacy, Syntax, Clients & Servers, File Naming Conventions, Folder Structure

DIVs

HTML <div> Elements, The CSS Box Model, �Content, padding, border, margin

HTML5 Semantic Tags

CSS Reset

CSS display Property

IDs, Classes, Pseudo-classes

​

136 of 226

Quick Review

Web Literacy, Syntax, Clients & Servers, File Naming Conventions, Folder Structure

DIVs

HTML <div> Elements, The CSS Box Model, �Content, padding, border, margin

HTML5 Semantic Tags

CSS Reset

CSS display Property

IDs, Classes, Pseudo-classes

​

137 of 226

CSS Reset

138 of 226

CSS Reset

We’ve noticed that the Internet browser introduces styles to elements, even when we haven’t specifically asked it to do so.

139 of 226

CSS Reset

For instance, the <h1> tag has a number of preset styles…

140 of 226

CSS Reset

For instance, the <h1> tag has a number of preset styles…

h1 {

font-size: 24pt;

font-family: "Times New Roman";

color: black;

}

141 of 226

CSS Reset

Almost every element on the page, including the <html> and <body> elements, have at least margin and padding values by default…

142 of 226

CSS Reset

Almost every element on the page, including the <html> and <body> elements, have at least margin and padding values by default…

div {

margin: 5px;

padding: 5px;

}

143 of 226

CSS Reset

If we want to reset those CSS presets, we have a selector that can apply declarations to every element on the page at once: the Universal Selector *

144 of 226

CSS Reset

If we want to reset those CSS presets, we have a selector that can apply declarations to every element on the page at once: the Universal Selector *

* {

margin: 0;

padding: 0;

}

145 of 226

CSS Reset

Here, we’ve used the Universal Selector to get rid of all of the preset margin and padding values of every element.

* {

margin: 0;

padding: 0;

}

146 of 226

CSS Reset

Since CSS applies styles to elements in the page-build order, we can always apply new style declarations to elements further on down the document.

147 of 226

CSS Reset

Since CSS applies styles to elements in the page-build order, we can always apply new style declarations to elements further on down the document.

* {

margin: 0;

padding: 0;

}

​

div {

margin: 0;

padding: 0;

}

148 of 226

CSS Reset

So here, even though the Universal Selector * is telling every element on the page to have no margin or padding, the rule set for div overrides that declaration.

* {

margin: 0;

padding: 0;

}

​

div {

margin: 25px;

padding: 40px;

}

149 of 226

CSS Reset

As with any CSS rule set, you can add as many declarations to your CSS reset as you like…

150 of 226

CSS Reset

A typical CSS Reset clears out the margins and padding and gets rid of numbers and bullet points for ordered and unordered lists.

151 of 226

CSS Reset

A typical CSS Reset clears out the margins and padding and gets rid of numbers and bullet points for ordered and unordered lists.

* {

margin: 0;

padding: 0;

list-style-type: none;

}

152 of 226

Quick Review

Web Literacy, Syntax, Clients & Servers, File Naming Conventions, Folder Structure

DIVs

HTML <div> Elements, The CSS Box Model, �Content, padding, border, margin

HTML5 Semantic Tags

CSS Reset

CSS display Property

IDs, Classes, Pseudo-classes

​

153 of 226

Quick Review

Web Literacy, Syntax, Clients & Servers, File Naming Conventions, Folder Structure

DIVs

HTML <div> Elements, The CSS Box Model, �Content, padding, border, margin

HTML5 Semantic Tags

CSS Reset

CSS display Property

IDs, Classes, Pseudo-classes

​

154 of 226

CSS display Property

155 of 226

CSS display Property

<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</div>

​

<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</div>

​

<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</div>

​

Let’s go ahead and declare a few more <div> </div> elements in our HTML with some dummy text so that we can see how the display: property affects how they behave in relationship to each other.

156 of 226

CSS display Property

We use the display: property as our primary tool �to control the layout of the <div> elements on our page.

157 of 226

CSS display Property

We use the display: property as our primary tool �to control the layout of the <div> elements on our page.

  • display: block; element starts on a new line, expands left and right to take up the full width available, nothing on the same line

158 of 226

CSS display Property

The <div> </div> element is a block-level element, so unless otherwise defined or nested, the element will expand and drop below other block-level elements.

159 of 226

CSS display Property

The <div> </div> element is a block-level element, so unless otherwise defined or nested, the element will expand and drop below other block-level elements.

​

<h1> </h1> is a block-level element

<ul> </ul> is a block-level element

<ol> </ol> is a block-level element

<li> </li> is a block-level element

<p> </p> is a block-level element

160 of 226

CSS display Property

div {

display: block;

width: 150px;

margin: 10px;

border: 4px solid orange;

padding: 40px;

background-color: lime;

}

161 of 226

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco…

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco…

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco…

162 of 226

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco…

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco…

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco…

​

Notice that the <div> </div> elements stack vertically when their display: property is set to block;

163 of 226

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco…

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco…

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco…

​

Notice that the <div> </div> elements stack vertically when their display: property is set to block;

​

This might seem a bit counterintuitive: Because there is plenty of empty space to the right of each element, we might expect them to stack horizontally.

164 of 226

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco…

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco…

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco…

​

Notice that the <div> </div> elements stack vertically when their display: property is set to block;

​

This might seem a bit counterintuitive: Because there is plenty of empty space to the right of each element, we might expect them to stack horizontally.

???

165 of 226

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco…

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco…

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco…

​

Notice that the <div> </div> elements stack vertically when their display: property is set to block;

​

This might seem a bit counterintuitive: Because there is plenty of empty space to the right of each element, we might expect them to stack horizontally.

???

???

166 of 226

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco…

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco…

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco…

​

Notice that the <div> </div> elements stack vertically when their display: property is set to block;

​

This might seem a bit counterintuitive: Because there is plenty of empty space to the right of each element, we might expect them to stack horizontally.

​

But the fact that they are set to block; forces them to stack vertically.

167 of 226

CSS display Property

We use the display: property as our primary tool �to control the layout of the <div> elements on our page.

  • display: block; element starts on a new line, expands left and right to take up the full width available, nothing on the same line

168 of 226

CSS display Property

We use the display: property as our primary tool �to control the layout of the <div> elements on our page.

  • display: block; element starts on a new line, expands left and right to take up the full width available, nothing on the same line
  • display: inline; element can exist on the same line with other inline elements, only takes up as much space as the content requires

169 of 226

CSS display Property

The <a> </a> element is an inline element, so unless otherwise defined or nested, the element will occupy only as much space as necessary to display the content, and other inline elements can sit on the same line.

170 of 226

CSS display Property

The <a> </a> element is an inline element, so unless otherwise defined or nested, the element will occupy only as much space as necessary to display the content, and other inline elements can sit on the same line.

​

<a> </a> is an inline element

<button> </button> is an inline element

<del> </del> is an inline element

<em> </em> is an inline element

<img> is an inline element

<input> is an inline element

<span> </span> is an inline element

<strong> </strong> is an inline element

171 of 226

CSS display Property

div {

display: inline;

width: 150px;

margin: 10px;

border: 4px solid orange;

padding: 40px;

background-color: lime;

}

172 of 226

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco…

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco…

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco…

173 of 226

Notice that <div> elements don’t really like having their display: changed to inline; because inline elements ignore width and height declarations, so things tend to start looking weird when we change block-level elements to inline;

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco…

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco…

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco…

174 of 226

CSS display Property

We use the display: property as our primary tool �to control the layout of the <div> elements on our page.

  • display: block; element starts on a new line, expands left and right to take up the full width available, nothing on the same line
  • display: inline; element can exist on the same line with other inline elements, only takes up as much space as the content requires

175 of 226

CSS display Property

We use the display: property as our primary tool �to control the layout of the <div> elements on our page.

  • display: block; element starts on a new line, expands left and right to take up the full width available, nothing on the same line
  • display: inline; element can exist on the same line with other inline elements, only takes up as much space as the content requires
  • display: inline-block; content within the element behaves like it’s in a block, but content flows around the element as if it were an inline element

176 of 226

CSS display Property

div {

display: inline-block;

width: 150px;

margin: 10px;

border: 4px solid orange;

padding: 40px;

background-color: lime;

}

177 of 226

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.

178 of 226

Great! So we see that setting the display: of our <div> </div> elements to inline-block; is a good way to get them to stack horizontally across the page.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.

179 of 226

Great! So we see that setting the display: of our <div> </div> elements to inline-block; is a good way to get them to stack horizontally across the page. Remember that this applies to any block-level elements that you might want to stack horizontally rather than vertically (for instance, the list items <li> </li> in a navigation interface)

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.

180 of 226

CSS display Property

We use the display: property as our primary tool �to control the layout of the <div> elements on our page.

  • display: block; element starts on a new line, expands left and right to take up the full width available, nothing on the same line
  • display: inline; element can exist on the same line with other inline elements, only takes up as much space as the content requires
  • display: inline-block; content within the element behaves like it’s in a block, but content flows around the element as if it were an inline element

181 of 226

CSS display Property

We use the display: property as our primary tool �to control the layout of the <div> elements on our page.

  • display: block; element starts on a new line, expands left and right to take up the full width available, nothing on the same line
  • display: inline; element can exist on the same line with other inline elements, only takes up as much space as the content requires
  • display: inline-block; content within the element behaves like it’s in a block, but content flows around the element as if it were an inline element
  • display: none; element will neither appear on the page, �nor affect page flow of other elements on the page

182 of 226

CSS display Property

div {

display: none;

width: 150px;

margin: 10px;

border: 4px solid orange;

padding: 40px;

background-color: lime;

}

183 of 226

184 of 226

We can’t see anything!

185 of 226

We can’t see anything! Changing the display: of our <div> </div> elements to none; just turns them off – they won’t display on the page and they won’t affect the position or layout of other elements.

186 of 226

We can’t see anything! Changing the display: of our <div> </div> elements to none; just turns them off – they won’t display on the page and they won’t affect the position or layout of other elements. This can be a helpful tool for prototyping and troubleshooting: Consider just turning some elements off using display: if something isn’t working properly on your page!

187 of 226

Quick Review

Web Literacy, Syntax, Clients & Servers, File Naming Conventions, Folder Structure

DIVs

HTML <div> Elements, The CSS Box Model, �Content, padding, border, margin

HTML5 Semantic Tags

CSS Reset

CSS display Property

IDs, Classes, Pseudo-classes

​

188 of 226

Quick Review

Web Literacy, Syntax, Clients & Servers, File Naming Conventions, Folder Structure

DIVs

HTML <div> Elements, The CSS Box Model, �Content, padding, border, margin

HTML5 Semantic Tags

CSS Reset

CSS display Property

IDs, Classes, Pseudo-classes

​

189 of 226

IDs & Classes

190 of 226

IDs & Classes

The id="____" and class="____" attributes are placed inside the opening <tag> of an HTML element.

​

191 of 226

IDs & Classes

The id="____" and class="____" attributes are placed inside the opening <tag> of an HTML element.

Just like other HTML attributes that we have already used (such as src="____" or href="____") these attributes modify the element that we apply them to.

​

192 of 226

IDs & Classes

The id="____" and class="____" attributes are placed inside the opening <tag> of an HTML element

Just like other HTML attributes that we have already used (such as src="____" or href="____") these attributes modify the element that we apply them to.

Attributes such as id="____" and class="____" are simply a tool to give us more control over the display of elements on the page.

​

193 of 226

IDs & Classes

194 of 226

IDs & Classes

​

Serial Numbers

​

​

​

​

​

id="____"

​

195 of 226

IDs & Classes

​

Serial Numbers vs.

​

​

​

​

​

id="____"

​

196 of 226

IDs & Classes

​

Serial Numbers vs. Barcodes

​

​

​

​

​

id="____" //class="____"

​

197 of 226

IDs & Classes

IDs are like serial numbers – use �them to refer to only one element.

198 of 226

IDs & Classes

IDs are like serial numbers – use �them to refer to only one element.

<h2>Section Two</h2>

​

​

Section One

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Section Two

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

​

​

199 of 226

IDs & Classes

IDs are like serial numbers – use �them to refer to only one element.

<h2 id="section-two">Section Two</h2>

​

h2#section-two {

margin-top: 10px;

border-top: 2px dashed red;

padding-top: 10px;

}

Section One

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

​

Section Two

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

​

​

200 of 226

IDs & Classes

201 of 226

IDs & Classes

202 of 226

IDs & Classes

Classes are like barcodes – use �them to refer to lots of elements.

203 of 226

IDs & Classes

Classes are like barcodes – use �them to refer to lots of elements.

<h4>Paragraph #1</h4>

…

<h4>Paragraph #2</h4>

…

<h4>Paragraph #3</h4>

​

​

Paragraph #1

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

​

Paragraph #2

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

​

Paragraph #3

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

204 of 226

IDs & Classes

Classes are like barcodes – use �them to refer to lots of elements.

<h4 class="magenta">Paragraph #1</h4>

…

<h4 class="magenta">Paragraph #2</h4>

…

<h4 class="magenta">Paragraph #3</h4>

​

​

Paragraph #1

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

​

Paragraph #2

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

​

Paragraph #3

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

205 of 226

IDs & Classes

Classes are like barcodes – use �them to refer to lots of elements.

<h4 class="magenta">Paragraph #1</h4>

…

<h4 class="magenta">Paragraph #2</h4>

…

<h4 class="magenta">Paragraph #3</h4>

​

​

.magenta {

color: magenta;

}

Paragraph #1

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

​

Paragraph #2

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

​

Paragraph #3

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

206 of 226

IDs & Classes

Also, unlike the id attribute, any HTML element can take lots of different class values in one attribute.

207 of 226

IDs & Classes

Also, unlike the id attribute, any HTML element can take lots of different class values in one attribute.

<h4 class="magenta">Paragraph #1</h4>

…

<h4 class="magenta">Paragraph #2</h4>

…

<h4 class="magenta">Paragraph #3</h4>

​

​

Paragraph #1

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

​

Paragraph #2

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

​

Paragraph #3

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

208 of 226

IDs & Classes

Also, unlike the id attribute, any HTML element can take lots of different class values in one attribute.

<h4 class="magenta underline capitalize">Paragraph #1</h4>

…

<h4 class="magenta">Paragraph #2</h4>

…

<h4 class="magenta">Paragraph #3</h4>

​

​

Paragraph #1

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

​

Paragraph #2

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

​

Paragraph #3

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

209 of 226

IDs & Classes

Also, unlike the id attribute, any HTML element can take lots of different class values in one attribute.

<h4 class="magenta underline capitalize">Paragraph #1</h4>

…

<h4 class="magenta">Paragraph #2</h4>

…

<h4 class="magenta">Paragraph #3</h4>

​

​

.magenta {

color: magenta;

}

.underline {

text-decoration: underline;

}

.capitalize {

text-transform: uppercase;

}

PARAGRAPH #1

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

​

Paragraph #2

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

​

Paragraph #3

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

210 of 226

Quick Review

Web Literacy, Syntax, Clients & Servers, File Naming Conventions, Folder Structure

DIVs

HTML <div> Elements, The CSS Box Model, �Content, padding, border, margin

HTML5 Semantic Tags

CSS Reset

CSS display Property

IDs, Classes, Pseudo-classes

​

211 of 226

Quick Review

Web Literacy, Syntax, Clients & Servers, File Naming Conventions, Folder Structure

DIVs

HTML <div> Elements, The CSS Box Model, �Content, padding, border, margin

HTML5 Semantic Tags

CSS Reset

CSS display Property

IDs, Classes, Pseudo-classes

​

212 of 226

CSS Pseudo-Classes

213 of 226

CSS Pseudo-Classes

Pseudo-classes are used to define a special state �of an element.

214 of 226

CSS Pseudo-Classes

Pseudo-classes are used to define a special state �of an element. Pseudo-classes give us richer control over user interactions.

215 of 226

CSS Pseudo-Classes

Pseudo-classes are used to define a special state �of an element. Pseudo-classes give us richer control over user interactions.

​

By default, only <a href="page.html"> anchor tag links </a> have pseudo-class styles, but we can apply pseudo-classes to any element on the page.

216 of 226

CSS Pseudo-Classes

​

a:link {

color: blue;

text-decoration: underline;

}

​

217 of 226

CSS Pseudo-Classes

Hi, I’m just a default anchor

218 of 226

CSS Pseudo-Classes

​

a:link { a:visited {

color: blue; color: purple;

text-decoration: underline; text-decoration: underline;

} }

​

219 of 226

CSS Pseudo-Classes

Hi, I’m just a default anchor

​

Hi, I’m a default visited anchor

220 of 226

CSS Pseudo-Classes

​

a:link { a:visited {

color: blue; color: purple;

text-decoration: underline; text-decoration: underline;

} }

​

a:hover {

color: blue;

text-decoration: underline;

}

​

221 of 226

CSS Pseudo-Classes

Hi, I’m just a default anchor

​

Hi, I’m a default visited anchor

​

Hi, I’m a default anchor during hover

222 of 226

CSS Pseudo-Classes

​

a:link { a:visited {

color: blue; color: purple;

text-decoration: underline; text-decoration: underline;

} }

​

a:hover { a:active {

color: blue; color: red;

text-decoration: underline; text-decoration: underline;

} }

​

223 of 226

CSS Pseudo-Classes

Hi, I’m just a default anchor

​

Hi, I’m a default visited anchor

​

Hi, I’m a default anchor during hover

​

Hi, I’m a default active anchor

224 of 226

Quick Review

Web Literacy, Syntax, Clients & Servers, File Naming Conventions, Folder Structure

DIVs

HTML <div> Elements, The CSS Box Model, �Content, padding, border, margin

HTML5 Semantic Tags

CSS Reset

CSS display Property

IDs, Classes, Pseudo-classes

​

225 of 226

Quick Review

Web Literacy, Syntax, Clients & Servers, File Naming Conventions, Folder Structure

DIVs

HTML <div> Elements, The CSS Box Model, �Content, padding, border, margin

HTML5 Semantic Tags

CSS Reset

CSS display Property

IDs, Classes, Pseudo-classes

​

226 of 226

Web Design is an open-source learning resource.

Class material developed by Ian Besler.�

Licensed under a Creative Commons�Attribution-NonCommercial-ShareAlike�4.0 International License.