Easiest Way To Learn HTML5 and CSS3 Coding

Lesson 8 - Completing External Style Rule in CSS3

Section 1- Nth Child and Hover

Styling table is a little more complex than the rest because we may like to color and align each row 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:

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:

AuthorQuoteImage
Desmond TutuYou don't choose your family. They are God's gift to you, as you are to them.Image place holder
Richard BachThe 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 JobsSometimes life hits you in the head with a brick. Don't lose faith.Image place holder
Mark TwainGood 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.

Section 2- Class, Parent and Child, Nth Child and Hover

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:

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.

Section 3- Styling Footer

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

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

Save the file, “global family.html” and open the file, “global family stylesheet.css.” Write the following at the bottom of the program:

/* Style rule for the wrapper div */

#wrapper { width: 90%; min-width: 600px; max-width: 2000px; margin: 1em auto; background-color: #f9f0e6; border: solid 2px #4c2e16;

border-radius: 20px; box-shadow: 8px 8px 8px black; }

Save the file, “global family stylesheet.css.” and open the html fie, “global family.html.” You will see a border around the article of the page. It is up to you whether you would like to have a border around the article of the page or not.

We covered div and wrapper in Lesson 4, Section 1. You should revisit that to refresh your memory.

Congratulations! You just learned to design web page using html5 and CSS3. You can gain further knowledge by going through next Lessons or stop here and use the template that you created here to make web pages of your choosing. This is all dependent on your interest and need. In any case, I recommend that you go through Further Learning to learn and expand your knowledge at your own pace. In the meantime, you should try to make the web page we designed on your own over and over again and take the help of the cheat sheet on the next page for help. It will take you between 30 to 60 hours of practice to feel comfortable in programming on your own. So, do not get intimidated or overwhelmed. I guarantee that it will come to you. Thanks for attending this class. All the best!