1 of 76

Web Design

Lecture & Discussion:

CSS Page Composition

​

2 of 76

Quick Review

HTML <div> Elements, CSS Box Model, margin, border, padding, Content, CSS Reset, CSS display property, HTML5 Semantic Tags, IDs, Classes, and Pseudo-classes

CSS Page Composition

CSS Dimensions �CSS float property

CSS position property �CSS border-radius property

3 of 76

Quick Review

HTML <div> Elements, CSS Box Model, margin, border, padding, Content, CSS Reset, CSS display property, HTML5 Semantic Tags, IDs, Classes, and Pseudo-classes

CSS Page Composition

CSS Dimensions �CSS float property

CSS position property �CSS border-radius property

4 of 76

Quick Review

HTML <div> Elements, CSS Box Model, margin, border, padding, Content, CSS Reset, CSS display property, HTML5 Semantic Tags, IDs, Classes, and Pseudo-classes

CSS Page Composition

CSS Dimensions �CSS float property

CSS position property �CSS border-radius property

5 of 76

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)

6 of 76

Quick Review

HTML <div> Elements, CSS Box Model, margin, border, padding, Content, CSS Reset, CSS display property, HTML5 Semantic Tags, IDs, Classes, and Pseudo-classes

CSS Page Composition

CSS Dimensions �CSS float property

CSS position property �CSS border-radius property

7 of 76

Quick Review

HTML <div> Elements, CSS Box Model, margin, border, padding, Content, CSS Reset, CSS display property, HTML5 Semantic Tags, IDs, Classes, and Pseudo-classes

CSS Page Composition

CSS Dimensions �CSS float property

CSS position property �CSS border-radius property

8 of 76

Margin, Border, Padding, Content

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)

9 of 76

Quick Review

HTML <div> Elements, CSS Box Model, margin, border, padding, Content, CSS Reset, CSS display property, HTML5 Semantic Tags, IDs, Classes, and Pseudo-classes

CSS Page Composition

CSS Dimensions �CSS float property

CSS position property �CSS border-radius property

10 of 76

Quick Review

HTML <div> Elements, CSS Box Model, margin, border, padding, Content, CSS Reset, CSS display property, HTML5 Semantic Tags, IDs, Classes, and Pseudo-classes

CSS Page Composition

CSS Dimensions �CSS float property

CSS position property �CSS border-radius property

11 of 76

CSS Reset

12 of 76

CSS Reset

Almost all HTML elements come with some margin and padding values automatically applied to them (usually about 5 pixels or so).

div {

margin: 5px;

padding: 5px;

}

13 of 76

CSS Reset

Rather than having to re-style every single element on the page individually (which would be very tedious and annoying), we can use CSS Reset.

div {

margin: 0;

padding: 0;

}

14 of 76

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;

}

15 of 76

Quick Review

HTML <div> Elements, CSS Box Model, margin, border, padding, Content, CSS Reset, CSS display property, HTML5 Semantic Tags, IDs, Classes, and Pseudo-classes

CSS Page Composition

CSS Dimensions �CSS float property

CSS position property �CSS border-radius property

16 of 76

Quick Review

HTML <div> Elements, CSS Box Model, margin, border, padding, Content, CSS Reset, CSS display property, HTML5 Semantic Tags, IDs, Classes, and Pseudo-classes

CSS Page Composition

CSS Dimensions �CSS float property

CSS position property �CSS border-radius property

17 of 76

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

18 of 76

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

<cite> </cite> is an inline element

<em> </em> is an inline element

<img> is an inline element

<strong> </strong> is an inline element

19 of 76

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

20 of 76

Quick Review

HTML <div> Elements, CSS Box Model, margin, border, padding, Content, CSS Reset, CSS display property, HTML5 Semantic Tags, IDs, Classes, and Pseudo-classes

CSS Page Composition

CSS Dimensions �CSS float property

CSS position property �CSS border-radius property

21 of 76

Quick Review

HTML <div> Elements, CSS Box Model, margin, border, padding, Content, CSS Reset, CSS display property, HTML5 Semantic Tags, IDs, Classes, and Pseudo-classes

CSS Page Composition

CSS Dimensions �CSS float property

CSS position property �CSS border-radius property

22 of 76

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!!!!!

23 of 76

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>

24 of 76

Quick Review

HTML <div> Elements, CSS Box Model, margin, border, padding, Content, CSS Reset, CSS display property, HTML5 Semantic Tags, IDs, Classes, and Pseudo-classes

CSS Page Composition

CSS Dimensions �CSS float property

CSS position property �CSS border-radius property

25 of 76

Quick Review

HTML <div> Elements, CSS Box Model, margin, border, padding, Content, CSS Reset, CSS display property, HTML5 Semantic Tags, IDs, Classes, and Pseudo-classes

CSS Page Composition

CSS Dimensions �CSS float property

CSS position property �CSS border-radius property

26 of 76

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.

​

​

27 of 76

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.

28 of 76

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.

29 of 76

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;

} }

​

30 of 76

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

31 of 76

Quick Review

HTML <div> Elements, CSS Box Model, margin, border, padding, Content, CSS Reset, CSS display property, HTML5 Semantic Tags, IDs, Classes, and Pseudo-classes

CSS Page Composition

CSS Dimensions �CSS float property

CSS position property �CSS border-radius property

32 of 76

Quick Review

HTML <div> Elements, CSS Box Model, margin, border, padding, Content, CSS Reset, CSS display property, HTML5 Semantic Tags, IDs, Classes, and Pseudo-classes

CSS Page Composition

CSS Dimensions �CSS float property

CSS position property �CSS border-radius property

33 of 76

Quick Review

HTML <div> Elements, CSS Box Model, margin, border, padding, Content, CSS Reset, CSS display property, HTML5 Semantic Tags, IDs, Classes, and Pseudo-classes

CSS Page Composition

CSS Dimensions �CSS float property

CSS position property �CSS border-radius property

34 of 76

CSS Page Composition

35 of 76

CSS Page Composition

CSS Dimensions

36 of 76

CSS Page Composition

CSS Dimensions (Fixed dimensions)

37 of 76

CSS Page Composition

CSS Dimensions (Fixed dimensions)

  • Pixels (10px)

Picture elements

​

​

38 of 76

CSS Page Composition

CSS Dimensions (Fixed dimensions)

  • Pixels (10px)

Picture elements

  • Points (12pt)

Typeface unit (1 pt = 1/72 inch)

​

​

39 of 76

CSS Page Composition

CSS Dimensions (Fixed dimensions)

  • Pixels (10px)

Picture elements

  • Points (12pt)

Typeface unit (1 pt = 1/72 inch)

  • Element font-size (10em)

Relative to the font-size of the parent element �(2em means 2 times the size of the current font)

​

​

40 of 76

CSS Page Composition

CSS Dimensions (Fixed dimensions)

  • Pixels (10px)

Picture elements

  • Points (12pt)

Typeface unit (1 pt = 1/72 inch)

  • Element font-size (10em)

Relative to the font-size of the parent element �(2em means 2 times the size of the current font)

  • Inches (10in)

​

​

41 of 76

CSS Page Composition

CSS Dimensions (Fixed dimensions)

  • Pixels (10px)

Picture elements

  • Points (12pt)

Typeface unit (1 pt = 1/72 inch)

  • Element font-size (10em)

Relative to the font-size of the parent element �(2em means 2 times the size of the current font)

  • Inches (10in)
  • Centimeters (10cm)

​

​

42 of 76

CSS Page Composition

CSS Dimensions

43 of 76

CSS Page Composition

CSS Dimensions (Flexible dimensions)

44 of 76

CSS Page Composition

CSS Dimensions (Flexible dimensions)

  • Percent (100%)

Percent of the parent element

​

45 of 76

CSS Page Composition

CSS Dimensions (Flexible dimensions)

  • Percent (100%)

Percent of the parent element

  • Viewport Width (100vw)

Percentage of the browser �window width

​

46 of 76

CSS Page Composition

CSS Dimensions (Flexible dimensions)

  • Percent (100%)

Percent of the parent element

  • Viewport Width (100vw)

Percentage of the browser �window width

  • Viewport Height (100vh)

Percentage of the browser �window height

​

47 of 76

Quick Review

HTML <div> Elements, CSS Box Model, margin, border, padding, Content, CSS Reset, CSS display property, HTML5 Semantic Tags, IDs, Classes, and Pseudo-classes

CSS Page Composition

CSS Dimensions �CSS float property

CSS position property �CSS border-radius property

48 of 76

Quick Review

HTML <div> Elements, CSS Box Model, margin, border, padding, Content, CSS Reset, CSS display property, HTML5 Semantic Tags, IDs, Classes, and Pseudo-classes

CSS Page Composition

CSS Dimensions �CSS float property

CSS position property �CSS border-radius property

49 of 76

CSS Page Composition

CSS float: Property

50 of 76

CSS Page Composition

CSS float: Property

Allows elements to stack horizontally�across the width of the page.

51 of 76

CSS Page Composition

CSS float: Property

52 of 76

CSS Page Composition

CSS float: Property

  • float: none; (default for DIVs)

Elements will not float or stack horizontally

53 of 76

CSS Page Composition

CSS float: Property

  • float: none; (default for DIVs)

Elements will not float or stack horizontally

  • float: left;

Elements stack horizontally from left to right

54 of 76

CSS Page Composition

CSS float: Property

  • float: none; (default for DIVs)

Elements will not float or stack horizontally

  • float: left;

Elements stack horizontally from left to right

  • float: right;

Elements stack horizontally from right to left

55 of 76

Quick Review

HTML <div> Elements, CSS Box Model, margin, border, padding, Content, CSS Reset, CSS display property, HTML5 Semantic Tags, IDs, Classes, and Pseudo-classes

CSS Page Composition

CSS Dimensions �CSS float property

CSS position property �CSS border-radius property

56 of 76

Quick Review

HTML <div> Elements, CSS Box Model, margin, border, padding, Content, CSS Reset, CSS display property, HTML5 Semantic Tags, IDs, Classes, and Pseudo-classes

CSS Page Composition

CSS Dimensions �CSS float property

CSS position property �CSS border-radius property

57 of 76

CSS Page Composition

CSS position Property

58 of 76

CSS Page Composition

CSS position Property

Determines how an element should behave in relation to its starting location on the page and the user’s scroll through the window

59 of 76

CSS Page Composition

CSS position Property

60 of 76

CSS Page Composition

CSS position Property

  • position: static; (default)

Element is positioned by the normal flow of elements on the page

61 of 76

CSS Page Composition

CSS position Property

  • position: static; (default)

Element is positioned by the normal flow of elements on the page

  • position: relative;

Element can be adjusted away from its normal position – using the CSS properties top, right, bottom, and left – otherwise it just goes with the page flow

62 of 76

CSS Page Composition

CSS position Property (continued)

63 of 76

CSS Page Composition

CSS position Property (continued)

  • position: absolute;

Element is positioned in relationship to just the page body

64 of 76

CSS Page Composition

CSS position Property (continued)

  • position: absolute;

Element is positioned in relationship to just the page body

  • position: fixed;

Element always stays in the same position, even while scrolling, �(as if you taped it to the glass of the user’s screen/viewport)

65 of 76

CSS Page Composition

CSS position Property (continued)

  • position: absolute;

Element is positioned in relationship to just the page body

  • position: fixed;

Element always stays in the same position, even while scrolling, �(as if you taped it to the glass of the user’s screen/viewport)

  • position: sticky;

Element will only scroll inside of its �parent element, but otherwise, it’s stuck.

66 of 76

Quick Review

HTML <div> Elements, CSS Box Model, margin, border, padding, Content, CSS Reset, CSS display property, HTML5 Semantic Tags, IDs, Classes, and Pseudo-classes

CSS Page Composition

CSS Dimensions �CSS float property

CSS position property �CSS border-radius property

67 of 76

Quick Review

HTML <div> Elements, CSS Box Model, margin, border, padding, Content, CSS Reset, CSS display property, HTML5 Semantic Tags, IDs, Classes, and Pseudo-classes

CSS Page Composition

CSS Dimensions �CSS float property

CSS position property �CSS border-radius property

68 of 76

CSS Page Composition

CSS border-radius: Property

Defines rounded-corners for an element, �or turns it into an ellipse/circle.

69 of 76

CSS Page Composition

CSS border-radius: Property

Defines rounded-corners for an element, �or turns it into an ellipse/circle.

0%

70 of 76

CSS Page Composition

CSS border-radius: Property

Defines rounded-corners for an element, �or turns it into an ellipse/circle.

0%

12%

71 of 76

CSS Page Composition

CSS border-radius: Property

Defines rounded-corners for an element, �or turns it into an ellipse/circle.

0%

24%

12%

72 of 76

CSS Page Composition

CSS border-radius: Property

Defines rounded-corners for an element, �or turns it into an ellipse/circle.

0%

24%

12%

36%

73 of 76

CSS Page Composition

CSS border-radius: Property

Defines rounded-corners for an element, �or turns it into an ellipse/circle.

0%

50%

24%

12%

36%

74 of 76

Quick Review

HTML <div> Elements, CSS Box Model, margin, border, padding, Content, CSS Reset, CSS display property, HTML5 Semantic Tags, IDs, Classes, and Pseudo-classes

CSS Page Composition

CSS Dimensions

CSS position property �CSS float property �CSS border-radius property

75 of 76

Quick Review

HTML <div> Elements, CSS Box Model, margin, border, padding, Content, CSS Reset, CSS display property, HTML5 Semantic Tags, IDs, Classes, and Pseudo-classes

CSS Page Composition

CSS Dimensions

CSS position property �CSS float property �CSS border-radius property

76 of 76

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.