SE371 · Chapter 3 · Annotated SlidesCSS
Original
Overview

CSS

CSS syntax and values, where styles go (inline, embedded, external), selectors (element, class, id, attribute, pseudo-class/element, contextual), the cascade (inheritance, specificity, location), block and inline elements, the box model, text styling, CSS variables, tables and forms, then Flexbox, Grid, and responsive design with viewports and media queries.

How to read this page

Every original slide is shown unchanged. Yellow marks on a slide point to a numbered note: hover or tap a mark to jump to its note, and hover a note to see its marks. Questions tagged Past exam appeared on a real paper; Prediction questions are likely angles, not confirmed. Pick an answer to each question: a wrong pick tells you why it is wrong, so you can try again.

All 85 slides
  1. 1 Fundamentals of Web Development
  2. 2 What Is CSS?
  3. 3 Benefits of CSS
  4. 4 CSS Syntax
  5. 5 CSS Syntax: Values
  6. 6 Color Values
  7. 7 Common Units of Measure Values
  8. 8 Location of Styles
  9. 9 Inline Styles
  10. 10 Embedded Style Sheet
  11. 11 External Style Sheet
  12. 12 Selectors
  13. 13 Element Selectors
  14. 14 Class and ID Selectors
  15. 15 Class and ID Selector Example
  16. 16 Attribute Selectors
  17. 17 Attribute Selectors
  18. 18 Attribute Selector Example
  19. 19 Pseudo-Element and Pseudo-Class Selectors
  20. 20 Common Pseudo-Class and Pseudo-Element Selectors
  21. 21 Styling a link using pseudo-class selectors
  22. 22 Syntax of a descendant selection
  23. 23 Task
  24. 24 Slide 24
  25. 25 Contextual Selectors
  26. 26 Contextual selectors in action
  27. 27 NEW! Nested CSS rules
  28. 28 The Cascade: How Styles Interact
  29. 29 The Cascade: Inheritance
  30. 30 The Cascade: Specificity
  31. 31 Simplified Specificity algorithm
  32. 32 The Cascade: Location
  33. 33 Block Elements
  34. 34 Inline Elements
  35. 35 Inline Element Example
  36. 36 Block and inline elements together
  37. 37 Margins and Padding
  38. 38 The Box Model
  39. 39 Box Model: All or one
  40. 40 Box Dimensions
  41. 41 Overflow Property
  42. 42 Box sizing via percent
  43. 43 CSS Text Styling
  44. 44 Font Family
  45. 45 Different font families
  46. 46 @import a font available online
  47. 47 Slide 47
  48. 48 Font Sizes
  49. 49 Font Weight
  50. 50 Text properties
  51. 51 CSS Variables
  52. 52 Example Part 1 (duplicate values)
  53. 53 Example Part 2 (CSS variables)
  54. 54 Styling Tables (Borders)
  55. 55 Styling table borders
  56. 56 Boxes and Zebras
  57. 57 Boxes and Zebras (ii)
  58. 58 Styling Form Elements
  59. 59 Working with labels
  60. 60 Form Design
  61. 61 Fundamentals of Web Development
  62. 62 In this chapter you will learn . . .
  63. 63 Flexbox Layout (for 1D layouts)
  64. 64 Flex containers and items
  65. 65 The flexbox container properties
  66. 66 The flexbox container properties (ii)
  67. 67 The flexbox item (child) properties
  68. 68 Grid Layout (for 2D layouts)
  69. 69 Specifying Grid Structure
  70. 70 Specifying column widths
  71. 71 Specifying column widths (ii)
  72. 72 Explicit Grid Placement Example 1
  73. 73 Explicit Grid Placement Example 2
  74. 74 Cell properties
  75. 75 Nested Grid
  76. 76 Grid Named Areas
  77. 77 Grid Areas (ii)
  78. 78 Grid and Flexbox Together
  79. 79 Responsive Design
  80. 80 Viewports
  81. 81 Setting Viewports
  82. 82 Media Queries
  83. 83 Media queries in action
  84. 84 The <picture> element
  85. 85 Supporting Material
Slide 1 / 85

Fundamentals of Web Development

Slide 1: Fundamentals of Web Development
Slide 2 / 85

What Is CSS?

Slide 2: What Is CSS?
Slide 3 / 85

Benefits of CSS

Slide 3: Benefits of CSS
Slide 4 / 85

CSS Syntax

Slide 4: CSS Syntax
Slide 5 / 85

CSS Syntax: Values

Slide 5: CSS Syntax: Values
Slide 6 / 85

Color Values

Slide 6: Color Values
Slide 7 / 85

Common Units of Measure Values

Slide 7: Common Units of Measure Values
Slide 8 / 85

Location of Styles

Slide 8: Location of Styles

Notes

  1. Locations: inline (style attribute), embedded (<style> in head), external (.css file via <link>). External is best for reuse.

Slide 9 / 85

Inline Styles

Slide 9: Inline Styles
Slide 10 / 85

Embedded Style Sheet

Slide 10: Embedded Style Sheet
Slide 11 / 85

External Style Sheet

Slide 11: External Style Sheet
Slide 12 / 85

Selectors

Slide 12: Selectors
Slide 13 / 85

Element Selectors

Slide 13: Element Selectors
Slide 14 / 85

Class and ID Selectors

Slide 14: Class and ID Selectors

Exam angle

PredictionQ1

Which selector targets the element with id="main"?

Slide 15 / 85

Class and ID Selector Example

Slide 15: Class and ID Selector Example
Slide 16 / 85

Attribute Selectors

Slide 16: Attribute Selectors
Slide 17 / 85

Attribute Selectors

Slide 17: Attribute Selectors
Slide 18 / 85

Attribute Selector Example

Slide 18: Attribute Selector Example
Slide 19 / 85

Pseudo-Element and Pseudo-Class Selectors

Slide 19: Pseudo-Element and Pseudo-Class Selectors

Notes

  1. Pseudo-classes describe a state (:hover, :visited, :first-child); pseudo-elements a part (::first-line, ::before).

Slide 20 / 85

Common Pseudo-Class and Pseudo-Element Selectors

Slide 20: Common Pseudo-Class and Pseudo-Element Selectors
Slide 21 / 85

Styling a link using pseudo-class selectors

Slide 21: Styling a link using pseudo-class selectors
Slide 22 / 85

Syntax of a descendant selection

Slide 22: Syntax of a descendant selection
Slide 23 / 85

Task

Slide 23: Task
Slide 24 / 85

Slide 24

Slide 24: Slide 24
Slide 25 / 85

Contextual Selectors

Slide 25: Contextual Selectors

Exam angle

PredictionQ1

"ul > li" selects:

Slide 26 / 85

Contextual selectors in action

Slide 26: Contextual selectors in action
Slide 27 / 85

NEW! Nested CSS rules

Slide 27: NEW! Nested CSS rules
Slide 28 / 85

The Cascade: How Styles Interact

Slide 28: The Cascade: How Styles Interact

Notes

  1. The cascade resolves conflicts by inheritance, specificity, then location (later rules win).

Slide 29 / 85

The Cascade: Inheritance

Slide 29: The Cascade: Inheritance
Slide 30 / 85

The Cascade: Specificity

Slide 30: The Cascade: Specificity

Notes

  1. Specificity: inline style > id > class/attribute/pseudo-class > element. !important overrides.

  2. Memory trick Count (ids, classes, elements): #nav .item a = (1, 1, 1) beats .nav .item a = (0, 2, 1).

Exam angle

PredictionQ1

Which wins: "#title { color: red }" or ".heading { color: blue }" on the same element?

Slide 31 / 85

Simplified Specificity algorithm

Slide 31: Simplified Specificity algorithm
Slide 32 / 85

The Cascade: Location

Slide 32: The Cascade: Location
Slide 33 / 85

Block Elements

Slide 33: Block Elements

Notes

  1. Block elements start on a new line and fill the width (div, p, h1). Inline elements flow within text (span, a, img).

Slide 34 / 85

Inline Elements

Slide 34: Inline Elements
Slide 35 / 85

Inline Element Example

Slide 35: Inline Element Example
Slide 36 / 85

Block and inline elements together

Slide 36: Block and inline elements together
Slide 37 / 85

Margins and Padding

Slide 37: Margins and Padding
Slide 38 / 85

The Box Model

Slide 38: The Box Model

Notes

  1. Box model: content → padding → border → margin. With box-sizing: content-box, width excludes padding and border; border-box includes them.

Exam angle

PredictionQ1

width: 200px; padding: 10px; border: 5px; (content-box). Total rendered width:

Slide 39 / 85

Box Model: All or one

Slide 39: Box Model: All or one
Slide 40 / 85

Box Dimensions

Slide 40: Box Dimensions
Slide 41 / 85

Overflow Property

Slide 41: Overflow Property
Slide 42 / 85

Box sizing via percent

Slide 42: Box sizing via percent
Slide 43 / 85

CSS Text Styling

Slide 43: CSS Text Styling
Slide 44 / 85

Font Family

Slide 44: Font Family
Slide 45 / 85

Different font families

Slide 45: Different font families
Slide 46 / 85

@import a font available online

Slide 46: @import a font available online
Slide 47 / 85

Slide 47

Slide 47: Slide 47
Slide 48 / 85

Font Sizes

Slide 48: Font Sizes
Slide 49 / 85

Font Weight

Slide 49: Font Weight
Slide 50 / 85

Text properties

Slide 50: Text properties
Slide 51 / 85

CSS Variables

Slide 51: CSS Variables
Slide 52 / 85

Example Part 1 (duplicate values)

Slide 52: Example Part 1 (duplicate values)
Slide 53 / 85

Example Part 2 (CSS variables)

Slide 53: Example Part 2 (CSS variables)
Slide 54 / 85

Styling Tables (Borders)

Slide 54: Styling Tables (Borders)
Slide 55 / 85

Styling table borders

Slide 55: Styling table borders
Slide 56 / 85

Boxes and Zebras

Slide 56: Boxes and Zebras
Slide 57 / 85

Boxes and Zebras (ii)

Slide 57: Boxes and Zebras (ii)
Slide 58 / 85

Styling Form Elements

Slide 58: Styling Form Elements
Slide 59 / 85

Working with labels

Slide 59: Working with labels
Slide 60 / 85

Form Design

Slide 60: Form Design
Slide 61 / 85

Fundamentals of Web Development

Slide 61: Fundamentals of Web Development
Slide 62 / 85

In this chapter you will learn . . .

Slide 62: In this chapter you will learn . . .
Slide 63 / 85

Flexbox Layout (for 1D layouts)

Slide 63: Flexbox Layout (for 1D layouts)

Notes

  1. Flexbox: ONE-dimensional layout (a row or a column). Container: display: flex; justify-content (main axis), align-items (cross axis), flex-wrap, flex-direction.

Exam angle

PredictionQ1

In a flex row, which property aligns items horizontally along the main axis?

Slide 64 / 85

Flex containers and items

Slide 64: Flex containers and items
Slide 65 / 85

The flexbox container properties

Slide 65: The flexbox container properties
Slide 66 / 85

The flexbox container properties (ii)

Slide 66: The flexbox container properties (ii)
Slide 67 / 85

The flexbox item (child) properties

Slide 67: The flexbox item (child) properties
Slide 68 / 85

Grid Layout (for 2D layouts)

Slide 68: Grid Layout (for 2D layouts)

Notes

  1. Grid: TWO-dimensional layout. grid-template-columns: 1fr 2fr; grid-column / grid-row placement; named areas.

  2. Memory trick Flexbox = 1D (row OR column). Grid = 2D (rows AND columns).

Slide 69 / 85

Specifying Grid Structure

Slide 69: Specifying Grid Structure
Slide 70 / 85

Specifying column widths

Slide 70: Specifying column widths
Slide 71 / 85

Specifying column widths (ii)

Slide 71: Specifying column widths (ii)
Slide 72 / 85

Explicit Grid Placement Example 1

Slide 72: Explicit Grid Placement Example 1
Slide 73 / 85

Explicit Grid Placement Example 2

Slide 73: Explicit Grid Placement Example 2
Slide 74 / 85

Cell properties

Slide 74: Cell properties
Slide 75 / 85

Nested Grid

Slide 75: Nested Grid
Slide 76 / 85

Grid Named Areas

Slide 76: Grid Named Areas
Slide 77 / 85

Grid Areas (ii)

Slide 77: Grid Areas (ii)
Slide 78 / 85

Grid and Flexbox Together

Slide 78: Grid and Flexbox Together
Slide 79 / 85

Responsive Design

Slide 79: Responsive Design

Notes

  1. Responsive design: layouts that adapt to screen size: fluid grids, flexible images, media queries.

Slide 80 / 85

Viewports

Slide 80: Viewports
Slide 81 / 85

Setting Viewports

Slide 81: Setting Viewports

Notes

  1. <meta name="viewport" content="width=device-width, initial-scale=1"> stops mobile browsers from zooming out a desktop layout.

Slide 82 / 85

Media Queries

Slide 82: Media Queries

Notes

  1. @media (max-width: 600px) { … } applies rules only when the condition is true.

Exam angle

PredictionQ1

Which applies styles only on screens 600px wide or less?

Slide 83 / 85

Media queries in action

Slide 83: Media queries in action
Slide 84 / 85

The <picture> element

Slide 84: The <picture> element
Slide 85 / 85

Supporting Material

Slide 85: Supporting Material