Colors

To change the color of the contents of an element, the color: <color> rule can be used.

Colors can be defined in a few different ways

color: red; /* Named Colors */
color: #ff0000; /* Hex Colors */
color: rgb(255, 0, 0); /* RGB Colors */

To see all of the available options, view the MDN web docs page.

Built-In Colors

There are many named colors that can be used. Here are some examples:

• black
• white
• red
• blue
• green
• yellow
• purple

There are also some more exotic colors:

• salmon
• cornflowerblue
• coral
• beige
• lawngreen
• transparent
• etc

To see more colors, view the MDN web docs page.

Backgrounds

You can also change the color of the element's background

Borders

You can also easily add borders to elements!

Each border needs 3 things:

1. a width (thickness)
   • border-width: <line-width>
2. a style
   • border-style: <line-style>
3. a color
   • border-color: <color>

There's also a shorthand for specifying all three in a single rule

border: <line-width> <line-style> <color>

border-width: 1px;
border-style: solid;
border-color: red;

/* becomes */

border: 1px solid red;

Styles

There are a number of border styles you can choose from

• none
• hidden
• dotted
• dashed
• solid
• double
• groove
• ridge
• inset
• outset

Rounding

You can also round the corners of borders using the border-radius: <length> rule.

border-radius: 10px;