Programming.a.baby - (Html5) Body Style

Html5 - Article 6

What is Html Body Style

When you make some simple Html document Web Page, is only a white paper with some black text with no paragraphs, measured spaces...etc

Abbreviating, is a no style Web Page, is sad.

So we will need to build it's styles so we can make it pretty, accessible and a good professional work.

How to Start?

This Article is for People that:

At least Already read my previous articles (How to make a simple Web Page) and (Web Page Structure)
Or people that already know how to create a Web Page and it's structure (Head, Body)

Even if you do not understand about CSS or Styling, i will easy explain you right here

...

Create Html Document

First we create an Html Document with Head and Body.

Inside the Head, at least create the Title
Inside the Body Element, at least create a Layer (Div)

You can use my code from the Sample 1

Sample 1

<html>

<head>
 <title>My Title</title>
</head>

<body>
 <div></div>
</body>

</html>

Old and Two new Methods

Now listen, maybe you will find in the Internet html documents were inside you see some Body elements like a Table or a Layer...etc with a strange styling procedure like this example:

<font face="Arial" color="#FFD700">ABC</font>

That is the old way on Html 4.0 to give a Type of letter and color to a font, we do not use this anymore, today with Html 5 we use all inside of One unique style like this example:

<span style="font-family:arial; color:#ffd700;">ABC</span>

But this is only One way to make things, only good if you gonna only Style some elements.

Imagine if you want to style hundreds, then we would need to make this is a easy way right!

Lets first see the sample 2.1 were you will see the first example on using Body Styling:

Sample 2.1

<html>

<head>
 <title>My Title</title>
</head>

<body>
 <div style="color:red; font-size:14;">
  My text is here
 </div>
</body>

</html>

Note that this time we chose a Layer (Div) and we styled it with

Font color (color:red;)
Font Size (font-size:14;)

Now take a look in the sample 2.2 to see all the text you need to use in this document making it heavier if you have more Elements that you need to apply the same style

OK, someone may say, "I will style directly in the body", yes you can do this:

<body style="...etc">

But if i have already a default body style that i want to maintain?

Take a look in the Sample 2.2 Now and check also the Body Element

Sample 2.2

<html>

<head>
 <title>My Title</title>
</head>

<body style="color:red; font-size:12;>
 <div>Default Text with default body style</div>
 <div style="color:red; font-size:14;">Text1</div>
 <div style="color:red; font-size:14;">Text2</div>
 <div style="color:red; font-size:14;">Text3</div>
</body>

</html>

The Style Solution

See what i mean, so what then is the best solution for style several elements and giving me the power to change them all in a couple of minutes?

First thing will be to create the Style not in the Body elements, but in the Head of the document, for this we have to say to the Head that we need to apply a style

<style type="text/css"> That's the way to open a CSS style in head
</style> That's the way to close a CSS style in head

Note that now you can create many Classes and IDs inside of this CSS Style.

OOPS |)

((( Are you confuse, don't be, is not difficult, you see )))

What is CSS

Common Style Sheet - You can create a separated document or you create it in your Html Head's Document

What is a CSS Class

Is a group of style commands that you can apply to a group of elements, how many times you wish

What is CSS ID ?

IS a group of style settings usually for one element, but you can use it or more than one

Now in the Sample 2.3 we will give One Class named "myclass" to all the Div elements, except the first one that will will receive the Body default Style values, take a look also to the Head of the document since we will build the style there

Sample 2.3

<html>

<head>
 <title>My Title</title>
 <style type="text/css">
  .myclass {
  color:green;
  font-size:14;
  font-family:verdana;
  }
 </style>
</head>

<body style="color:red; font-size:12;>
 <div>Some random text</div>
 <div class="myclass">Text1</div>
 <div class="myclass">Text2</div>
 <div class="myclass">Text3</div>
</body>

</html>

More to come

You should now go and sneak my next articles about CSS

This way you will Style your web Page "like a Professional" and your Html docs will be much better, you can follow the Hyperlinks bellow, i always update them after finishing new articles

You also can return here later and continue the Html5 Tutorials i prepare for you.

Thanks