CSS是前端開發中不可或缺的一部分，它可以讓我們美化頁面，達到更好的展示效果。下面讓我們通過一個花店demo來學習如何使用CSS。

html {
font-family: Arial, sans-serif;
}
header {
background-color: #f9f9f9;
}
h1 {
font-size: 2.5rem;
text-align: center;
padding: 2rem 0;
}
.main-container {
display: flex;
justify-content: center;
align-items: flex-start;
flex-wrap: wrap;
}
.card {
background-color: #fff;
border-radius: 0.3rem;
box-shadow: 0 0.2rem 0.4rem rgba(0, 0, 0, 0.2);
margin: 2rem;
overflow: hidden;
width: 30rem;
}
.card img {
height: 20rem;
width: 100%;
object-fit: cover;
}
.card h2 {
font-size: 1.8rem;
padding: 1rem;
}
.card p {
font-size: 1.2rem;
padding: 1rem;
}
.card button {
background-color: #FF88AA;
border: none;
color: #fff;
cursor: pointer;
font-size: 1.2rem;
padding: 1rem;
width: 100%;
}
.card button:hover {
background-color: #CC6688;
}

首先，我們在HTML中使用了一個header元素來放置網站的標題和導航。在CSS中，我們對header元素進行了樣式設置，使其擁有了淺色背景和居中的標題。

接著，在主容器(main-container)中，我們使用了flex布局來排列卡片的位置。然后對每個卡片(card)的背景色、圓角、陰影進行了設定。在卡片中我們用了一個img元素來展示花卉的圖片。為了讓圖片更好的展示，我們使用了object-fit屬性來調整圖片的大小。而對于卡片中的文字，我們設置了標題(h2)和正文(p)的字號和內邊距(padding)。最后，為了能夠讓用戶購買花卉，我們在卡片中加入了一個按鈕(button)。

綜上所述，在使用CSS設計花店demo中，我們需要了解基本的布局和樣式設置。通過本篇文章的代碼示例，你可以學習到如何使用CSS來裝扮你的網站。