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

What is CSS?


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.

Author Info:
By: Marc Knuttel
Rating: 4 stars4 stars4 stars4 stars4 stars / 13
May 17, 2004
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

print this article
SEARCH DEVARTICLES

TOOLS YOU CAN USE

advertisement
What is CSS? - CSS Syntax
(Page 2 of 5 )

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.


blog comments powered by Disqus
STYLE SHEETS ARTICLES

- CSS Combinators: Working with Child Combinat...
- CSS Combinators: Using General Siblings
- Intro to CSS Combinators
- CSS Semicircles and Web Page Headers
- Drawing Circular Shapes with CSS3 and Border...
- More CSS Pagination Link Templates
- CSS Pagination Links
- Animated CSS3 Image Gallery: Advanced Transi...
- CSS3 Animated Image Gallery: Transitions
- CSS3 Properties: Fixed Heights with box-sizi...
- CSS3 Properties: Altering Strokes and 3D Eff...
- CSS3 Properties: Text-Stroke
- CSS3 Transitions: Width and Height Properties
- Creating a Drop Down Menu in CSS3
- Intro to CSS Transitions

Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Weekly Newsletter
 
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 
Support 



© 2003-2012 by Developer Shed. All rights reserved. DS Cluster 8 - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials