CSS Colors and Values

Defines a dotted border around an element.

Defines a dashed border around an element.

Defines a solid border around an element.

Defines a double border around an element.

Defines the width of the borders around an element. The width can be set to specific sizes (px, pt, cm, etc) or 'thin', 'medium', or 'thick'.

Defines the color of the borders around an element. It can accept any valid color value.

Defines a 3D grooved border. The appearance is determined by the 'border-color' property.

Defines a 3D ridged border. The appearance is determined by the 'border-color' property.

A method of representing colors using three values: red, green, and blue. Each value ranges from 0 to 255, representing the intensity of that color.

A way to specify colors using a hexadecimal code, consisting of six characters. Each pair of characters represents a red, green, or blue value, ranging from 00 to FF (decimal 0 to 255).

A CSS attribute used to set the background color of an HTML element.

A CSS attribute used to set the color of the text within an HTML element.

Specifies the color of HTML elements using a color name, for example, "Tomato", "Orange", "DodgerBlue", etc.

Represents a color using a hexadecimal value, like #ff0000 (red) or #000000 (black).

Refers to the three color components: red, green, and blue, used to represent the intensity of each color.

A color representation using hue, saturation, and lightness. It is represented as hsl(hue, saturation, lightness). Hue determines the color on the color wheel (0-360 degrees), saturation controls the color intensity (0-100%), and lightness sets the brightness (0-100%).

A color value with an alpha channel that specifies the opacity of the color. It's represented as rgba(red, green, blue, alpha). The alpha channel takes a value from 0.0 (completely transparent) to 1.0 (completely opaque).

Similar to HSL, but with an added alpha channel to control the opacity. It is represented as hsla(hue, saturation, lightness, alpha). The alpha value ranges from 0.0 (transparent) to 1.0 (opaque).

A CSS property that sets an image as the background of an element. It takes a URL pointing to the image file. For example background-image: url("image.jpg");

A CSS property that determines how a background image is repeated on the element. Values include 'repeat' (repeats both horizontally and vertically), 'repeat-x' (repeats horizontally), 'repeat-y' (repeats vertically), and 'no-repeat' (does not repeat).

A CSS property that sets the position of a background image within the element. It takes two values. The first value specifies the horizontal position (left, center, right), and the second value specifies the vertical position (top, center, bottom).

A CSS property that controls whether the background image should be fixed or scroll with the page. The value fixed keeps the image stationary while the page scrolls, while the value scroll makes the image scroll with the page content.

The border-radius property in CSS is used to create rounded corners for elements. The value sets the radius of the corners, with larger values creating more rounded corners.

CSS margins create space outside an element's border and content. They control the spacing between the element and its neighboring elements.

Each of these properties sets the margin for the corresponding side of an element: margin-top, margin-right, margin-bottom, margin-left.

The margin shorthand property allows you to set all four margins in a single declaration, using up to four values: 1. margin: 25px 50px 75px 100px; (top, right, bottom, left) 2. margin: 25px 50px 75px; (top, right/left, bottom) 3. margin: 25px 50px; (top/bottom, right/left) 4. margin: 25px; (all sides)

CSS padding creates space inside an element's border, between the content and the border.

Similar to margins, CSS padding properties allow you to set padding for each side of an element separately: padding-top, padding-right, padding-bottom, padding-left.

The padding shorthand property lets you set all four paddings in a single declaration, following the same format as the margin shorthand: 1. padding: 25px 50px 75px 100px; 2. padding: 25px 50px 75px; 3. padding: 25px 50px; 4. padding: 25px;

The display property controls how elements are displayed on the web page. Different values like block and inline determine the layout and behavior of the element.

A CSS property that controls the appearance of borders around an element, defining their style, width, and color.

A CSS property that allows you to create smooth transitions between different states of an element, making changes appear gradual and visually appealing.

A CSS property used to specify the style of the border, defining its appearance as solid, dashed, dotted, double, grooved, etc.

A CSS property that controls the behavior of an element within its parent container. Setting an element to float allows it to move to the left or right of its container.

The ability of an element to inherit properties from its parent element in the CSS hierarchy.

A collection of CSS properties that allows you to create interactive animations on HTML elements without relying on JavaScript.

An HTML element that always starts on a new line and occupies the entire available width. It extends as far as possible to the left and right.

An HTML element that does not start on a new line and takes up only as much width as needed. This is a smaller element that doesn't break the flow of the line.

An HTML element that is used to group content together. It is a versatile element that can be used to apply styles to a section of the webpage.

A CSS property that lets you specify the width of an element, preventing it from stretching to the full width of its container.

A CSS property that defines the maximum width an element can take up. It allows the element to become smaller than its container.

A CSS value that automatically distributes any extra space available within a container equally to left and right margins. This horizontally centers an element within its parent.

A CSS property that governs the way content is displayed on a page. It controls the size, position, and flow of elements, determining whether they appear as blocks, inline elements, or hidden.

A CSS property that can be used to hide elements. This allows for dynamic content display without removing the element from the document.