Understanding Color in CSS

This text uses HEX color: #0156B2 more specifically named: BLUE LOBSTER

This text is inside a gradient blue background.

The Box Model

This box has padding, a dashed border, and margin to demonstrate the box model.

Explain and demonstrate what you have learned in this unit, including colors and the box model and explain how to implement it the design of CSS with examples.

Colors enhances the visual appeal and readability. CSS has different ways to define colors:

Named Colors - color:red;
HEX Colors - color: #ff5733;
RGB Colors - color: rgb(255, 87, 51);
RGBA Colors - color: rgba(255, 87, 51, 0.5);
HSL(A) Colors - color: hsl(15, 100%, 50%); / color: hsl(15, 100%, 50%, 0.7);

The Box Model structures layouts by defining space and elements dimensions. The elements to make the box is:

Content: Description inside the box
Padding: Space between contents and borders (padding: 20px;)
Border: Outline of box (border: 5px solid black;)
Margin: Space between border and surrounding elements(margin: 10px;)