CSS: Beginner question

<style>
body {
    background-color: #d0e4fe;
}

h1 {
    color: orange;
    text-align: center;
}

p {
    font-family: "Times New Roman";
    font-size: 20px;
}
</style>

Open in new window


I was trying to learn CSS at w3schools.com. I am seeing that normal style tags look like the above. I then came across a CSS file in one of my company's projects that looks like this:

<style>
.tableBorder td, .grid td
{
   vertical-align: top;
   padding: 2px;
   border: 1px solid #ccc
}
</style>

Questions:
1) Why does it begin with a dot? (.tableBorder). Why not just tableBorder?
2) When it comes to naming the style, doe sit matter if you type .tableBorder vs. tableBorder (without the dot) -- Is there a syntax you're suppose to follow or is it loose?
3) What is the td after .tableBorder? I know it stands for "table data", but why is it there. Is that short-hand so you don't have to create a duplicate style block for td as well?
4) Why is there a comma after the td, followed by .grid?
LVL 8
pzozulkaAsked:
Who is Participating?
 
Dave BaldwinFixer of ProblemsCommented:
The dot '.' means that tableBorder and grid are classes which can be applied to many elements.  .tableBorder td means that it only applies to <td> elements in those classes.  The comma means that it is a list of items that those descriptions are used for.

A '#' instead of a dot '.' makes it an 'id' and 'id's are supposed to be unique on a page so that javascript can find the correct element.  Any HTML element like <td> and <p> can be listed in the CSS without a '.' or '#' in front of it.  The CSS will then apply to all <td>s or <p>s.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.