如果說html是人，css就是衣服。
俗話說:人要衣著，佛要金裝。
穿搭得宜，宅男都會變型男無誤。

首先我們先在css資料夾下建立一個style.css，
然後在html檔的內加入下列，
就可以讓html導入在css資料夾下的css檔，為網頁提供樣式。

  <link rel="stylesheet" href="css/style.css">

白話文:連結"stylesheet"屬性，在"css/style.css"路徑的css文件。
而在css內，我們就可以開始指定想要更改樣式的地方，
然後將樣式改變。

body{
  border:red 1px solid;
  height: 300px;
}

這樣我們的body就會被紅色的框框圈住。
其中body我們稱之為selector（選擇器）
接著我們要用{}將declartion包起來，方便瀏覽器判讀，
declartion分為propeerty（屬性）和value(數值)，
以上面為例，我們將控制border，讓他為1px寬度的實線，顏色為紅色。
在寫完declartion後，加入 ";"做結尾，
才可再輸入下一個declartion。
最後一個declartion不加入";"一樣有效果，但是容易出問題，
寫完後記得加入";"養成好習慣。很重要很重要很重要，所以說三次。
第二個declartion則是高度300px的意思。
除了上述的指定方法，

我們還可以利用class或id來指定（通常是用class）
方法如下:

.box{
   border:red 1px solid;
   height: 300px;
}

這樣則會讓class name為box的標籤，
border為紅色1px的實線、高度為300px。

#box{
   border:red 1px solid;
   height: 300px;
}

這樣則會讓id name為box的標籤，
border為紅色1px的實線、高度為300px。

我們還可以用一些特殊符號來指定想要的element。
例如：

.box p

class name為box的標籤下的p段落

.box,.list

class name為box和class name為list

.box~.box

**~**是指「下一個」，也就是說
當遇到第一個.sidebar不會有影響，只影響下一個.sidebar

善用css為網頁穿上衣服吧！