Color Models
- Named colors, Hexadecimal, RGB, RGBA, HSL, HSLA
Background Properties
- Background-color, background-image, background-repeat, background-size, background-position
Gradient Backgrounds
- Linear and radial gradients
1. Color Models:
- Named Colors: Predefined names like
red,blue,green, etc., for easy use. - Hexadecimal: A 6-digit code that represents RGB values (e.g.,
#ff0000for red). - RGB: Uses Red, Green, and Blue values in the range of 0-255 to define a color (e.g.,
rgb(255, 0, 0)for red). - RGBA: Same as RGB but with an Alpha value (0 to 1) for transparency (e.g.,
rgba(255, 0, 0, 0.5)for 50% transparent red). - HSL: Represents colors using Hue (0-360°), Saturation (0%-100%), and Lightness (0%-100%) (e.g.,
hsl(0, 100%, 50%)for red). - HSLA: Same as HSL but with Alpha transparency (e.g.,
hsla(0, 100%, 50%, 0.5)).
2. Background Properties:
- background-color: Sets the background color (e.g.,
background-color: blue;). - background-image: Adds an image as the background (e.g.,
background-image: url('image.jpg');). - background-repeat: Controls the repetition of the background image (e.g.,
no-repeat,repeat-x,repeat-y). - background-size: Defines the size of the background image (e.g.,
cover,contain, or specific dimensions like100pxor50%). - background-position: Determines where the background image is placed (e.g.,
top,center,left,50% 50%for custom positioning).
3. Gradient Backgrounds:
- Linear Gradient: A smooth transition between colors along a straight line (e.g.,
linear-gradient(to right, red, yellow)for a transition from red to yellow). - Radial Gradient: Colors radiate from a center point in a circular or elliptical pattern (e.g.,
radial-gradient(circle, red, yellow)).
These properties allow you to customize the appearance of your web page’s backgrounds and control how colors and images are displayed.