Colors
CSS provides for extensive specification of colors in web pages. Among the HTML/web page ways and content that can have color applied to are:
- page background
- text font, e.g. paragraphs, headings, lists, table content/text, etc.
- table row colors, border colors, etc.
- form field controls, e.g. input textbox background, input textbox text, etc.
- hyperlink colors
Color in CSS can be specified one of three ways:
- color name, e.g. red, blue
- hex code, e.g. #c2e9ea
- rgb, rgba, hsl, or hsla value, e.g. rgb(0,0,255)
Example: Specifying the color of a background, paragraph, heading, and input box
body { background-color: #c2e9ea; }
p { color: darkblue; }
h1 { color: MidnightBlue; }
input { background-color: rgb(218, 236, 237); }
Output:
Example: Specifying the table row colors, spacing, borders and alignment
tr:nth-child(odd) { background-color: #c2ecef; }
tr:nth-child(even) { background-color: white }
th {
background-color: #4b8a8e;
color: white;
}
table {
border-collapse: collapse;
}
table, tr, td, th {
padding: 10px;
border: solid 1px black;
}
tr {
vertical-align: top;
}
Output: