CSS stands for Cascading Style Sheets
tag_selector/#id_selector/.class_selector {
property: value;
}
// like following
body {
background-color: red;
}
#hello {
background-color: red;
}
.hello {
background-color: red;
}
color name like red, green, blue
hexa = 6 (a to f)
decimal = 10 (0 to 9) hexadecimal = 16 (0 to f)
hightest value f is white
lowest value is 0 is black
white hexadecimal value = #ffffff
black hexadecimal value = #00000
when first 3 letter is as last 3 letter you can omit last 3 digit. like #fff
div {
background-color: #00bfff;
color: #ffffff;
}
rgb stands for red, green, blue
rgb() is a function. which require 3 parameter. red, green, blue
rgb a value is 0 to 255
so hightest value 255 is white
so lowest value 0 is black
white rgb value = rgb(255, 255, 255)
black rgb value = rgb(0, 0, 0)
div {
background-color: rgb(0, 191, 255);
color: rgb(255, 255, 255);
}
rgba stands for red, green, blue, alpha. rga will be like state above rga. 4th parameter a stands for alpha. which define transparency. transparency maximum value is 1 and minimum value is 0. suppose I want black color with 50% transparency so value will be rgba(0, 0, 0, 0.5)
HSL stands for hue, saturation, and lightness.
hsl() is a function. which require 3 parameter. hue, saturation, lightness.
div {
background-color: hsl(180, 50%, 50%);
color: hsl(0, 0%, 100%);
}
Hue is a degree on the color wheel from 0 to 360. 0 is red, 120 is green, 240 is blue.
Saturation is a percentage value; 0% means a shade of gray and 100% is the full color.
Lightness is also a percentage; 0% is black, 100% is white.