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

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

Commonly used with ordered and unordered lists

Commonly used with img and div tags

Used to make the text wrap around the image or division

Centering items

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

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:

The CSS code used for tables in this page
TagCentered aqua tablesThis 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

UnitDescription UnitDescription  UnitDescription
%percentageininchcmcentimeter
mmmillimeteremcurrent font sizeexheight of x
ptpointpcpica (12 pts)pxpixel

Changing hyperlink colors


Three ways to use CSS

  1. style tag: Example:
    <style  type="text/css">
        body {background-color: #ffffcc;
            ... }
        p.center {text-align:center}
        .special {color: blue}
    </style>
    ...
    <p class="special">   
  2. in-line: Example:
    <body style="background-color: #ffffcc"; ... >
    <p style="text-align:center">
  3. 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.

Valid CSS!