Color property
The color CSS property changes the text color to a specified color value. A color value can be specified in several ways:
An RGB color value specifies a color using the rgb(red, green, blue) function by indicating the red, green, and blue intensities. Ex: rgb(0, 0, 0) is black, rgb(0, 0, 255) is blue, rgb(255, 255, 0) is yellow, and rgb(255, 255, 255) is white. A hexadecimal color specifies a color using the #RRGGBB format by indicating the red, green, and blue intensities Ex: #000000 is black, #0000FF is blue, #FFFF00 is yellow, and #FFFFFF is white. An HSL color value specifies a color using the hsl(hue, saturation, lightness) function by indicating the hue, saturation, and lightness values. Ex: hsl(0, 0%, 0%) is black, hsl(120, 100%, 50%) is green, and hsl(0, 100%, 25%) is dark red. The RGBA color value specifies a color using the rgba(red, green, blue, alpha) function by indicating the red, green, blue, and alpha intensities. The HSLA color value specifies a color using the hsla(hue, saturation, lightness, alpha) function by indicating the hue, saturation, lightness, and alpha intensities.
Background properties
Every element in a webpage has a set of background properties. Common background properties include:
The background-color property specifies the background color. The background-image property specifies a background image. The background property is shorthand for setting several of the element's background properties at the same time. Background images are specified with the none value or the url('URL') function, where URL indicates the location of the image. By default, the initial background color is transparent and background image is none, which means the element's parent's background will display underneath the element's content
The float property specifies whether the element will float to the right or left of the element's parent container, allowing text to flow around the element. Values for the float property include:
none - Element does not float (default value) left - Element floats to parent container's left side right - Element floats to parent container's right side The clear property moves elements below previously floated elements. Values for the clear property include:
none - Element allowed to float (default value) left - Stop floating on parent container's left side right - Stop floating on parent container's right side both - Stop floating on both sides
Display property
The display property controls the layout of the element on a webpage. Values for the display property include:
inline - Displays the element as an inline element, like span or a elements. block - Displays the element as a block element, like p, h1, or div elements. none - Hides the element from being displayed, like style elements. inline-block - Displays the contents of the element as a block element, but formats the element as an inline element. list-item - Displays the contents of the element as a list item element.
CSS variables
Many websites have complex stylesheets with repeated values. A CSS variable is a custom CSS property that defines a value. A CSS variable is declared in a CSS selector that defines the variable's scope. A CSS variable can have global scope by declaring the variable in the :root selector, which targets the highest DOM element: the <html> element.
A CSS variable is defined with two dashes preceding the variable name. Ex: --my-variable: red; A CSS variable is accessed with the var() function. Ex: var(--my-variable);
