Easiest Way To Learn HTML5 and CSS3 Coding

Lesson 8 - Completing External Style Rule in CSS3

Styling of tables is a little more complex than the rest of the elements because we may like to color and align each row of a table differently and may like to highlight the row where the user may put his/her cursor (hover over).

Open the file, “global family stylesheet.css.” Write the following rules for the selector table following the style rules for ul,ol:

/* Stylesheet for Table Font */

Table.table2{color:black;font:10pt San-Serif, Arial, Helvetica;

}

/* Stylesheet for Table */

Table.table2 tr:nth-child(odd){background-color:#cef;

}

/* Stylesheet for Highlight table row on hover */

Table.table2 tr:hover{background-color:yellow; cursor:default;

}

/* Align Table Columns Differently */

Table.table2 td:nth-child(even){text-align:left;

}

Save the file, “global family stylesheet.css” and open the file, “global family.html.” If you wrote everything correctly, your table should look like as shown below:

Author	Quote	Image
Desmond Tutu	You don't choose your family. They are God's gift to you, as you are to them.	Image place holder
Richard Bach	The bond that links your true family is not one of blood, but of respect and joy in each other's life.	Image place holder
Steve Jobs	Sometimes life hits you in the head with a brick. Don't lose faith.	Image place holder
Mark Twain	Good friends, good books and a sleepy conscience: this is the ideal life.	Image place holder

1. Hovered the mouse on any row, it will turn yellow
2. We decided to make alternate row's background color and blue
3. We made contents in rows aligned center and left alternatively

Explanation

1. We created a table with its content in font size 10pt and font type San-Serif. See below:

   /* Stylesheet for Table Font */

   table.table2{color:black;font:10pt San-Serif, Arial, Helvetica; }

2. We colored the odd rows (beginning with row 1) in blue by writing the following:

   /* Stylesheet for Table */

   table.table2 tr:nth-child(odd){background-color:#cef; }

3. We created yellow hover on whatever row the mouse cursor will go (touch) by writing the following:

   /* Stylesheet for Highlight table row on hover */

   table.table2 tr:hover{ background-color:yellow; cursor:default }

4. We made the contents in even rows (starting with row 2) aligned left.

   table.table2 td:nth-child(even){text-align:left; }

You may be wondering what are nth child and hover? Not to worry, we will clear that in Section 2. So, let us go there.

Before we talk about nth child and hover, I would like to familiarize you with related terms. Do not worry, it will all come together at the end of this section. Let us start.

Class

A style class is a style rule that you can assign to many elements on a page. In a style rule, it is mandatory to put a dot (.) before the name of the selector to indicate you're creating a style class, like this:

.classname{ property:value; ... }

The only real difference is that the selector starts with a dot (.) rather than a letter or a symbol. After the dot, you have to replace classname with a name of your own choosing. The name must start with a letter, and it cannot contain blank spaces.

Suppose you want to highlight several passages of text on a page, so you want to use a style class, because you can apply a class to any number of elements on a page. You decide to name the class hilite because it's easy to remember, easy to type, and reminds you of the purpose of the class. So in your style sheet, the class looks like this:

/* Highlight any span of text */

.hilite{ background-color:yellow; }

Once you've put the style rule into your style sheet, and you've saved the style sheet, you can use the style rule in any page that links to the style sheet.

For example, suppose in the paragraph that we used in our proposed website, “We are living in an era of quantum change—leaving behind old patterns of being and institutions that no longer serve our needs or support our emerging consciousness. At this pivotal time, in humanity’s evolution, we need courage, commitment, and a supportive community of like-hearted souls to guide the way in transforming society,”

we want to highlight the portion, “At this pivotal time,” All we have to do is write the following:

<span class=hilite>At this pivotal time,</span>.

Once you save the file, “global family stylesheet.css” and open the file, “global family.html,” it will look like the following:

At this pivotal time,

Once you see that, you may keep or delete the class rule from your CSS file. The idea was to make you familiar with this important aspect of the Internet programming.

Parent and Child

Let us get familiar with the below terms:

• Ancestor: An element that contains other elements. For example, the body element is the ancestor to all other visible elements on the page, because all other visible elements on the page are contained within the <body>...</body> tags that define the body element.
• Descendant: Any element that's contained within some other element. For example, all visible elements on a Web page are descendants of the body element, because they're all contained within the <body>...</body> tags that define the body element.

Three other words you use to describe how elements are related include parent, child, and sibling (but no grandparents, cousins, aunts, uncles, in-laws, or other words).

1. Parent: An ancestor element that's exactly one level above its descendant.
2. Child: A descendent element that's exactly one level below its ancestor.
3. Siblings: Elements that share the same parent.

So in summary, in a Web page, any element that contains other elements is an ancestor to all the elements it contains. All the elements within that element's opening and closing tags are its descendants. Parents, children, and siblings are specific types of ancestor-descendant relationships and apply only when there's exactly one level of difference between the parent and the child.

The nth-Child

The nth-child pseudo-class can be used with any element type. However, but it's mostly useful for tables. Remember, each row in a table's row is a child of the table in which it's contained and each cell is a child of a row in which it's contained. The syntax for this is as follows:

elementType:nth-child(value){ property:value; ... }

The value accepts two keywords, either odd or even. The odd value applies the styling to odd-numbered children (1, 3, 5, 7, and so forth). Even applies the style to even-numbered children (2, 4, 6, 8, and so forth). For example, suppose you add the following style rule to the style rules we've already created for our sample table.

/* Stylesheet for Table */

tr:nth-child(odd){background-color:#cef; }

The above code assigns odd-numbered table rows a blue background.

If you prefer, you could change the word even to odd like this.

/* Color the background of every other table row */

tr:nth-child(even){ background-color:#cef; }

In a Web browser, that applies the styling to rows in odd-numbered positions (rows 1, 3, and 5).

Styling Columns

You can also use the nth-child to style individual columns of a table that have an equal number of cells per row. That's because each cell is a child of a row. In our case, each row starts with a <tr> tag, contains three <td>...</td> tag pairs , and ends with a </tr> tag. In our syntax we wrote the following:

/* Align Table columns differently */

td:nth-child(2){ text-align:left; }

The above allowed the contents in all the even columns (starting with column 2) to align left.

If you look at the image of the web page we are trying to design, the only thing left to do is create a footer to the page. We will do that in Section 3. Let us go there now.

Open the file, “global family stylesheet.css” and write the following footer styling rule below styling rules for table:

/* Stylesheet for Footer */

/* Font Size, line-heigh, and family */

.footer{height: 35px; padding: 10px; background-color: teal; border-bottom-left-radius: 18px; border-bottom-right-radius: 18px;

}

/* Styling for table in footer */

table.table3{ width: 70%; margin: 5px auto; color:white; background-position: 10px center; font:15px Sans-Serif, Gadget, Fantasy;

}

Save the file, “global family stylesheet.css” and open the html file, “global family.html.’ If you wrote everything correctly, you should see a nice footer as shown below:

Explanation

1. We previously created a table for footer in html5 in Lesson 3, Section 3. Now, we are simply styling that table in CSS3.
2. We gave the footer a height value of 35px and a padding of 5px (You should play with those numbers and see the changes). we gave a padding of 5px. We decided to give value “teal” to property, “background-color.” We gave values to properties, “border-bottom-left-radius” and “border-bottom-right-radius” as 18px.

   /* ==== Styling for footer */

   footer { height: 35px; padding: 5px; background-color: teal; border-bottom-left-radius: 18px; border-bottom-right-radius: 18px; }

3. And lastly, we gave properties and values to selector, “table” as width: 70%; margin: 5px auto; color:#4c2e16

   /* Styling for table in footer */

   table { width: 70%; margin: 5px auto; color:white; }

Just One More Thing…. border around the page

Personally, I am not a big fan of putting my web page inside any kind of border because it shrinks the content and also changes the styling of the content. It is your choice. In case you like the border, let me tell you how to do that. Open the file, “global family.html” and write the following below the body tag <body>:

Back to top of page