CSS provides a way to add style and formatting to HTML documents and allows HTML to concentrate on its intended purpose of structuring content. HTML Elements that modify appearance should be avoided, as they will not be present in future versions of HTML and CSS replacements should be used instead. If you use HTML elements as a way of accomplishing style instead of their intended purpose, the meaning of your html document may be altered when delivered in a different medium, such as a screen reader. With CSS, you can maintain the structure and formatting of your html documents separate. This creates HTML documents that are easier to edit and are more universally accessible.
<tag style="property: value; property:
value; property: value;"></tag> <p style="color: red; font-weight:
bold;">text goes here </p>selector { property: value; property: value;
property: value; } <head>
<style type="text/css">
<!--
h1 { color: red ; font-family: tahoma;}
-->
</style> <link rel="stylesheet" href="location" type="text/css"> <link rel="stylesheet" href="http://reach.ucf.edu/styles/global.css" type="text/css">selector { property: value; }
selector { property: value; property: value; property: value;}
All specified properties would be applied to the specified selector.
selector, selector, selector { property: value; property: value; property:
value;}
All specified properties would be applied to each of the specified selector.
| Syntax | Definition | CSS Example | HTML Example |
|---|---|---|---|
tag {property:value;} |
Type (tag): Applied to content inside specified tag. | h1 {color:blue;} |
<h1>this is blue</h1> |
tag1 tag2{property:value;} |
Contextual or Descendant: Applied to content inside tag2 when its somewhere inside of tag1. | h1 i {color: blue;} |
<h1>some text <i>this text italic and blue</i></h1> |
.classname {property:value;} |
Class: Applied to contents of tag with given class attribute. | .red {color: red;} |
<p class="red">this text red</p> |
#id {property:value;} |
ID: Applied to contents of tag with given ID attribute. | #nav {font-weight:bold;} |
<div id="nav">text</div> |
a:link {property:value;} |
Anchor Pseudo-class: style of unvisited links. | a:link {color:blue;} |
<a href="url">text</a> |
a:visited {property:value;} |
Anchor Pseudo-class: styleof visited links. | a:visited {color:purple;} |
<a href="url">text</a> |
a:active {property:value;} |
Anchor Pseudo-class: style of active links, i.e. between pressing the mouse and releasing it. | a:active {color:red;} |
<a href="url">text</a> |
a:hover {property:value;} |
Anchor Pseudo-class: style viewable when you mouse-over a link. | a:hover {color:red;} |
<a href="url">text</a> |
The HTML tags and attributes listed below are some of the most commonly used HTML style elements. The majority of these are Deprecated (D). These should be avoided and a css alternative used instead.
| Don't Use | Alternate HTML Tag(s) | Alternate CSS Property |
|---|---|---|
<b> |
<strong> |
font-weight: value; |
<body alink=""> |
none | a:active { color: value; } |
<body link=""> |
none | a:link { color: value; } |
<body text=""> |
<tag style="color: value;"> |
color: value; |
<body vlink=""> |
none | a:visited { color: value; } |
<center> |
<tag style="text-align: center;"> |
text-align: center; |
<font color=""> |
<tag style="color: value;"> |
color: value; |
<font face=""> |
<tag style="font-family: value;"> |
font-family: value; |
<font size=""> |
<tag style="font-size: value;"> |
font-size: value; |
<i> |
<em> to italize emphasized text |
font-style: value; |
<u> |
don't use (may be confused for a link) | don't use |
align |
<tag style="text-align: value;"> |
text-align: value; |
background, bgcolor |
<tag style="background-color: value;"> |
background-color: value; |
border |
<tag style="border-width: value;"> |
border-width: value; |
valign |
<tag style="vertical-align: value;"> |
vertical-align: value; |
For more detailed CSS information and tutorials, visit one of the sites below.
Note: These links will open in a new window.