[CSS 3/3] Body Element, Override, Hex, RGB, Fallback, Inherit(Root)
1. Style the HTML Body Element
Now let's start fresh and talk about CSS inheritance.
Every HTML page has a body element.
We can prove that the body element exists here by giving it a background-color of black.
We can do this by adding the following to our style element:
body {
background-color: black;
}it shows background black
2. Inherit Styles from the Body Element
Now we've proven that every HTML page has a body element, and that its body element can also be styled with CSS.
Remember, you can style your body element just like any other HTML element, and all your other elements will inherit your body element's styles. like this;
3. Prioritize One Style Over Another
Sometimes your HTML elements will receive multiple styles that conflict with one another.
For example, your h1 element can't be both green and pink at the same time.
Let's see what happens when we create a class that makes text pink, then apply it to an element. Will our class override the body element's color: green; CSS property?
4. Override Styles in Subsequent CSS
Our pink-text class overrode our body element's CSS declaration!
We just proved that our classes will override the body element's CSS. So the next logical question is, what can we do to override our pink-text class?
Create an additional CSS class called blue-text that gives an element the color blue. Make sure it's below your pink-text class declaration.
Apply the blue-text class to your h1 element in addition to your pink-text class, and let's see which one wins.
Applying multiple class attributes to a HTML element is done with a space between them like this:
class="class1 class2"
Note: It doesn't matter which order the classes are listed in the HTML element.
In style , blue comes later than pink, it shows "Hello World in blue"
5. Override Class Declarations by Styling ID Attributes
We just proved that browsers read CSS from top to bottom in order of their declaration. That means that, in the event of a conflict, the browser will use whichever CSS declaration came last. Notice that if we even had put blue-text before pink-text in our h1 element's classes, it would still look at the declaration order and not the order of their use!
But we're not done yet. There are other ways that you can override CSS. Do you remember id attributes?
Let's override your pink-text and blue-text classes, and make your h1 element orange, by giving the h1 element an id and then styling that id.
Give your h1 element the id attribute of orange-text. Remember, id styles look like this:
<h1 id="brown-text">#brown-text {
color: brown;
}Note: It doesn't matter whether you declare this CSS above or below pink-text class, since the id attribute will always take precedence.
6. Override Class Declarations with Inline Styles
So we've proven that id declarations override class declarations, regardless of where they are declared in your style element CSS.
There are other ways that you can override CSS. Do you remember inline styles?
Use an inline style to try to make our h1 element white. Remember, inline styles look like this:
<h1 style="color: green;">7. Override All Other Styles by using Important
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.
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: pink !important;then it shows in pink !
8. Use Hex Code for Specific Colors
Did you know there are other ways to represent colors in CSS? One of these ways is called hexadecimal code, or hex code for short.
We usually use decimals, or base 10 numbers, which use the symbols 0 to 9 for each digit. Hexadecimals (or hex) are base 16 numbers. This means it uses sixteen distinct symbols. Like decimals, the symbols 0-9 represent the values zero to nine. Then A,B,C,D,E,F represent the values ten to fifteen. Altogether, 0 to F can represent a digit in hexadecimal, giving us 16 total possible values. You can find more information about hexadecimal numbers here.
In CSS, we can use 6 hexadecimal digits to represent colors, two each for the red (R), green (G), and blue (B) components. For example, #000000 is black and is also the lowest possible value. You can find more information about the RGB color system here.
body {
color: #000000;
}9. Use Hex Code to Mix Colors
To review, hex codes use 6 hexadecimal digits to represent colors, two each for red (R), green (G), and blue (B) components.
From these three pure colors (red, green, and blue), we can vary the amounts of each to create over 16 million other colors!
For example, orange is pure red, mixed with some green, and no blue. In hex code, this translates to being #FFA500.
The digit 0 is the lowest number in hex code, and represents a complete absence of color.
The digit F is the highest number in hex code, and represents the maximum possible brightness.
10. Use Abbreviated Hex Code
Many people feel overwhelmed by the possibilities of more than 16 million colors. And it's difficult to remember hex code. Fortunately, you can shorten it.
For example, red's hex code #FF0000 can be shortened to #F00. This shortened form gives one digit for red, one digit for green, and one digit for blue.
This reduces the total number of possible colors to around 4,000. But browsers will interpret #FF0000 and #F00 as exactly the same color.
ColorShort Hex Code example:
Cyan#0FF
Green#0F0
Red#F00
Fuchsia#F0F
11. Use RGB values to Color Elements
Another way you can represent colors in CSS is by using RGB values.
The RGB value for black looks like this:
rgb(0, 0, 0)
The RGB value for white looks like this:
rgb(255, 255, 255)
Instead of using six hexadecimal digits like you do with hex code, with RGB you specify the brightness of each color with a number between 0 and 255.
If you do the math, the two digits for one color equal 16 times 16, which gives us 256 total values. So RGB, which starts counting from zero, has the exact same number of possible values as hex code.
Here's an example of how you'd change the body background to orange using its RGB code.
body {
background-color: rgb(255, 165, 0);
}12. Use CSS Variables to change several elements at once
CSS Variables are a powerful way to change many CSS style properties at once by changing only one value.
Follow the instructions below to see how changing just three values can change the styling of many elements.
In the penguin class, let me change the black value to gray, the gray value to white, and the yellow value to orange.
https://Penguin.jhc6.repl.co
13. Create a custom CSS Variable
To create a CSS variable, you just need to give it a name with two hyphens in front of it and assign it a value like this:
--penguin-skin: gray;This will create a variable named --penguin-skin and assign it the value of gray. Now you can use that variable elsewhere in your CSS to change the value of other properties to gray.
14. Use a custom CSS Variable
After you create your variable, you can assign its value to other CSS properties by referencing the name you gave it.
background: var(--penguin-skin);This will change the background of whatever element you are targeting to gray because that is the value of the --penguin-skin variable. Note that styles will not be applied unless the variable names are an exact match.
15. Attach a Fallback value to a CSS Variable
When using your variable as a CSS property value, you can attach a fallback value that your browser will revert to if the given variable is invalid.
Note: This fallback is not used to increase browser compatibility, and it will not work on IE browsers. Rather, it is used so that the browser has a color to display if it cannot find your variable.
Here's how you do it:
background: var(--penguin-skin, black);This will set background to black if your variable wasn't set. Note that this can be useful for debugging.
Here's an example; Sometimes it happens when users use old browser or spell wrong.
It looks like there is a problem with the variables supplied to the .penguin-top classes. Rather than fix the typo, let me add a fallback value of black to the background property of the .penguin-top classes.
you can fix the problem by adding a fall back value.
16. Improve Compatibility with Browser Fallbacks
When working with CSS you will likely run into browser compatibility issues at some point. This is why it's important to provide browser fallbacks to avoid potential problems.
When your browser parses the CSS of a webpage, it ignores any properties that it doesn't recognize or support. For example, if you use a CSS variable to assign a background color on a site, Internet Explorer will ignore the background color because it does not support CSS variables. In that case, the browser will use whatever value it has for that property. If it can't find any other value set for that property, it will revert to the default value, which is typically not ideal.
This means that if you do want to provide a browser fallback, it's as easy as providing another more widely supported value immediately before your declaration. That way an older browser will have something to fall back on, while a newer browser will just interpret whatever declaration comes later in the cascade.
17. Inherit CSS Variables
When you create a variable, it is available for you to use inside the selector in which you create it. It also is available in any of that selector's descendants. This happens because CSS variables are inherited, just like ordinary properties.
To make use of inheritance, CSS variables are often defined in the :root element.
:root is a pseudo-class selector that matches the root element of the document, usually the html element. By creating your variables in :root, they will be available globally and can be accessed from any other selector in the style sheet.
18. Change a variable for a specific area
When you create your variables in :root they will set the value of that variable for the whole page.
You can then overwrite these variables by setting them again within a specific selector.
19. Use a media query to change a variable
CSS Variables can simplify the way you use media queries.
For instance, when your screen is smaller or larger than your media query break point, you can change the value of a variable, and it will apply its style wherever it is used.
