Lesson 2: CSS

這篇文章整理我在這個course的重點，並非教學文章。

CSS Selectors

1. Tags

p {
  color: red;
}

2. Classes

.brand {
    color: red;
}

3. Ids

#solo {
  color: purple;
}

Pseudo-classes

selector:pseudo-class {
  property: value;
}

Attributes

Multiple Selectors

h1, h2, h3, h4, h5, h6 {
  font-family: "Helvetica", "Arial", sans-serif;
}

Linking CSS

1. Inline

<p style="color: red;">I'm learning to code!</p>

2. Style Tag

<head>
  <style>
    p {
      color: red;
      font-size: 20px;
    }
  </style>
</head>

3. External Stylesheets

<link href="https://udacity.com/style.css" type="text/css" rel="stylesheet" />

Main CSS file

// at the top of your main CSS file

@import “./layout”;
@import “./images”;
@import “./blog-cards”;

Specificity

CSS selector的優先順序：

The Box Model

我們指定的是width和height，padding、border、margin都是向外加上去的。

See it with your own eyes

Wanna see every single "box" that makes up a page? Try putting this in the stylesheet temporarily:

* {
  border: 1px solid red !important;
}

Display and Positioning: Z-index

圖層概念

Without explicitly using z-index the last element written to the DOM (the last element you wrote in your code) will appear on top of all the others, and so on up the chain of your elements.

If more elements were involved we could use a wider range of values and the same rules would apply-- so that an element with z-index 100 would be displayed above an element with a z-index value of 99, and below.

#one {
  background: red;
  top: 100px;
  left: 150px;
  z-index:1;
}

#two {
  background: yellow;
  top: 80px;
  left: 100px;
  z-index: -1;
}

Absolute vs Relative Units

There’s a lot of units available, but the most common ones you’ll encounter are px (pixel) and em (pronounced like the letter m). The former is what you would intuitively call a pixel, regardless of whether the user has a retina display or not, and the latter is the current font size of the element in question.

Absolute

px
in
mm
cm

Many font sizes on the web for example, are set to somewhere between 12px-30px, A font size set to 16px will appear the same size no matter how big the screen.

Relative

% - percentage of something, such as screen width
em - A unit equivalent to the current font size - if 12px font, 2em would be 24px
vw - units of viewport width (essentially the browser’s rendering space). Each unit is 1/100th of width
vh - the same as above but for viewport height

The em unit is very useful for defining sizes relative to some base font. For example, if you set the font-size of body to 16px, you could then set other element’s font-size value relative to that 16px. Here’s what that could look like:

body {
 font-size: 16px;
}

#one {
  font-size: 1.5em
}

#two {
  font-size: 0.5em
}

Typography

Text alignment

p {
  text-align: left;
}

Other accepted values are right, center, or justify.

Underlined Text

Remove the default underline from all of our links

a {
  text-decoration: none;
}

Deleted Text

Line-through to strike out “deleted” text. But, remember that meaning should always be conveyed through HTML—not CSS. It’s better to use the <ins> and <del> elements instead of adding a line-through style to, say, an ordinary  element.

<p>My favorite color is <del>blue</del> <ins>red</ins>!</p>

ins = insert, del = delete

Line Height

行高、行間距

margin-top (or padding-top)
margin-bottom (or padding-bottom)
line-height

margin-top defines vertical space between separate paragraphs. The new line-height property determines the amount of space between lines in the same paragraph.

Fonts

Font Family

p.b {
  font-family: Arial, Helvetica, sans-serif;
}

Font Weight & Style

一種定義字強弱的方式，100 至 900之間。

“Black” usually means 900, “bold” is 700, “regular” is 400, etc.

但並非每種字體都支援所有的weight。

Each letter in every face is hand-crafted to ensure it provides a uniform flow to its text.

Emphasis & Importance

For emphasized (usually italics) words, use the  tag.

<p>
  We <em>have</em> to buy the latest version of the pet hair remover vacuum, the
  floor is covered with fur!
</p>

For important words, use the  tag. Don’t use  only to put some text in bold, but rather to give it more importance.

External Fonts

<head>
  <link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet">
</head>

In CSS:

.box{
  font-family: 'Montserrat', sans-serif;
}

Colors

Colors in CSS can be specified by the following methods:

Hexadecimal colors
RGB colors
Predefined/Cross-browser color names
RGBA colors
HSL colors
HSLA colors

Let's talk about the first 3 since those are the most common.

Hexadecimal Colors

A hexadecimal color is specified with: #RRGGBB, where the RR (red), GG (green) and BB (blue) hexadecimal integers specify the components of the color. All values must be between 00 and FF.

#p1 {
  background-color: #ff0000;
}

RGB Colors

Each parameter (red, green, and blue) defines the intensity of the color and can be an integer between 0 and 255 or a percentage value (from 0% to 100%).

#p1 {
  background-color: rgb(255, 0, 0);
}

#p2 {
  background-color: rgb(0%,0%,100%);
}

Predefined/Cross-browser Color Names

Additional Topics on CSS

Previous2. CSS, Website Layout, Website Components NextLesson 3: Flexbox

Last updated 5 years ago

Was this helpful?

Lesson 2: CSS

這篇文章整理我在這個course的重點，並非教學文章。

CSS Selectors

1. Tags

p {
  color: red;
}

2. Classes

.brand {
    color: red;
}

3. Ids

#solo {
  color: purple;
}

Pseudo-classes

selector:pseudo-class {
  property: value;
}

Attributes

Multiple Selectors

h1, h2, h3, h4, h5, h6 {
  font-family: "Helvetica", "Arial", sans-serif;
}

Linking CSS

1. Inline

<p style="color: red;">I'm learning to code!</p>

2. Style Tag

<head>
  <style>
    p {
      color: red;
      font-size: 20px;
    }
  </style>
</head>

3. External Stylesheets

<link href="https://udacity.com/style.css" type="text/css" rel="stylesheet" />

Main CSS file

// at the top of your main CSS file

@import “./layout”;
@import “./images”;
@import “./blog-cards”;

Specificity

CSS selector的優先順序：

The Box Model

我們指定的是width和height，padding、border、margin都是向外加上去的。

See it with your own eyes

Wanna see every single "box" that makes up a page? Try putting this in the stylesheet temporarily:

* {
  border: 1px solid red !important;
}

Display and Positioning: Z-index

圖層概念

Without explicitly using z-index the last element written to the DOM (the last element you wrote in your code) will appear on top of all the others, and so on up the chain of your elements.

#one {
  background: red;
  top: 100px;
  left: 150px;
  z-index:1;
}

#two {
  background: yellow;
  top: 80px;
  left: 100px;
  z-index: -1;
}

Absolute vs Relative Units

Absolute

px
in
mm
cm

Many font sizes on the web for example, are set to somewhere between 12px-30px, A font size set to 16px will appear the same size no matter how big the screen.

Relative

% - percentage of something, such as screen width
em - A unit equivalent to the current font size - if 12px font, 2em would be 24px
vw - units of viewport width (essentially the browser’s rendering space). Each unit is 1/100th of width
vh - the same as above but for viewport height

The viewport is the user's visible area of a web page.

body {
 font-size: 16px;
}

#one {
  font-size: 1.5em
}

#two {
  font-size: 0.5em
}

Typography

Text alignment

p {
  text-align: left;
}

Other accepted values are right, center, or justify.

Underlined Text

Remove the default underline from all of our links

a {
  text-decoration: none;
}

Deleted Text

<p>My favorite color is <del>blue</del> <ins>red</ins>!</p>

ins = insert, del = delete

Line Height

行高、行間距

margin-top (or padding-top)
margin-bottom (or padding-bottom)
line-height

margin-top defines vertical space between separate paragraphs. The new line-height property determines the amount of space between lines in the same paragraph.

Fonts

Font Family

p.b {
  font-family: Arial, Helvetica, sans-serif;
}

Font Weight & Style

一種定義字強弱的方式，100 至 900之間。

“Black” usually means 900, “bold” is 700, “regular” is 400, etc.

但並非每種字體都支援所有的weight。

Each letter in every face is hand-crafted to ensure it provides a uniform flow to its text.

Emphasis & Importance

For emphasized (usually italics) words, use the  tag.

<p>
  We <em>have</em> to buy the latest version of the pet hair remover vacuum, the
  floor is covered with fur!
</p>

For important words, use the  tag. Don’t use  only to put some text in bold, but rather to give it more importance.

External Fonts

One commonly used example is , which provides a great number of fonts free for use in web projects.

<head>
  <link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet">
</head>

In CSS:

.box{
  font-family: 'Montserrat', sans-serif;
}

Colors

Colors in CSS can be specified by the following methods:

Hexadecimal colors
RGB colors
Predefined/Cross-browser color names
RGBA colors
HSL colors
HSLA colors

Let's talk about the first 3 since those are the most common.

Hexadecimal Colors

A hexadecimal color is specified with: #RRGGBB, where the RR (red), GG (green) and BB (blue) hexadecimal integers specify the components of the color. All values must be between 00 and FF.

#p1 {
  background-color: #ff0000;
}

RGB Colors

Each parameter (red, green, and blue) defines the intensity of the color and can be an integer between 0 and 255 or a percentage value (from 0% to 100%).

#p1 {
  background-color: rgb(255, 0, 0);
}

#p2 {
  background-color: rgb(0%,0%,100%);
}

Predefined/Cross-browser Color Names

There's quite a few of these - check out to see more.

Additional Topics on CSS

For more information on CSS background images, see the .

For more information on CSS in general, you can see the excellent website .

Previous2. CSS, Website Layout, Website Components NextLesson 3: Flexbox

Last updated 5 years ago

Was this helpful?