2018-10-12 15:37:13 -04:00
|
|
|
---
|
|
|
|
title: Override Class Declarations with Inline Styles
|
|
|
|
---
|
2019-07-24 00:59:27 -07:00
|
|
|
# Override Class Declarations with Inline Styles
|
2018-10-12 15:37:13 -04:00
|
|
|
|
2019-07-24 00:59:27 -07:00
|
|
|
---
|
|
|
|
## Problem Explanation
|
2018-11-18 02:41:39 +04:00
|
|
|
We need to use an ```inline style``` to try to make our ```h1``` element white.
|
2018-10-12 15:37:13 -04:00
|
|
|
|
2019-07-24 00:59:27 -07:00
|
|
|
**Example:**
|
2018-10-12 15:37:13 -04:00
|
|
|
|
2018-11-18 02:41:39 +04:00
|
|
|
Inline styles look like this:
|
|
|
|
|
|
|
|
```css
|
|
|
|
<h1 style="color: green;">
|
|
|
|
```
|
|
|
|
|
2019-07-24 00:59:27 -07:00
|
|
|
**NOTE:** An inline style loses many of the advantages of a style sheet (by mixing content with presentation). Use this method sparingly.
|
|
|
|
|
|
|
|
|
|
|
|
---
|
|
|
|
## Solutions
|
|
|
|
|
|
|
|
<details><summary>Solution 1 (Click to Show/Hide)</summary>
|
2018-11-18 02:41:39 +04:00
|
|
|
|
|
|
|
In this line:
|
|
|
|
|
|
|
|
```css
|
|
|
|
<h1 id="orange-text" class="pink-text blue-text">Hello World!</h1>
|
|
|
|
```
|
|
|
|
In opening tag ```<h1>``` we need to add ```inline style``` to make our ```h1``` element white:
|
|
|
|
|
|
|
|
```css
|
|
|
|
<h1 style="color: white;" id="orange-text" class="pink-text blue-text">Hello World!</h1>
|
|
|
|
```
|
|
|
|
|
2019-07-24 00:59:27 -07:00
|
|
|
</details>
|