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.
<link href="global family stylesheet.css" rel="Stylesheet" type="text/css" />
Explanation
<link href="global family stylesheet.css" rel="Stylesheet" type="text/css" />
Before we go any further, let us understand the basic structure of a web page. Let us go to Section 2.
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:
See the image below:
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>
<link href="global family stylesheet.css" rel="Stylesheet" type="text/css"/>
</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
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.
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.
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 -->
<nav><table class="table1" style="width:100%" cellspacing="10" cellpadding="10" >
<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
Now let us move to Section 5 and write style rules for the selectors, body and 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>:
<!-- Adding Aside (side bar) to My Web Page -->
<aside><p>More features coming soon</p><p>Send suggestions to Anil Shrivastava<br>(xxx) xxx-xxxx</p>
<img src="pix/lions1.jpg" rel="Lions" width="100%" />
</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:
<img src="pix/lions1.jpg" rel="Lions" width="100%" />
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
padding:10px;
float:left;
background-color: #f9c6b3;
We gained enough knowledge about Header, Nav and Aside. Let us go to Section 6 to learn more styling.
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
Open the file, “global family.html” and type the following below </aside>
<!-- Adding Article to My Web Page -->
<article>
<!-- Adding h1 Header to My Web Page -->
<h1>Global Family </h1>
<!-- Adding Image to My Web Page -->
<image src="pix/Old Couple.png" rel="Old Couple" width="10%" />
<!-- Adding h2 Header to My Web Page -->
<h2>What Is Global Family?</h2>
<!-- Adding Paragraph and Text and Floating Image to My Web Page -->
<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
Let us complete our html program. Open the file, “global family.html” and type the following after <h2>Global Family Mission</h2> :
<!-- Adding Unordered List to My Web Page -->
<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>
<!-- Adding Ordered List to My Web Page-->
<ol>
<li>Individual</li>
<li>Support</li>
<li>Symbiosis</li>
</ol>
<!-- Adding Video to My Web Page -->
<video controls style="align:center;">
<source src="pix/clap.webm" type="video/webm" width="50%;">
</video>
<p>Woman Clapping</p>
<!-- Adding Table to My Web Page -->
<table class="table2" table border="1" cellspacing="0" cellpadding="4" align="center" >
<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>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>
<!-- Adding YouTube Video with Frame to My Web Page -->
<iframe width="320" height="245" src="http://www.youtube.com/embed/tgbNymZ7vqy">
</iframe>
<p>Family of Chickens</p>
<p><a href="http://www.google.com">Go to Google</p>
<!-- Adding Footer to My Web Page -->
<div class="footer">
<table class="table3" table border="0" cellspacing="0" cellpadding="0" align="center" > <tr>
<td>Copyright © 20XX, TheThinkClub, All Rights Reserved</td> <td style="text-align:right">Designer:Anil Shrivastava</td>
</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.
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>
<header>
<nav>
<sidebar>
<aside>
<article>
<h1>
<h2>
<p>
<ul>
<ol>
<table>
<footer>
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.
Save the file, “global family stylesheet.css” and let us move to Lesson 8 where we will learn about intricasies of styling table.