Id Selectors in CSS

This is intended for beginners and demonstrates very basic CSS principles.



CSS is by no means my specialty but I will cover a few basic elements that can really make a difference.  Since CSS and style sheets are the topic of several books and I am not prepared to write a book here I will try cover and illustrate particular topics.  Today’s topic is adding some style to tables using ID selectors.  It is safe to assume there are several different types of tables on a site or system so I want to be able to control each table's style independently.  So let’s begin.

First our file with the tables and our style sheet:
sample_page.html
sample.css

Now lets step through and start explaining some basics.

Notice the <table id="report" for the first table. The corresponds to all the #report in the stylesheet. Now I can modify the tag properties if I want to using the id selector.

#report tr { (That would change all the <tr> tags)

#report .odd { (this controls the class="odd" property of the <td> tag to make an alternating row color background.

Now i can make a new parent for a different type of table. I use the list_table id to tell me its a list of something. The same applies here in that I can manage tags and properties by referencing the #list_table parent.

Now I have shown something very basic here. Some books and tutorials are out there will help you make some very professional designs but this will hopefully get you started. I put a few on here that I like to spend time reading through.

A List Apart (Website)

A great book for learning CSS. I bought it and recommend it.


Do a search for free css templates. They are probably not that great and professional looking but they will help you see how to build style sheets of your own. You can even modify just the colors and make minor improvements sometimes and get a great outcome.

---

Brian J. has been involved in web design since 1997. He is the founder of True Vision Computer Services, Inc. His recent focus has been on web applications and information systems development.