Home arrow Style Sheets arrow Page 6 - Learn CSS, part 1
STYLE SHEETS

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
TABLE OF CONTENTS:
  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
SEARCH DEVARTICLES

Learn CSS, part 1 - Groups of Selectors
(Page 6 of 7 )

As we said, CSS is a powerful but simple language, and you will be amazed with what you can do with it. Let's extend our paragraph example a little more. Suppose that we also need to apply an Arial font with a red color to hyperlink references in our website. We may write another CSS rule like this:

a
{
font-family: Arial, sans-serif;
color: red;
}

so the Paragraph.css file has two CSS rules:

p
{
font-family: Arial, sans-serif;
color: red;
}

a
{
font-family: Arial, sans-serif;
color: red;
}

Now you can add a hyperlink reference to your HTML page:

<?xml version='1.0' encoding='UTF-8'?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<link rel="stylesheet" href="paragraph.css" type="text/css">
<title>The IT Field</title>
</head>
<body>
<p>
Information Technology (IT) has been the most famous and attractive field in the last
20 years and many students choose to study Computer Science and Information System which qualify
them to work as Programmers, Developers, Database Administrators and Network Engineers.
</p>
To read more about IT please<a href="http://www.it.com">Click Here</a>
</body>
</html>

There's a better way to achieve the same effect: group the selectors. Modify the CSS file to be as follows:

p, a
{
font-family: Arial, sans-serif;
color: red;
}

Reopen the web page and you will have the same effect. But this grouping technique is better because you don't write a separate rule and declarations for a selector. You just put in as many selectors as you want and separate each of them using a comma.


blog comments powered by Disqus
STYLE SHEETS ARTICLES

- 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 
Support 

Developer Shed Affiliates

 




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