# 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>
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://ayugioh2003.gitbook.io/free-code-camp-practice/front-end-development-certification/html5-and-css/html5-and-css-01-10.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.