> For the complete documentation index, see [llms.txt](https://ayugioh2003.gitbook.io/free-code-camp-practice/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://ayugioh2003.gitbook.io/free-code-camp-practice/front-end-development-certification/html5-and-css/html5-and-css-01-10.md).

# HTML5 and CSS: 01-10

簡單的 html 元素介紹、css 選擇器

01 - Say Hello to HTML Element

```markup
<h1>Hello World</h1>
```

02 - Headline with the h2 Element

```markup
<h1>Hello World</h1>
<h2>CatPhotoApp</h2>
```

03 - Inform with the Paragraph Element

```markup
<h1>Hello World</h1>
<h2>CatPhotoApp</h2>
<p>Hello Paragraph</p>
```

04 - Uncomment HTML

05 - Comment out HTML

```markup
<!-- <h1>Hello World</h1> -->
<h2>CatPhotoApp</h2>
<!-- <p>Hello Paragraph</p> -->
```

06 - Fill in the Blank with Placeholder Text

* [關于 Lorem ipsum - 阮一峰的網絡日志](http://www.ruanyifeng.com/blog/2009/04/lorem_ipsum.html)
* 又稱佔位符

07 - Delete HTML Elements

* 空間太少，刪個元素

08 - Change the Color of Text

```markup
<h2 style="color: red">CatPhotoApp</h2>CatPhotoApp</h2>

<p>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>
```

09 - Use CSS Selectors to Style Elements

* css properties
* Cascading Style Sheets 層疊樣式表
* inline style 內聯樣式
* selecter 選擇器
* element 元素
* tag 標籤 `<style></style>`
* curly braces 花括號 `{ }`
* semicolon 分號 `;`

```markup
<style>
h2 {color: blue;}
</style>

<h2>CatPhotoApp</h2>

<p>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>
```

10 - Use a CSS Class to Style an Element

* class 類

```markup
<style>
h2 {
color: blue;
}
.red-text{
color: red;
}
</style>

<h2 class="red-text">CatPhotoApp</h2>

<p>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>
```