CSS Colors
Keywords: There are a set of predefined color keywords that are recognized by browsers, such as "red", "green", "blue", etc.RGB (Red Green Blue): Colors can be specified using the RGB format, which allows you to specify the amount of red, green, and blue in a color. For example, rgb(255, 0, 0) is pure red, rgb(0, 255, 0) is pure green, and rgb(0, 0, 255) is pure blue.RGBA (Red Green Blue Alpha): The RGBA format is similar to RGB, but it also includes an "alpha" value, which specifies the transparency of the color. An alpha value of 1.0 is fully opaque, and an alpha value of 0.0 is fully transparent.Hex: HEX color values are six-digit hexadecimal (hex) color codes, like '#FFFFFF' which represents white color and '#000000' black.HSL (Hue, Saturation, Lightness): Colors can be specified using the HSL format, which stands for hue, saturation, and lightness. Hue is a value between 0 and 360, which represents a degree on the color wheel. Saturation is a value between 0% and 100%, which represents the intensity of the color. Lightness is a value between 0% and 100%, which represents the brightness of the color.
For example, in css if you want to set the background color of an element to be red , following are the ways.
/* Keyword */
body {
background-color: red;
}
/* Hex */
body {
background-color: #ff0000;
}
/* RGB */
body {
background-color: rgb(255, 0, 0);
}
/* RGBA */
body {
background-color: rgba(255, 0, 0, 1);
}
/* HSL */
body {
background-color: hsl(0, 100%, 50%);
}
It's recommended to use RGBA and HSL color values over HEX as they're more human-friendly as it's easy to understand lightness and saturation.
CSS Backgrounds
In CSS, the background property is used to set the background of an element.
You can set the background color of an element using the background-color property. As I explained before, you can specify the color value in several formats including keywords, RGB, RGBA, HEX, HSL.
/* Keyword */
body {
background-color: red;
}
/* Hex */
body {
background-color: #ff0000;
}
/* RGB */
body {
background-color: rgb(255, 0, 0);
}
/* RGBA */
body {
background-color: rgba(255, 0, 0, 1);
}
/* HSL */
body {
background-color: hsl(0, 100%, 50%);
}
You can also set the background image of an element using the background-image property. This can be done by setting the value of the property to the URL of an image.
body {
background-image: url('path/to/image.jpg');
}
You can also control how the background image is displayed using the background-repeat, background-position, and background-size properties.
background-repeat property is used to specify if the background image should be repeated, and if so, in which direction.
background-position property is used to specify the position of the background image.
background-size property is used to specify the size of the background image.
/* Repeat in x-axis and y-axis */
body {
background-image: url('path/to/image.jpg');
background-repeat: repeat;
}
/* Repeat only x-axis */
body {
background-image: url('path/to/image.jpg');
background-repeat: repeat-x;
}
/* Do not repeat */
body {
background-image: url('path/to/image.jpg');
background-repeat: no-repeat;
}
/* Position the image top left corner */
body {
background-image: url('path/to/image.jpg');
background-position: left top;
}
/* Resize the image */
body {
background-image: url('path/to/image.jpg');
background-size: cover;
}
It's also possible to use shorthand property background to set all the above values in a single line.
/* shorthand */
body {
background: url('path/to/image.jpg') no-repeat left top;
}
In addition to this, there are other properties to control background like background-clip, background-origin,background-attachment etc. You can refer the documentation for more details.
0 Comments