Using CSS to set font properties on multiple tables

Question

In HTML, if we want to use CSS to set font properties of font in all tables, we use something like this:

<style>
table {
    width: 10%;
    border: 0;
    font-size:1;
}
</style>

My question is: What if I want different font settings for different tables? For example, I have 3 types of tables. Some of which, I want fonts to be size 8, some table to be size 6..etc.

This way won't work (This is just an illustration what I wanted to do):

<style>
table1 {
    width: 10%;
    border: 0;
    font-size:6;
}
table2 {
    width: 2%;
    border: 1;
    font-size:8;
}
table3 {
    border: 2;
    font-size:2;
}
</style>

Hope you understand what I am trying to do. I just want several different CSS table definitions.

Answer 1

You need to set them to classes or IDs.
CSS:

.table1 {
    width: 10%;
    border: 0;
    font-size:6;
}
.table2 { 
    width: 2%;
    border: 1;
    font-size:8;
}
#table3 {
    border: 2;
    font-size:2;
}

HTML:

<table class="table1"></table>

<table class="table2"></table>

<table id="table3"></table>