greatbody
/
freeCodeCamp
mirror of https://github.com/freeCodeCamp/freeCodeCamp.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Edited some grammar and syntax (#21687)

pull/21817/head^2
Netanya 2018-11-05 18:03:14 +09:00 committed by Manish Giri
parent b25fd77ed2
commit acbc1725a2
1 changed files with 11 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
guide/english/css/css3-colors/index.md
View File

@ -3,11 +3,11 @@ title: CSS3 Colors
---
## CSS3 Colors
Colors in CSS are used to colorize elements in our web-pages. There are many ways to assign colors to elements. You can use the actual names for the colors, their RGB values or the Hexadecimal values. In CSS3 the hsl (hue-saturation-lightness) has been added to the specification.
Colors in CSS are used to colorize elements in our web pages. There are many ways to assign colors to elements. You can use the actual names for the colors, their RGB values or their hexadecimal values. In CSS3 the HSL (hue-saturation-lightness) has been added to the specification.
### Color Names
Currently there are 140 color names supported in HTML, which can be assigned in CSS rules by just typing their name. For example:
Currently there are 140 color names supported in HTML, which can be assigned as CSS rules by just typing their name. For example:
### Syntax
@ -16,15 +16,15 @@ p {
color: green;
}
```
This rule changes all the font color for all \<p\> elements to green.<br>
For the full 140 color list see here: https://www.w3schools.com/colors/colors_names.asp
This rule changes the font color for all \<p\> elements to green.<br>
You can see the full color name list here: https://www.w3schools.com/colors/colors_names.asp
### RGB values
RGB stands for "Red", "Green" and "Blue" and we can also assign colors by typing their RGB values in our rules. An RGB value would look like this: rgb(255,0,0), where each number defines how much of each color will be in the final mix.<br>
RGB stands for red, green and blue and we can also assign colors by typing their RGB values in our rules. An RGB value would look like this: rgb(255,0,0), where each number defines how much of each color will be in the final mix.<br>
The values range from 0 to 255 and in our example we see that only the first value is 255 while the other two are set to 0. That means that there is only red in our value and the respective element will be colored red. An RGB value of (0, 0, 0) would give black and a value of (255, 255, 255) would give white.<br>
It is impossible to try to memorize each color code and for that reason there numerous tools online for picking the colors you want for your projects. For example: https://www.w3schools.com/colors/colors_picker.asp or http://htmlcolorcodes.com/color-picker/.
It would be impossible to memorize each color code and for that reason there are numerous online tools for picking the colors you want for your projects. For example: https://www.w3schools.com/colors/colors_picker.asp, http://htmlcolorcodes.com/color-picker/ or https://coolors.co/.
```css
p {
@ -37,10 +37,10 @@ This rule changes the font color of all p elements to green, just like above.
Hexadecimal values are yet another way to define colors in CSS and they work quite similarly to RGB values.<br>
A random hex code would like this: `#29432b`, where the first two characters after the hash stand for the amount of RED in the mix, the second two stand for the amount of Green and the last two stand for the amount of Blue.<br>
A random hex code would like this: `#29432b`, where the first two characters after the hash stand for the amount of red in the mix, the second two stand for the amount of green and the last two stand for the amount of blue.<br>
The values of `#000000` and `#ffffff` stand for black and white respectively.<br>
You can find the specific Hexadecimal colors you require by using the same tools mentioned for the RGB values.
You can find the specific hexadecimal colors you require by using the same tools mentioned for the RGB values.
### Syntax
@ -54,9 +54,9 @@ This rule again changes the font color of all p elements to green.
### HSL
HSL has three values. <br>
First one is **Hue** which is measure in degrees. So 0 (or 360) represents color red, at 120 it is green and 240 is blue. <br>
Second one is **Saturation** which has a percentage value with range from 0 to 100%. <br>
Third one is **Lightness** which also has a percentage value with range from 0 to 100%. 0% is dark black, 50% average, 100% is white.
The first one is **Hue** which is measured in degrees. So 0 (or 360) represents the color red, at 120 it is green and 240 is blue. <br>
The second one is **Saturation** which has a percentage value ranging from 0 to 100%. <br>
The third one is **Lightness** which also has a percentage value with a range from 0 to 100%. 0% is dark black, 50% is in the middle and 100% is white.
### Syntax