Easiest Way To Learn HTML5 and CSS3 Coding

Lesson 7 - External Style Rule

Section 1- Linking CSS file to HTML file

This is the last style rule that you will learn. An external style rule applies to all the pages of a website. You can still change the style of a given tag by using Inline Style Rule, if you have to. This is where you will learn to create Cascading Style Sheets (CSS) and how to link that style sheet to the html file. This is the most widely used style rule because the programmers rarely write just one page of programming. A web site consists of many pages.

External Style Rules make it easier to make site-wide stylistic changes. Moreover, there is always continuous improvements and updates to be made. With an external style sheet, all one has to do is update the CSS stylesheet to make changes or updates. You don't have to update each individual page one at a time.

Let us start making an external style sheet using CSS3 language. After creating CSS file, we will link that file to the html file that you created earlier. External Style will not work without linking the CSS file to the HTML file.

Let us start. Create a new file named “global family stylesheet.css” inside the folder global family. Remember your html file is also stored in the same folder. Make sure to use the suffix .css and not html.

We will work on global family stylesheet.css in the next section. Let us first link “global family stylesheet.css” file to “global family.html” file.

Open the file, global family.html
Now, insert the link for the css file by typing the following just below <title></title> tags:
<link href="global family stylesheet.css" rel="Stylesheet" type="text/css" />
Link is an open tag so there is no need to put any closing tag at the end of the syntax.

Explanation

We created an open tag for linking:
<link href="global family stylesheet.css" rel="Stylesheet" type="text/css" />
We provided a reference attribute by writing “href”
We then followed the html rule by typing = and wrote the CSS file name, global family stylesheet.css (that is the file that we want to link to the global family.html file).
We wrote rel=”Stylesheet” to follow the ADA requirement.
Lastly, we wrote the type by writing type=”text/css” />

Before we go any further, let us understand the basic structure of a web page. Let us go to Section 2.

Section 2- Typical Structure of a Webpage

If you look at web pages, you will typically find it divided in five sections. It is not a rule. As a matter of fact, many web pages these days do not include sidebars <aside>. That is a matter of need and preference.

Below is a picture of a typical web page divided in Header, Navigation Bars, Article (main body of the page), Sidebar <aside> and Footer. Their html5 tags are as follows:

<header></header>
<nav></nav>
<article></article>
<aside></aside>
<footer></footer>

See the image below:

Section 3- Writing External Style Rule in CSS and Inserting Comment

While using External Style Rules, we transfer all the styling to a CSS file. As a result, the contents in html file reduces to a great extent. The best thing to do will be to start “global family.html” file anew. So, open the html file, global family.html. Delete everything from that file and let us populate it from the start. Write the following:

<!DOCTYPE html>

<html>

<head>

<title>Global Family</title>

</head>

<body>

<header> <b>Global Family</b></header>

</body>

< /html>

Notice that we removed all the Internal Styling syntax between <head> and </head> from the file. We will transfer the styling to CSS file down the road.

Without much ado, copy the following and paste it in your “global family.html” file just after </head>

Next, We will style the selector, header first because that is on the top of the web page that we are creating. Open the file, “global family stylesheet.css” Write the following:

/* Stylesheet for Header */

Header{height:100px;

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

Font: 40px/80px Sans-Serif,Gadget,Fantasy; text-align: center;

/* Background color, image, position */

background-color: teal;color: white; background-image: URL(pix/kautilaya.png);background-repeat: no-repeat; background-position: 10px center;

/* Round the top corners */

border-top-left-radius: 18px;border-top-right-radius: 18px;

}

Now, save the file, “global family stylesheet.css” and open the html file, “global family.html.” The two files, “global family.html” and “global family stylesheet.css” are linked now. If you wrote everything correctly, your web page will look like the following:

See, only the header is styled. We will style other selectors (elements) separately similar to what we did with header.

Explanation

We inserted a comment, /* Stylesheet for Header */
We wrote a CSS3 code for designing the header.
We chose the selector (in html5 we called it element) header for the designing purpose
We wrote properties and values inside curly brackets {}
Our first property was height of the header and its value was 100px (pixels). 300px=1 inch
We separated property and value with a colon (:) and we placed a semi-colon at the end the of the value (;)
Next we wrote property called “font” and gave it a value:

font: 40px/80px Sans-Serif,Gadget, Fantasy; text-align: center;

We separated the fonts with a coma (,). We gave several font choices because a device such as personal computer, iPhone, iPod, Droid Razr may not have our chosen font. In that case, it can choose the next font mentioned above.

We chose background color by writing background-color: teal; and chose font color as white by simply writing color:white;
Next we inserted a background image by writing: background-image:URL(pix/kautilaya.png); background-repeat: no-repeat;
We wrote the property background-repeat and gave it a value, no-repeat; By doing so we prevented the background-image from repeating itself over and over again.
Lastly, we shaped the header background by writing: background-position: 10px; center;border-top-left-radius:18px;border-top-right-radius:18px; and closed the selector with a curly bracket }

I encourage you to play with the above values and see what happens.

Inserting Comment in CSS

Comments do not appear on web pages. Programmers use comments for organizing the program, and for important reminders for themselves and their fellow programmers. If you remember, the comment is inserted between symbols in html programming.

In CSS, it is done differently. Comments are put between /* and */. In our file, “global family stylesheet.css,” we wrote a comment for the selector, header as follows:

/* Stylesheet for Header */

Let us move to Section 4 to write more styling codes for our web page.

Section 4- Styling nav

If you look at the web page we are attempting to create, the next selector after header to be styled is navigation (nav).

Our navigation bars (Home, Members, About Us, Contact Us) are inside a table. Look at the nav tab inside “global family.html” file and write the following below </header> :

<!—Adding Nav (Navigation to My Web Page -->

<tr><td style="width:25%;"><a href="Home.html">Home</a></td> <td style="width:25%;"><a href="Members.html">Members</a></td> <td style="width:25%;"><a href="About Us.html">About Us</a></td> <td style="width:25%;"><a href="Contact Us.html">Contact Us</a></td>

</tr>

</table>

</nav>

Now, open the file “global family stylesheet.css” and write the following below the style rule for nav:

/*======== Styling for the nav section (nav) */

table.table1{background-color:silver;font: 20pt Sans-Serif,Gadget, Fantasy; }

Please notice that we wrote table.table1 as a selector. That is to distinguish the table for nav from other tables. Save the file and open the file “global family.html.” You will see the following:

Explanation

Please notice that we wrote selector as table.table1 instead of table. That is to distinguish the table for nav from other tables.
We made the background ‘silver’ by writing property and value as background-color:silver.
We assigned the font a value of 20pt and assigned font type as Sans-Serif as our first choice.

Now let us move to Section 5 and write style rules for the selectors, body and aside.

Section 5- Styling aside <aside>

If you look at web sites carefully, You may find a side bar on the left or the right or on both sides of a page. In html and CSS languages, this is called <aside>. In every day language we call them sidebars.

On a typical web page the sidebars are typically used for extra information or for advertisement. Below is an example showing header, navigation bars and side bars.

Let us do it now. Let us create a side bar in the web page we are designing. Open the file, “global family.html.” Write the following below </nav>:

<aside><p>More features coming soon</p><p>Send suggestions to Anil Shrivastava<br>(xxx) xxx-xxxx</p>

</aside>

Save the file and open the file, “global family.html.” You will see a side bar on the left below the navigation bar that will say:

More features coming soon.

Send suggestions to Anil Shrivastava

(xxx) xxx-xxxx

The tag for side bar is <aside> and that is what we used in the above syntax. We created a side bar on the left of the web page.

You may add a video or image or a link in the sidebar. We added an image by writing:

Styling the Side Bar

Now, let us open the CSS file, “global family stylesheet.css.” Write the following below the syntax for nav:

/* Styling for the sidebar section (aside) */

aside{

width:130px;

padding:10px;

float:left;

background-color:#f9c6b3;

}

Save the file and open “global family.html” file. You will see the side bar surrounded in nice Cupid (color).

Explanation

We created a style syntax for the selector aside.
We wrote the properties and values between { }
We wrote property width and its value 130px separated by a colon (:) and ending with a semi-colon (;)
Similarly, we wrote other properties and values as:
padding:10px;

float:left;

background-color: #f9c6b3;
Lastly, we closed the descriptors with }

We gained enough knowledge about Header, Nav and Aside. Let us go to Section 6 to learn more styling.

Section 6- Styling Body <body>

Styling Body

Open the file, “global family stylesheet.css.” Write the following:

/* Stylesheet for Body */

body{background-color:#ffeec6;text-align:center;color:maroon; padding:10px; font:15pt San-Serif, Arial, Helvetica; }

Save the file, “global family stylesheet.css” and open the file,”global family.html.” You will see the entire web page colored in “blanched almond” color.

Explanation

Our selector above is body. The property and value, background-color:#ffeec6; has made the entire pages in the website blanched almond (color).
The property and value, text-align:center; will align everything between <body> and </body> to the center of the page unless you use an Inline Style Rule for an individual element on the web page.
The property and value, color:maroon; will color all the text maroon unless you use an Inline Style Rule for individual elements on the web page.
padding 10 px; is the amount of space between the first content on the web page (header in our case) and the top edge of the web page.
font:15pt San-Serif, Arial, Helvetica; determines font size and font type.

Section 7- Styling Article <article>

Open the file, “global family.html” and type the following below </aside>

<h1>Global Family </h1>

<h2>What Is Global Family?</h2>

<p>We are living in an era of<strong>quantum change;<em> </strong> leaving behind old patters of being in institutions that no longer serve our needs or support our emerging </p>

<div style="text-align:center;"> <img src="pix/sunset.jpg" alt="Sunset" width="5%"<br>A Beautiful Sunset</p> At this pivotal time in humanity's evolution. we need <font color="green">courage, commitment</font> and a supportive community of like-hearted souls to guide the way in transforming society.</p>

<h2>Global Family Mission</h2>

Since we have already gone through the above in previous Lessons, it needs no explanation except that we removed all Inline Styling rules from h1 and h2. We’ll add those in the CSS stylesheet. Save the file, “global family.html.”

Now, open the file, “global family stylesheet.css” and type the following:

/* Stylesheet for Article */

article{padding:10px;

/* Left margin shoulde match neighboring column full width */

margin-left:150px;

border-left:solid 1px #d0ae8e

}

/*Stylesheet for h1 and h2 headers */

h1{color:red;text-align:center

}

h2{color:green;font-size:15pt; padding:10px;font:15pt San-Serif, Arial, Helvetica;text-align:center

}

/* Stylesheet for paragraph */

p{color:black;font:10pt San-Serif, Arial, Helvetica;

}

Save the file, “global family stylesheet.css” and open the file, “global family.html.” if you typed everything correctly, your web page will look like the following:

Explanation

We gave article padding a value of 10px (article{padding:10px;). The padding decides the space between the start of the article materials (Global Family) and the navigation material (the silver table in the above example). Try playing with different values of padding and see what happens.
margin-left:150px; decides the positioning of the aside border relative to the left edge of the web page and border-left:solid 1px #d0ae8e; decides the width and color of the aside border. I recommend that you play with different values for a better understanding.
Next, we typed style rules for h1 and h2 that are self-explanatory.
And lastly we typed style rule for the paragraph <p></p>.

Let us complete our html program. Open the file, “global family.html” and type the following after <h2>Global Family Mission</h2> :

<ul>

<li>All the world is a family</li>

<li>Charity begins at home</li>

<li>Family builds character</li>

</ul>

<h2>Global Family Unit</h2>

<ol>

<li>Individual</li>

<li>Support</li>

<li>Symbiosis</li>

</ol>

</video>

<p>Woman Clapping</p>

<tr><th>Author</th> <th>Quotes</th><th>Image</th> </tr>

<tr><td>Desmond Tutu</td><td>You don’t choose your family. They are God’s gift to you, as you are to them</td></tr>

<tr><td>Richard Bach</td><td>The bond that links your true family is not of blood, but of respect and joy in each other’s life</td></tr>

<tr><td>Steve Jobs</td><td>Sometimes life hits you in the head with a brick. Don’t lose faith</td></tr>

<tr><td>Mark Twain</td><td>Good friends, good books and a sleepy conscience: this is the ideal life</td></tr>

</table>

</iframe>

<p>Family of Chickens</p>

<p><a href="http://www.google.com">Go to Google</p>

</tr></table>

</div>

</body>

</html>

The above does not need any explanation here as they were already covered in previous Lessons. Our concentration is on writing the CSS program. Save the file, “global family.html” and move to Section 8 to learn more.

Section 8- Completing External Style Rule in CSS3

In CSS3 you may write rules for selectors in any sequence. However, from organization point of view, it should be written in the sequence they appear in html file. In our case the elements (selectors) in the html file appear in the following sequence:

<body>

<nav>

<aside>

<h1>

<h2>

<p>

<ul>

<ol>

<table>

So, we will write our codes in the above sequence.

Styling ul and ol lists

After the paragraph rules, write the following

/* Stylesheet for ul and ol */

ul,ol{font:10pt San-Serif, Arial, Helvetica; }

A couple of things happened here.

You changed the fonts for selectors, ul and ol
You wrote the selectors ul and ol together separated by a coma. You can do that for selectors that follow the same rules

Save the file, “global family stylesheet.css” and let us move to Lesson 8 where we will learn about intricasies of styling table.