Colors

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:

html5.png

Run it now



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:

html6.png

Run it now



Where to Look Up Color Hex Codes and Names