CSS Colors and Unit
CSS color can we defined in 3 ways:
- Color Name
- Hexadecimal color
- RGB Color Methods / RGBA
Color Names
For color CSS supports 16 million colors. But it includes only a limited set of standard color names. – You can directly define the color name or color shade
name.
Syntax:
h2{
color:green;
}
P {
color:lightgreen;
}
Hexadecimal color
This hexadecimal color sample is based on the RGB (Red, Green, Blue) color model and allows for the definition of a large number of color hues. The values 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, a, b, c, d, e, and f are used in hexadecimal color coding.
The code starts with a # symbol.
It can be 3 or 6 characters long:
- 3-character hex: #RGB (each color component has 1 digit, e.g., #f00 for red).
- 6-character hex: #RRGGBB (each color component has 2 digits, e.g., #ff0000 for red).
RGB color code: – The method “rgb()” is used for defined RGB color. – It is a combination of Red, Green and Blue.
– In “rgb()” the values for every color can range from 0 to
255.
- R – 0 to 255
- G – 0 to 255
- B – 0 to 255
- Syntax:
- rgb(0,0,255); blue
- rgb(255,0,0); red
CSS Gradient
CSS Gradients colors allow multiple color and their transient . it can be Linear Gradients
Direction left, right, up and down.
Radial Gradients
From center
Linear Gradients: – It defines colors for various directions left, right, up and
down. – You can configure by using the method “linear[1]gradient()”
Syntax:
background-image: linear-gradient(color1, color2,..);
Gradient uses various directions
- o to right
- o to bottom
- o to left
- o to top
- o to bottom left
- o to bottom right
- o to top right
- o to top lef
Radial Gradient –
Radial gradients are used to create effects that radiate outward from the center. They can have shapes like a circle or diamond, and you can use the repeating-radial-gradient() function to repeat the gradient.
background-image: repeating-radial-gradient(red, yellow, green);
Syntax:
background-image: repeating-radial-gradient(red, yellow, green);
radient.
“repeating-radial-gradient()”
For more details you can visit: https://apitpoint.com/gradient-color-generator
CSS Units
CSS Units define size and position
In this CSS Unit Size can be adjusted using width and height. Positioning can be set using the x, y, and z axes. There are two categories for the CSS units.
- o Absolute Length Units
- o Relative Length Units
Absolute Length Units:
These units are not relative to anything else, hence known as absolute length units.
They are not affected by other elements.
Unit Name | Equivalent to
cm (Centimetres): 1 cm = 96px / 2.54 = 37px
mm (Millimetres): 1 mm = 1/10th of 1 cm
Q (Quarter Millimetres): 1 Q = 1/40th of 1 cm
in (Inches): 1 in = 2.54 cm = 96px
pc (Picas): 1 pc = 1/6th of 1 in
pt (Point): 1 pt = 1/72th of 1 in
px (Pixels): 1 px = 1/96th of 1 in
Relative Length Units:
These units are related to other contents on the page.
In this relative One can determine the size of any element by examining its parent, child, or adjacent elements.
The benefit is that altering the parent will alter the element’s size and location.
Unit | Relative To
em: It uses the size of the parent and applies it to the child.
ex: It is relative to the height of the lowercase ‘x’ in the current font.
ch: It is relative to the width of the “0” (zero) character in the current font.
rem: It is relative to the root element’s font size (usually the <html> element).
ln: Relative to the line height.
vw: Relative to 1% of the viewport’s width.
vh: Relative to 1% of the viewport’s height.
vmin: Relative to the smaller of either the viewport’s width or height.
vmax: Relative to the larger of either the viewport’s width or height.
