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

<!Doctype html>

<html>

<head>

<style type="text/css"/>

</style>

</head>

</html>

Now is the time to open your file “global family.html” again. And type the following under <title></title> as shown below:

Next, remove Inline Style from the body section because you are using Internal Style which will style the entire page. Now your <h1> and <h2> tags should look like the following:

<h1>Global Family</h1>

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

<h2 >Global Family Mission</h2>

<h2 >Global Family Unit</h2>

Save your file and open "global family.html." If you wrote everything correctly, the look of your page should be exactly like before.

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

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: #CD853F; and chose font color as black by simply writing color:black;
  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" />:

Save the file and open “global family.html”. You will see the following:

Looks nice!

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.

Let us go to Lesson 7 where we will learn about External Style Rules