427444c757
* chore(learn): audit files for crowdin Audits the challenge text in the Responsive Web Design superblock to account for words/phrases that should not be translated because they refer to code. Signed-off-by: nhcarrigan <nhcarrigan@gmail.com> * fix: remove quotes from code Removes instances of quoted code blocks, or code blocked quotes. Signed-off-by: nhcarrigan <nhcarrigan@gmail.com> * fix: additional uncaught quote-codes Thanks Oliver :) Co-authored-by: Oliver Eyton-Williams <ojeytonwilliams@gmail.com> Co-authored-by: Randell Dawson <5313213+RandellDawson@users.noreply.github.com> * fix: so many quotes Co-authored-by: Oliver Eyton-Williams <ojeytonwilliams@gmail.com> * fix: missing punctuation Noted in a Crowdin comment. Signed-off-by: nhcarrigan <nhcarrigan@gmail.com> * fix: remove more quotes Co-authored-by: Randell Dawson <5313213+RandellDawson@users.noreply.github.com> Co-authored-by: Oliver Eyton-Williams <ojeytonwilliams@gmail.com> Co-authored-by: Randell Dawson <5313213+RandellDawson@users.noreply.github.com>
113 lines
2.6 KiB
Markdown
113 lines
2.6 KiB
Markdown
---
|
|
id: bad87fee1348bd9aedf07756
|
|
title: Override All Other Styles by using Important
|
|
challengeType: 0
|
|
videoUrl: 'https://scrimba.com/c/cm24rcp'
|
|
forumTopicId: 18249
|
|
dashedName: override-all-other-styles-by-using-important
|
|
---
|
|
|
|
# --description--
|
|
|
|
Yay! We just proved that inline styles will override all the CSS declarations in your `style` element.
|
|
|
|
But wait. There's one last way to override CSS. This is the most powerful method of all. But before we do it, let's talk about why you would ever want to override CSS.
|
|
|
|
In many situations, you will use CSS libraries. These may accidentally override your own CSS. So when you absolutely need to be sure that an element has specific CSS, you can use `!important`.
|
|
|
|
Let's go all the way back to our `pink-text` class declaration. Remember that our `pink-text` class was overridden by subsequent class declarations, id declarations, and inline styles.
|
|
|
|
# --instructions--
|
|
|
|
Let's add the keyword `!important` to your pink-text element's color declaration to make 100% sure that your `h1` element will be pink.
|
|
|
|
An example of how to do this is:
|
|
|
|
`color: red !important;`
|
|
|
|
# --hints--
|
|
|
|
Your `h1` element should have the class `pink-text`.
|
|
|
|
```js
|
|
assert($('h1').hasClass('pink-text'));
|
|
```
|
|
|
|
Your `h1` element should have the class `blue-text`.
|
|
|
|
```js
|
|
assert($('h1').hasClass('blue-text'));
|
|
```
|
|
|
|
Your `h1` element should have the `id` of `orange-text`.
|
|
|
|
```js
|
|
assert($('h1').attr('id') === 'orange-text');
|
|
```
|
|
|
|
Your `h1` element should have the inline style of `color: white`.
|
|
|
|
```js
|
|
assert(code.match(/<h1.*style/gi) && code.match(/<h1.*style.*color\s*?:/gi));
|
|
```
|
|
|
|
Your `pink-text` class declaration should have the `!important` keyword to override all other declarations.
|
|
|
|
```js
|
|
assert(
|
|
code.match(/\.pink-text\s*?\{[\s\S]*?color:.*pink.*!important\s*;?[^\.]*\}/g)
|
|
);
|
|
```
|
|
|
|
Your `h1` element should be pink.
|
|
|
|
```js
|
|
assert($('h1').css('color') === 'rgb(255, 192, 203)');
|
|
```
|
|
|
|
# --seed--
|
|
|
|
## --seed-contents--
|
|
|
|
```html
|
|
<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>
|
|
```
|
|
|
|
# --solutions--
|
|
|
|
```html
|
|
<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>
|
|
```
|