CS571 @UW-Madison

CS571 is a course for basic UI/UX design and frontend programming by University of Wisconsin Madison. The course is completely open source for all cs students to learn globally.

The official website of this course is CS571, the latest version is for 2025 Spring.

You can find matching class videos and other materials in this website.

Json

Json(Javascript Object Notation) is basically a way to represent data in a hierarchy key-value pairs.

The first tutorial didn’t cover json in depth, I assume they will look in to json in the next few tutorials.

HTML

A good place to learn HTML is MDN Web Doc, this site covers all useful HTML components in detail.

This note will not cover html in basics, but will contain insights and interesting discoveries I found while learning.

Semantics and nesting elements

Sometimes we can place elements within other elements, this is called nesting, just like in programming we have nested loops.

this is me

1
<p>this is <strong>me</strong></p>

Using <strong> label we can emphasize the text in bold font.

However, if you learned html before, you may be confused that <b> label also turns the text into bold font. The main difference is the semantics.

In HTML, although pairs like <strong> and <b> have the same visual effect, they are not treated the same in screen readers or search engines.

  • the search engine may give more weight to <strong> but would treat <b> texts as normal texts.
  • the screen reader may read <strong> text with emphasis to help visually impaired users.

Same applies to label pairs like:

  • <em> vs <i>
  • <mark> vs <span style="background: yellow">
  • <code> vs <span style="font-family: monospace">
  • <blockquote> vs <div style="margin-left: 20px">
  • <abbr> vs just typing the abbreviation

These label pairs have the exact same visual representation but different semantics meaning, and will therefore be treated differently in browsers or assistive technologies.

CSS Units

It has always puzzled me how the units of measurement works in CSS, commonly seen units like px, %, vh, may have the same visual effect in a fixed window, but completely different size in another.

While learning CSS in CS571, I took some time to figure out the exact mechanism for such transformation.

Ref geek4geek

In general there are absolute units (that remain the same scale regardless of the window), and relative units. In order to make the page adaptable and scalable for new windows, we usually prefer the latter.

Absolute Units pxPixels — relative to screen (1px = 1 dot)
ptPoints — 1pt = 1/72 inch = 0.3527cm
inInches — 1in = 2.54cm = 96px
cmCentimeters — 1cm ≈ 37.8px
mmMillimeters — 10mm = 1cm
pcPicas — 1pc = 12pt = 4.233mm
Relative Units %Percentage — relative to parent element
emRelative to the font size of the element
remRelative to the root element's font size
vw1% of viewport width
vh1% of viewport height
vmin1% of the smaller of viewport width or height

CSS Selectors

  • By tag name (Type selector): targeted on all tags of certain type, like p
  • By Class name: targeted on elements with the designated class name(class= attribute), like .class
  • By ID: targeted on elements with the id= attribute(id is unique on each page), like #id
  • By tag name and attribute (attribute selector):
    • e.g. input[type="password"]{} is targeted on all <input> label that have type="password" attribute.
      1
      2
      element[attribute] { ... }           /* has attribute */
      element[attribute="value"] { ... }   /* exact value */
  • By Hierarchy (combinator):
    • Descendent:
      • header p {} only selects <p> within <header>.
      1
      2
      3
      4
      5
      6
      7
      <header>
        <p>This one is styled</p>
        <p>This one is ALSO styled</p>
        <div> 
          <p>This one is ALSO styled</p> 
        </div>
      </header>
    • Child:
      • header > p {} only selects the direct child <p> within <header>
      1
      2
      3
      4
      5
      6
      7
      <header>
        <p>This one is styled</p>
        <p>This one is ALSO styled</p>
        <div> 
          <p>This one is NOT styled</p> 
        </div>
      </header>
    • Adjacent sibling selector:
      • header + p {} only selects the first <p> in the <header>
      1
      2
      3
      4
      5
      6
      7
          <header>
        <p>This one is styled</p>
        <p>This one is NOT styled</p>
        <div> 
          <p>This one is NOT styled</p> 
        </div>
      </header>
  • Pseudo-class selector: selects and element at a special state(does not create a new element)
    • Uses : Likea:hover or p:n-th child
    • Think of it as: “apply this style when the element is in this condition.”
  • Pseudo-element selector: styles a special part of an element(pretends there is an actual box associated to the element)
    • Uses ::
    • Targets a portion of the content, like ::first-letter or ::first-line
    • Or creates a virtual box that you can insert content, like ::before or ::after

Grouping selectors

We can use , to group ANY type of selectors.

Like this : header p, a[href], className {}

But do note that grouping selectors is equivalent to writing them separately.

The Cascade algorithm

The Cascade algorithm decide which CSS rules actually applied when multiple rules taget at the same element. The “Cascade” is what the C in CSS stands for.

The priority of the CSS rules are as follows:

  • Origin and importance
  • Selector specificity
  • Order of appearance
  • Initial and inherited properties (default values)

Origin and importance

Origin:

The CSS declarations can come from different origin types: User-agent stylesheets, User stylesheets, Author stylesheets.

  • User-agent: Stylesheets can come from user-agents, or as we probably know them as browsers. These sheets set the default style for any document.
  • Author: Author stylesheets are the most commonly used ones, they are written by developers and can overwrite the browser’s default styles. This includes inline, internal and external CSS sheets.(as explained in HTML-how to introduce stylesheets to HTML)
  • User: The user or the reader of the browser can choose to make up their own styles by altering the browser’s profile folder.(like adding a custom.css). However, modern browsers are making this more difficult.

Importance

For developers of browsers or websites, we want some CSS properties to be consistent and make sure they are not overwritten. That’s where we use importance.

To use importance, we simply add !important behind the property:

1
2
3
a[href] {
color: blue !important;
}

Therefore, the order of power of the first step is:

User !important > Author !important > Author normal > User normal > Browser defaults

Selector Specificity

When different CSS selector aims at the same element, we prioritize the CSS declarations according to the specificity of the selectors.

Generally speaking, the priority level in descending order is:

  • Inline Styles
  • ID selectors
  • Classes/ attribute /pseudo-class selectors
  • Type/pseudo-element selectors

Source order

This is probably the simplest layer. Whatever CSS declaration comes last in the source code is applied.

In the source code, the browser first renders according to the default, which is the User-agent origin CSS we discussed earlier.
Then it reads the external and internal CSS in the file, like <link rel="stylesheet" href="styles.css"> and <style></style>
Following, it reads the inline CSS. And at last it applies the CSS in User origin stylesheets.