Create a Website
HTML
Dreamweaver
CSS Tutorial
JavaScript
FREE Hosting!
With every domain name
you register at DotEasy
you get FREE (no-ad)
one year hosting.
PLUS you get:
  • FREE Website Builder
  • FREE Blog
  • FREE Forum
  • FREE Photo Album
  • FREE Email Accounts
Get your FREE hosting today!
Home > CSS Tutorial
$0 Web Hosting

CSS has a simple syntax and uses a number of English keywords to specify the names of various style properties.

A style sheet consists of a list of rules. Each rule or rule-set consists of one or more selectors and a declaration block. A declaration-block consists of a list of semicolon-separated declarations in braces. Each declaration consist of a property, a colon (:), a value and then a semi-colon (;).

The Code

selector {
property: value;
property: value;
}
 

Selectors are used to declare which elements a style applies to. Each selector can have multiple properties and each property within that selector can have independent values. If an individual value contains more than one work you surround it with quotation marks.

The Code

body {
background: #000000;
font-family: “Times New Roman” Arial, Serif;
}

When you nest one element inside another, the nested element will inherit the properties assigned to the containing element. Unless you modify the inner elements values independently.

For example, a font declared in the body will be inherited by all text in the file no matter the containing element, unless you declare another font for a specific nested element.

The Code

body {
font-family: Arial, Serif;
}
 

Now all text within the (X)HTML file will be set to Arial. If you want to style certain text with another font, like an h1 or a paragraph, then you will need to do the following:

The Code

h1 {font-family: “Times New Roman”, sans-serif;}
p {font-family: Tahoma, serif;}
 

Now all <h1> tags within the file will be set to Times New Roman and all <p> tags are set to Tahoma, leaving text within other elements unchanged from the body declaration of Arial.

Combining Selectors

You can combine elements within one selector, for example,

The Code

h1, h2, h3, h4, h5, h6 {
color: #FF0000;
font-family: Georgia, sans-serif;
}
 

Each element is separated by a comma. The final result of the above code sets all headers to red and to the specific font. If the user does not have the first font declared, it will go to another sans-serif font installed on their browser.

Comment Tags

Comments can be used to explain why you added certain selectors within your css file. This is to help others who may see your file, or to help you remember what you were thinking at a later date. You can add comments that will be ignored by browsers in the following manner.

The Code

/* This is a comment */

The Comment tag begins with a / (forward slash) and then an * (asterisks). The closing tag is just backward from the opening tag, * (asterisks) then the / (forward slash).

Enjoy this tutorial?

1. Link to this page(copy/paste into your own website or blog):
2. Add this page to your favorite social bookmarks sites:
3. Add this page as your favorites. (Press Ctrl+D)