Easiest Way To Learn HTML5 and CSS3 Coding

Lesson 6 - Style Rules

Section 1- Introduction

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.

Section 2- Internal Style Rule and Style Conflict

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.

Section 3- Writing Code Using Internal Style Rule

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

  1. We wrote a CSS3 code for designing the header.
  2. We chose the selector (in html5 we called it element) header for the designing purpose
  3. We wrote properties and values inside curly brackets {}
  4. Our first property was height of the header and its value was 50px (pixels). 300px=1 inch
  5. We separated property and value with a colon (:) and we placed a semi-colon at the end of the value (;)
  6. Next we wrote property called “font” and gave it a value: 20px Sans-Serif,Gadget, Fantasy;
  7. We decided the size of the font as 20px and font type as Sans-Serif. 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.
  8. We chose background color by writing background-color: teal; and chose font color as white by simply writing color:white;
  9. Next we inserted a background image by writing: background-image:URL(pix/kautilaya.png); background-repeat: no-repeat;
  10. 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.
  11. 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 }

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

  1. We wrote the following code for the selector, body:
  2. body{background-color:#ffeec6; }
  3. The entire background turned into Blanched Almond.

Let us move to Section 4 where we will discuss font sizes and background-repeat in detail.

Section 4- Background Images

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

ValueMeaning
RepeatRepeats vertically and horizontally
Repeat-xImage repeats horizontally
Repeat-yImage repeats vertically
no-repeatImage 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:

  1. Inline style rule: Applies to a single element on a single page.
  2. Internal style rule: Can apply to multiple elements within a single page.
  3. External style rule: Can apply to multiple elements on multiple pages within the site.

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

Back to top of page