This page contains standard HTML elements and possible styling for them. All of these effects are done just using CSS, and can be coded to work on any site. Elements used frequently in a design should be included in a template PSD file to be used for reference by the developers.
Here is a list of compatible web-rendering fonts that will display properly on Windows and Mac. In cases where a Windows and Mac font are different but look extremely close they are both included with a / between them (i.e. Windows Version / Mac Version).
Arial — Bold Version, Italic Version
Courier New — Bold Version, Italic Version
Georgia — Bold Version, Italic Version
Lucida Console / Monaco — Bold Version, Italic Version
Lucida Sans Unicode / Lucida Grande — Bold Version, Italic Version
Palatino Linotype / Book Antiqua — Bold Version, Italic Version
Tahoma / Geneva — Bold Version, Italic Version
Times New Roman / Times — Bold Version, Italic Version
Trebuchet MS — Bold Version, Italic Version
Verdana — Bold Version, Italic Version
Headings are generally used to clarify content sections and sub-sections. They can be any typeface, have any border property, and be any color.
A visited link is important for usability in order to visually show viewers where they have previously been on a site. Links can be different colors, have different underline borders and change color and border when the mouse is over the link.
Normal Link – normal link styling
Visited Link – visited link styling
Hover Link – hover link styling
Normal Link – normal link styling
Visited Link – visited link styling
Hover Link – hover link styling
Lists used to display bulleted content can be styled using different methods as well.
Borders can be applied to nearly any HTML element. Further, different border types can be applied to different sides of an element. Allowing for pretty neat border-only HTML image thumbnails.
solid borders
dotted borders
dashed borders
thumbnail example
Tables used to hold data can be styled using borders, background colors, and small images.
| Header | Second Column | Third Column |
|---|---|---|
| Data | Data | Data |
| Data | Data | Data |
| Data | Data | Data |
| Data | Data | Data |
| Data | Data | Data |
| Header | Second Column | Third Column |
|---|---|---|
| Data | Data | Data |
| Data | Data | Data |
| Data | Data | Data |
| Data | Data | Data |
| Data | Data | Data |
| Header | Second Column | Third Column |
|---|---|---|
| Data | Data | Data |
| Data | Data | Data |
| Data | Data | Data |
| Data | Data | Data |
| Data | Data | Data |