There are multiple ways of adding styles for the elements of your web pages. No matter which way you choose to style the elements on your page, you must learn how to write the styles in the proper manner. When writing these styles in a style sheet, you must use a plain text editor. Do not use word processing softeare to write the styles, as these programs add addition characters to the text. It must be pure text.

Visit the CSS Basic article of CSS Basics: How to add CSS styles to your web pages for how and where to add the styles.

The Syntax for Styles

The syntax for adding styles is the same for inline styleing, in the <style> section in the <head> of your web page or in an external style sheet. You need to tell the browser which HTML element to apply the style to, add an opening curly bracket "{", then add each property with its value separated with a semi-colon ";" followed by a closing curly bracket "}".

Example:

h1 {
    font-family: "Courier New", "Courier New", monospace;
    color: #0000dd;
}

In the above example, the style is targeting all <h1> heading tags within the HTML document. It is specifying a font-family to use and the hexadecimal color of #0000dd.

You can use the method shown above for stating the styles or you can put the style all in one line. Using the above method makes it easier to view the styles and separates them for easier editing. On the other hand, if your styling is extensive, this can create a very lengthy style sheet.

Some web developers prefer to place the styles all on one line. This will decrease the number of lines within the style sheet considerably.

Example:

h1 {font-family: "Courier New", "Courier New", monospace; color: #0000dd;}

If you have only one property, or for the last property of several, you do not have to include the semi-colon at the end. It is best practice to add the semi-colon, in the case you come back later to add an additional style.


Targeting specific HTML elements

When targeting any HTML elemnt itself, such as <body>, <aside>, <h1>, <h2>, <p>, <ul>, etc. you simply use the tag without the arrow brackets. For several elements that will have the same styling, you separate the elements with a comma. For specific child elements, you use the parent element followed by the child, or the ancestor element followed by the descendant. Visit the CSS Rules: Document Tree article for more about the family relationship between parent and child elements

Example:

body {"Lucida Sans Unicode", "Lucida Grande", sans-serif;}
h1, h2, h3 {color: #44AB55;}
ul li a {text-decoration: none;}
td {background: rgb(200,200,245;}


Targeting elements of a specific class

Class names are assigned to elements of the HTML document by stating class="" as in in the following examples:

Example:

<div class="largequote"></div>
<h1 class="pagetitle"></h1>
<ul class="nodot"></ul>

When targeting elements with a class in your stylesheet you place a period before the class name.

Example:

.largequote {font-family: "Impact", "Impact5", "Charcoal6", sans-serif; }
.pagetitle {text-decoration: underline;}
.nodot {list-style: none;}

A class name can be assigned to different elements. For instance, you could have a <div class="famousquote"> and <h1 class="famousquote">. If you wish to target only the <div> with a certain style, you must give the browser more specific information, such as in the following example:

Example:

div.famousquote {background: #CBCB7A;}

This example will add a light blueish grey background for any <div> tag with that class, but will not add it to the <h1 class="famousquote> tags.

See the article CSS Rules: Pattern Matching for more examples on tageting specific HTML elements for styling.


Targeting an element with an id attribute

In HTML an id is often assigned to a unique element that is not used repeatedly throughout the page. This way is it easy to target just that one element for JavaScript functions and for anchor tags. An exampe of an element with an id assigned to it would be:

Example:

<h1 id="pageheader">First Heading</h1>
<div id="footer">Bottom of the page</div>

To target these elements with an id, you use the pound sign # in your style sheet. You can use the # sign followed immediately by the id or you can append it to the selector for the element.

Example:

#pageheader {color: #0044ff;}
div#footer {width: 100%; height: 30px;}