1. Web pages are often designed to accommodate [different device、different screen] so that to decide how to display and even what to dispaly.

  2. Users experience webpages differently, some users are color-blind, some can’t see well, some have trouble hearing, some can’t clicking, etc…

So to ensure GoodUserExperience:

web-designers must take [users & devices] into account when creating webpages.

and webpages should load quickly.

CSS: Cascading Style Sheets

[HTML specifies the content | CSS specifies the look and formating] of webpages.

This allows web-designers to separate the content from how it’s presented, which can accommodate different users and different display devices to make sure that even in other countries, these can be displayed without changing the content of the webpage.

And if you’re creating thousands of webpages for a website, changing the color or font or the size of an HTML element can be localized in one place, rather than repeated in a thousand places which would make changes difficult. This is called [Maintainability] in response to changing design requirments & [Reusability] across multiple elements or even multiple webpages.

CSS Basics

1
You could include CSS by either using <style> or <link> tag which are go in the <head> portion of you HTML.
  • Selector
    • tag_name
    • class
    • id
    • combinators: select by relationship(eg: style <li> inside of <ul>: ul li { ... })

Note: You should make name descriptive.(eg: foodLi => can means food-list-items)

https://developer.mozilla.org/en-US/docs/Web/CSS/Reference

Q&A:

  1. whats-the-difference-between-an-id-and-a-class

  2. what-error-will-i-get-if-i-use-the-same-id-for-multiple-html-elements

Colors

https://www.w3.org/TR/2022/REC-css-color-3-20220118/

140 standard color names.

An important concept: Everything is a number for a computer.

Red + Green + Blue, 0-255, => can specify about 16 million colors. => more than humans can distinguish.

eg: Gold == rgb(255, 215, 0)

because of that 0-255 is 256 possible colors, which can be presented by 两个十六进制的数字

FF == 15 * 16 + 15 == 255

D7 == 13 * 16 + 7 == 215

00 == 0 * 16 + 0 == 0

so, Gold == #FFD700

https://developer.mozilla.org/en-US/docs/Web/CSS/Tools/ColorPicker_Tool