# HTML5 and CSS: 51-

51 - Override Class Declarations with Inline Styles

* 用 in-line style
* `<h1 style="color: green">`
* in-line 的優先度比 id 屬性高

```markup
<style>
  body {
    background-color: black;
    font-family: Monospace;
    color: green;
  }
  #orange-text {
    color: orange;
  }
  .pink-text {
    color: pink;
  }
  .blue-text {
    color: blue;
  }
</style>
<h1 id="orange-text" class="pink-text blue-text" style="color: white">Hello World!</h1>
```

52 - Override All Other Styles by using Important

* 你以為 inline 是覆蓋優先層級最高的嘛
* 錯了，還有 !important
* `color: red !important;`

```markup
<style>
  body {
    background-color: black;
    font-family: Monospace;
    color: green;
  }
  #orange-text {
    color: orange;
  }
  .pink-text {
    color: pink !important;
  }
  .blue-text {
    color: blue;
  }
</style>
<h1 id="orange-text" class="pink-text blue-text" style="color: white">Hello World!</h1>
```

53 - Use Hex Code for Specific Colors

* hexadecimal code, hex code, 十六進位制
* 6個hexadecimal digits 代表 color
* [Hexadecimal - Wikipedia](https://en.wikipedia.org/wiki/Hexadecimal)
* [RGB color model - Wikipedia](https://en.wikipedia.org/wiki/RGB_color_model)

```markup
<style>
  body {
    background-color: #000000;
  }
</style>
```

54 - Use Hex Code to Mix Colors

* **FF8080，#80FF80，#8080FF 意外的好看**

| Color       | Hex Code |
| ----------- | -------- |
| Dodger Blue | #2998E4  |
| Green       | #00FF00  |
| Orange      | #FFA500  |
| Red         | #FF0000  |
| White       | #FFFFFF  |
| Black       | #000000  |
| Gray        | #808080  |

55 - Use Abbreviated Hex Code

* 可用簡碼，三碼

```markup
<style>
  .red-text {
    color: #F00;
  }
  .fuchsia-text {
    color: #F0F;
  }
  .cyan-text {
    color: #0FF;
  }
  .green-text {
    color: #0F0;
  }
</style>

<h1 class="red-text">I am red!</h1>

<h1 class="fuchsia-text">I am fuchsia!</h1>

<h1 class="cyan-text">I am cyan!</h1>

<h1 class="green-text">I am green!</h1>
```

56 - Use RGB values to Color Elements

* RGB value

```markup
<style>
  body {
    background-color: rgb(0, 0, 0);
  }
</style>
```

57 - Use RGB to Mix Colors

* Blue    rgb(0, 0, 255)
* Red    rgb(255, 0, 0)
* Orchid    rgb(218, 112, 214)
* Sienna    rgb(160, 82, 45)