# HTML如何跟CSS搭配使用 --- tags: HTML CSS relate --- ###### tags: `HTML, CSS` 1.Inline CSS An inline CSS is used to apply a unique "style" to **a single HTML element**. ** An inline CSS **uses the style attribute of an HTML element**. The following example sets the text color of the element to blue, and the text color of the element to red: ``` <h1 style="color:blue;">A Blue Heading</h1> <p style="color:red;">A red paragraph.</p> ``` ------ 2.Internal CSS An internal CSS is used to define a style for a **single HTML page**. An internal CSS is **defined in the head section of an HTML page**, within a style element. The following example sets the text color of ALL the h1 elements (on that page) to blue, and the text color of ALL the p elements to red. In addition, the page will be displayed with a "powderblue" background color: ``` <!DOCTYPE html> <html> <head> <style> body {background-color: powderblue;} h1 {color: blue;} p {color: red;} </style> </head> <body> <h1>This is a heading</h1> <p>This is a paragraph.</p> </body> </html> ``` ------------ 3.External CSS An external style sheet is used to define the style for **many HTML pages**. To use an external style sheet, **add a link to it in the head section of each HTML page**: ``` <!DOCTYPE html> <html> <head> <link rel="stylesheet" href="styles.css"> </head> <body> <h1>This is a heading</h1> <p>This is a paragraph.</p> </body> </html> ```