As mentioned in Lesson 1, Section 4, there are three kinds of "style rules" we use in designing internet pages and websites. They are Inline, Internal and External.
So far, we used Inline Style Rules in previous lessons. That was good only for a single element, Now on our concentration will be on Internal and External Style Rules.
We may use the terms Style Rules and Style Sheets interchangeably. You should not be confused.They are one and the same for all practical purposes.
So, let us got to Section 2 and learn about Internal Style Rule.
An internal style sheet only works inside a web page and not on the entire website. A given web site may consist of more than one page. In case you want to apply the rules to the entire website then you will use External Style Rule. We will discuss that in later lessons. Right now we are concentrating on styling one page only. You may also hear people mentioning Internal Style sheet as an embedded style sheet.
Note: You must place the internal style sheet below the <head> tag as shown below in bold:
<!Doctype html>
<html>
<head>
<style type="text/css"/>
</style>
</head>
</html>
Now is the time to delete the content from “global family.html” file and start anew. Inside your “global family.html” file, write the following syntax:
<!Doctype html>
<html>
<head>
<style type="text/css"/>
</style>
</head>
</html>
The Internal Style Rule <style type="text/css"/> will replace the Inline style rules that you previously wrote for each line while using Inline style rules in the previous lesson.Now add the following elements just above </style>
h1{color:red;}
h2{color:green}
</head>
Now let's go to <body> tag and complete the rest of the program as following
<body>
<h1>Global Family</h1>
<h2 >What Is Global Family?</h2>
<h2 >Global Family Mission</h2>
<h2 >Global Family Unit</h2>
</body>
</html>
Important Note:You just created the basic structure of your webpage. The idea here is to emphasize that you should write all the Internal style rules in the style section between <head> </head>. You'll learn how to write style rules for every element in the next lesson. I don't want to confuse you by writing all the style rules here. So, please bear with me.
Style Conflict
Suppose you created two different h1 tags and wanted one of them to have color blue instead of red. You can do that by using an Inline Style Rule for that particular tag only. Yes, there will be a style conflict because you are using Internal Style Rule for the entire page.
When styles conflict, the one that's closest to the tag being styled is recognized because an inline style is actually in the tag of the element being styled. That is the closest possible proximity to the element under consideration. Therefore, an inline style always takes precedence over any other style rule. You should try doing that for practice.
Open the file, “global family.html” and write the following below <style type="text/css" />:
header{height:50px;font:20px Sans-Serif, Gadget, Fantasy; text-align:center; Background-color:teal;color:white; background-image:URL(pix/kautilaya.png); background-repeat:norepeat; background-position:10px; center; border-top-left-radius:18px; border-top-right-radius:18px; }
Remove Inline styling from header section. It should now look like <header><strong>Global Family</strong></header>
Save the file and open “global family.html” again. You will see the following header with a background color and an image:
Explanation
Background Color
Let us give a nice background color to our page using Internal Style Rule. Open the file, global family.html. Write the following just below <style type="text/css" />:
body{background-color:#ffeec8; }
Explanation
Let us move to Section 4 where we will discuss font sizes and background-repeat in detail.
Background images can appear behind texts, in tables and body elements. We just created a block element in the header:
To import a block element we write the block-image property and its value (path of the image) in CSS programming.
To define a background image, you use the CSS background-image property with the following syntax:
background-image:value
To create the image in our header above, we wrote,
Header{background-image:URL(pix/kautilaya.png); background-repeat: no-repeat; }
We also wrote, background-repeat: no-repeat;}
Creating Background Pattern
Let us create a background pattern for the entire web page. Open your file global family.html. Add the following in your body style descriptor just below <style type="text/css" />:
body{background-color:#ffeec6; background-image:url(pix/pattern.png); }
Save and open the file, “global family.html”. You will see the following:
You get the idea. Now remove background-image:url(pix/pattern.png); from the syntax because we do not want to clutter our web page. Save the file "global family.html".
Background-Repeat
If you look at the header selector, we wrote background-repeat:no-repeat;
That stopped the background-image from repeating itself over and over again.
Open the file global family.html and remove the descriptor, background-repeat:no-repeat; from the syntax. Save the file and open it again. What do you see? If you wrote everything correctly, you will see the background image repeating itself.
We do not want background-image repeating, so add background-repeat:no-repeat back in the syntax and save the file, “global family.html.”
We have following options of using the value for the property, background-repeat:
Background-Repeat Properties
Value | Meaning |
---|---|
Repeat | Repeats vertically and horizontally |
Repeat-x | Image repeats horizontally |
Repeat-y | Image repeats vertically |
no-repeat | Image does not repeat |
Now that you know about Inline Style Rule and Internal Style Rule, We will go to Lesson 7 to learn about External Style Rule. Remember:
If you wrote everything correctly, your program should look like the following:
<!Doctype html>
<html>
<head>
<title>Global Family</title>
<!-- Writing Internal Style Rules -->
<style type="text/css"/>
h1{color:red;}
h2{color:green}
header{height:50px;font:20px Sans-Serif, Gadget, Fantasy; text-align:center; Background-color:teal;color:white; background-image:URL(pix/kautilaya.png); background-repeat:no-repeat; background-position:10px; center; border-top-left-radius:18px; border-top-right-radius:18px; }
body{background-color:#ffeec8; }
</style>
<!-- End of Writing Internal Style Rules -->
</head>
<body>
<header><b>Global Family</b></header>
<h1>Global Family</h1>
<h2 >What Is Global Family?</h2>
<h2 >Global Family Mission</h2>
<h2 >Global Family Unit</h2>
</body>
</html>
Save the above as global family.html. Your webpage should look like as shown below.
Let us go to Lesson 7 where we will learn about External Style Rules