如果說html是骨架，那CSS就像是外皮，
首先我們先在css資料夾下建立一個style.css，
然後在html檔的內加入下列，
就可以讓html導入在css資料夾下的CSS檔，為網頁提供樣式。

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

而在CSS內，我們就可以開始指定想要更改樣式的地方，
然後將樣式改變。

header{
    border: 1px solid black;
    height:50px;
}

這樣我們的header就會被黑色的框框圈住。
其中header我們稱之為selector（選擇器）
接著我們要用{}將declartion包起來，方便瀏覽器判讀，
declartion分為propeerty（屬性）和value(數值)，
以上面為例，我們將控制border，讓他為1px寬度的實線，顏色為黑色。
在寫完declartion後，加入**;做結尾，
才可再輸入下一個declartion。
最後一個declartion不加入;一樣有效果，但是容易出問題，
所以還是建議要加入;**。
第二個declartion則是高度50px的意思。

除了上述的指定方法，
我們還可以利用class或id來指定（通常是用class）
方法如下

.container{
    border: 1px solid black;
    height:50px;
}

這樣則會讓class name為container的標籤，
border為黑色1px的實線、高度為50px。

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

.header+.footer

**+**是「和」的意思，即是class name為header和footer的element都會受影響。

.sidebar~.sidebar

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

.header div

空格則是
.header底下的div全部受影響。

.header>div

**>**這是指.header 下一層的div，和上一個不同，只有子層會受影響。

最後
新手在開始寫CSS的時候
會有過於仔細的現象
例如

html樣式

<div class="container">
    <ul class="order-list">
            <li><a href="#"><img src="image/meal01" alt="meal01"></a></li>
            <li><a href="#"><img src="image/meal02" alt="meal02"></a></li>
            <li><a href="#"><img src="image/meal03" alt="meal03"></a></li>
            <li><a href="#"><img src="image/meal04" alt="meal04"></a></li>
            <li><a href="#"><img src="image/meal05" alt="meal05"></a></li>
        </ul>
</div>

CSS樣式

.container>.order-list>li>a>img{
    width:100%;
}

翻譯成中文就是
class name為container，下的class name為order-list，下的li,下的a，下的img
寬度為100%

這是我曾經犯過的錯
其實只要這樣寫即可

.order-list>a{
   width:100%; 
}

兩個寫法都會成功讓圖片寬度變成100%，
但是，第一種寫法會讓權重過高，
導致之後如果有其他地方也要更改樣式（例如製作響應式網頁時）
會無法更改樣式。