Update 17

Some common CSS attributes for HTML5

This list includes some very common CSS properties. It is not intended to be complete. In many cases the list of possible values is also incomplete. Some properties can be used with additional tags.

Commonly used with body, div, and table tags

background-color : value Common values:
- #rrggbb where rrggbb is hex with digits 0, 1, ..., 9, A, B, .... F
- aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, or yellow. Modern browsers recognize 140 color names.
background-image : url(file name)

Commonly used with p, span, div, h1...h6, body, and table tags

font-family : value Allows comma separated list. Example:
```
font-family: "Helvetica", "Arial", sans-serif
```
This paragraph actually uses this font-family. In this example, the browser would attempt to use a "Helvetica" family-font first. If it wasn't available, it would try to use "Arial". If neither were available it would use "sans-serif", a generic font available in every browser. One should always include a generic-family font as the last font because a viewer's computer may not have a particular family-name font available. Note: "Times New Roman" and "Arial" are commonly found on Windows computers while "Times" and "Helvetica" are common on Macs. It generally recommended that if you use a family-name, you specify a font that is commonly found on Macs, one commonly found on Windows computers, and a third generic font just in case neither family font is available on the user's computer. Common values:
- generic-family : The name of a generic-family: serif, sans-serif, cursive, monospace, fantasy. Recommended! (Note: Do not use quotes around generic-family names.) Note: The generic fonts actually used may vary between browsers and operating systems. For example, the following samples were collected using Windows 7:
- family-name : The name of a font-family, like "Times", "Courier", "Arial", etc. (Note: Quotes are required for font names that include blanks and are commonly used around all family-names.)
font-size : value Common values:
- xx-small, small, medium, large, x-large, or xx-large
- smaller or larger
- xxx% (where xxx >= 100)
- xxpx (where xx is the number of pixels - use with great caution)
font-style : value Common values: normal or italic
font-weight : value Common values: normal, bold, bolder, or lighter
color : value See color value list above
text-align : value Possible values: left, right, center, justify
text-decoration : value Common values: none, underline, overline, line-through
text-indent : value Indents first line. Values can be positive or negative.
width : value Examples:
```
   width:  500px
```
```
   width:  40%
```

Commonly used with ordered and unordered lists

list-style-type : value Common values

Ordered lists	Unordered lists
decimal, lower-roman, upper-roman, lower-alpha	none, disk, circle, square

list-style-image : url(file name)

Commonly used with img and div tags

Used to make the text wrap around the image or division

float : value Possible values: left, right, or none

Centering items

Text: Use the text-align property for the paragraph.
Images: HTML treats images as oversized text. Put the image in a centered paragraph.

Tables and divisions: Examples

   aTable.center {                   aDiv.center {
      margin-left: auto;                  margin-left: auto;
      margin-right: auto;                 margin-right: auto;
   }                                 }

Box properties: margins, padding and borders

These apply to all elements and are commonly used with div (divisions), paragraphs, lists and headers, for example. They apply to the "box" containing the element.

CSS used for this div
float: right;
background-color: #CCCCCC;
margin: 20px;
padding: 10px;
border-width: 10px;
border-style: outset;
border-color: red

margin : widthValue (the value sets the width of the external margin outside the border around the element and determines how close the element's border can be to other elements.)
padding : widthValue (the value sets the width of the internal padding inside the border of the element and determines how close the contents of the box can be to the border.)
border-width : widthValue Common values: thin, medium, thick, or a number as described below.
border-style : styleValue A few common values: none, dotted, dashed, solid, groove, inset.
border-color : colorValue See the color value list near the top of the page or may be transparent.

widthValues number values for margin, padding and border-width are commonly set in px (pixels), in (inches), cm (centimeters) or percents. The above listing is short. One can control the top, right side, bottom, and left side of the box independently using -top, -right, -bottom, -left following the words margin, padding, or border The Table section show how the width, style and color can be combined in one specification.

Tables

When formatting tables, you typically define CSS for the <table>, <tr>, <th>, <td>, and <caption> tags as needed. The following properties discussed above may be useful: border, width, height, text-align, padding, background-color, color, text-align, margin-left: auto, and margin-right: auto are often useful. Sometimes vertical-align, border-bottom, :hover, table-layout, and overflow-x (used in div) may be usedful. Important Some browsers require using HTML5 and start with the tag <!DOCTYPE html>. Some special properties:

border: width, style, color Sets the border options. Style common values: none, dotted, dashed, solid, double. (Items can be set sepearately.)
border-bottom: width, style, color Sets only the bottom border.
border-collapse:collapse Collapses table and cell borders into a single border line instead of having both table cell borders.
caption-side: value Used with the caption tag to specify location of the caption. Common values: top (default) or bottom.
text-align: value Used to adjust text alignment in th or td. Common values: left, right, center or justify.
vertical-align: value Used to adjust vertical text alignment in th or td. Common values: baseline, sub (subscript for baseline), super (superscript for baseline), top, text-top, middle, bottom or text-bottom.
padding: Sets space around the inside of the element. (See div)
element:hover {background-color: value Highlight element (such as tr) when cursor is over the element. Specify the background-color.
overflow-x: auto Used in a div containing the table. Adds a scroll lbar if table is too wide.
table-layout: value Sets table layout. Common values: auto (the default), fixed faster because widths are set by the first row.

The CSS code used for tables in this page
Tag	Centered aqua tables	This table
<table>	border-collapse: collapse; border: 1px solid black; background-color: aqua; margin-left: auto; margin-right: auto;	border: 1px solid red; width: 650px
<tr>	tr:hover {background-color: pink}	(white rows) color: black; background-color: white (light gray rows) color: blue; background-color: #CCCCCC also: tr:hover {background-color: pink}
<th>	(same as for <td>)	color: white; background-color: #606060
<td>	border: 1px solid black; padding: 5px	border: 1px solid red;
<caption>		caption-side: bottom

Further explanation and examples: https://www.w3schools.com/css/css_table.asp.

CSS measurement units

Unit	Description	Unit	Description	Unit	Description
%	percentage	in	inch	cm	centimeter
mm	millimeter	em	current font size	ex	height of x
pt	point	pc	pica (12 pts)	px	pixel

Changing hyperlink colors

a:link, a:visited, a:hover, a:active The order is important! Example:
```
  a:link {color:green}
  a:visited {color:maroon}
  a:hover {color:black}
  a:active {color:blue}
```
The "with style" version of this page uses the above statements. See the links at the end of this page to see how they work.

Three ways to use CSS

style tag: Example:

<style  type="text/css">
    body {background-color: #ffffcc;
        ... }
    p.center {text-align:center}
    .special {color: blue}
</style>
...
<p class="special">

in-line: Example:

<body style="background-color: #ffffcc"; ... >
<p style="text-align:center">

external: Example:

<link rel="stylesheet" type="text/css" href="filename.css">

One can specify different style sheets for different types of devices:

<link rel="stylesheet" type="text/css" media="all" href="filename_a.css">
<link rel="stylesheet" type="text/css" media="print" href="filename_p.css">
<link rel="stylesheet" type="text/css" media="screen" href="filename_s.css">

The first stylesheet apples to all devices. The second applies when the page is printed, and the last applies to screens (computer monitors). There are several additional media types. One specify additional qualifiers:

<link rel="stylesheet" type="text/css" 
      media="screen and (max-width: 500px)"
      href="CommonCSS_narrow.css">

says to apply the specified style sheet to screen devices or to screens that are 500 pixels or less wide. (Use "," for "or".) For this page, the "all" css says to color the text black. It is over ridden by the "screen" css which says to color text "brown". But on a narrow screen, "narrow" css says to color it green. You can check it out by making the browser window narrow. Do an internet search for "CSS media" for additional details.

This page uses the above 4 stylesheet link statements using the style sheets CommonCSS_all.css, CommonCSS_print.css, CommonCSS_screen.css, and CommonCSS_narrow.css. The first contains all the common CSS.

View this page using CSS
View this page without any CSS
You may want to view the source file to see the CSS used in this file.

These files are exactly the same except the <style> tags in the head section was removed in the "without" page.

Maintained by brinkje@plu.edu
Updated May 19, 2020.