Home arrow Style Sheets arrow Page 5 - Learn CSS, part 1

Learn CSS, part 1

While HTML lets you do many things, Cascading Style Sheets (CSS) let you do even more. In particular, they can save you a great deal of work when you want to make changes to the appearance of a Web page or even an entire website. This first article in a series covering CSS will explain where the CSS specification comes from and show you just a few of the ways you can use CSS.

Author Info:
By: Michael Youssef
Rating: 5 stars5 stars5 stars5 stars5 stars / 32
May 16, 2005
  1. · Learn CSS, part 1
  2. · CSS Specifications and Implementations
  3. · Browsers we are going to use
  4. · The HTML vs. CSS example
  5. · CSS rules and selectors
  6. · Groups of Selectors
  7. · Validating your CSS Documents

print this article

Learn CSS, part 1 - CSS rules and selectors
(Page 5 of 7 )

As we said before, CSS is a styling language for Web pages. This means that CSS styles mark up elements such as <p>, <h1>, <a> and pretty much all the other elements. In CSS we call the element that we want to style a selector, like the paragraph selector from the above example.

font-family: Arial, sans-serif;
color: red;

We select each and every <p> element in the HTML page to have an Arial font with a red color. The term selector makes sense because you select which part of the page (which element or which elements as we will see shortly) will receive the application of specific styles. So the selector p refers to the HTML element <p>, and so on. You define the actual styling using CSS properties, such as the font-family and color properties. There are many properties in CSS, and we are going to take a look at most (if not all) of them. To set a value to a given property, you write the property followed by a colon, then the value, which must be followed by a semicolon, as shown with the font-family property below:

font-family: Arial, sans-serif;

This combination of property, colon, value and semicolon is called a CSS declaration. The combination of the selector (the p) and the declaration is called a CSS rule, which begins with a selector (or a group of selectors as we will discuss shortly), then an opening curly brace "{" followed by as many CSS declarations as you want, followed by a closing curly brace "}". CSS documents consist of CSS rules, which define what styling properties go with what selectors. We will discuss selectors in detail after a few articles in this series, but for now you need to understand that selectors are not just <p>, <a>, <body> and other HTML elements. You can define your own selectors and apply them using the id or class attributes.

blog comments powered by Disqus

- CSS Padding Overview
- CSS: Margins Overview
- Top CSS3 Button Tutorials
- More Top CSS3 Tutorials for Animation and Im...
- CSS Mega Menus: Adding Extra Sections
- CSS Mega Menus
- CSS3 Accordian Menu: Horizontally Display Hy...
- 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...

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 

Developer Shed Affiliates


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