Home arrow Style-Sheets arrow Page 2 - What is CSS?

CSS Syntax - Style Sheets

Style sheets are a very powerful tool for the Web site developer. They give you the chance to be completely consistent with the look and feel of your pages, while giving you much more control over the layout and design than straight HTML ever did.

TABLE OF CONTENTS:
  1. What is CSS?
  2. CSS Syntax
  3. Placement of CSS Elements
  4. Cascading - What Does it Mean?
  5. Your First Style Sheet
By: Marc Knuttel
Rating: starstarstarstarstar / 93
May 17, 2004

print this article
SEARCH DEV SHED

TOOLS YOU CAN USE

advertisement

Style rules are comprised of two things, the selector and the declaration.

 selector - The HTML tag that will be affected by the rule

 declaration - The specific style calls that will affect the selector

The complete syntax for a style rule is:

selector {property : value;}

So, to set all bold text to be the color red, you would write:

b {color: red;}

One of the things that makes CSS so easy to use, is that you can group together components that you would like to have the same style. For example, if you wanted all the H1, H2 and bold text red, you could write:

b {color: red;}
h1 {color: red;}
h2 {color: red;}

But with grouping, you put them all on the same line:

b, h1, h2 {color: red;}

You can also group together rules (separated by a semi-colon (;) ). For example, to make all h3 text blue and Arial font, you would write:

h3 {
font-family: Arial;
color: blue;
}

By convention, we put separate rules on separate lines, but this is not required.



 
 
>>> More Style-Sheets Articles          >>> More By Marc Knuttel
 

blog comments powered by Disqus
escort Bursa Bursa escort Antalya eskort
   

STYLE-SHEETS ARTICLES

- What is CSS?
- The Power of CSS
- Understanding Style Sheets (part 2)
- Understanding Style Sheets (Part 1)

Developer Shed Affiliates

 


Dev Shed Tutorial Topics: