PAB - CSS - styles in the HTML body

Css - Article 3

Programming a Baby series

PAB ( Programming a Baby ).
CSS
Body Style

Hello there and, like i promised, here we are to learn how to give a style to your Html document.
With this tutorial I'm writing here you can change all your web pages with only one touch.
Is important you also follow the three Previous articles (please follow the links at the bottom of this page) about Css that i wrote, they are easy to learn, and will give you a bigger practice.
One way or the other i always repeat some steps to make my articles easy to understand, so lets begin the work.

Open your Notepad or your Html Editor
You need to be able to see the extensions of the files
you are creating with the notepad (example: document.txt), if not, check the follow
if you cannot see the file extensions in WINDOWS OS, then do this:
in WINDOWS 10 open your [FILE EXPLORER], click [File - change folder and search options - view ] and uncheck the [hide extensions for known file types]
in WINDOWS 7/8 open your [FILE EXPLORER], press the [ALT] keyboard key, [Folder options - view ] and uncheck the [hide extensions for known file types].
Find a small .jpg image and rename it to sample.jpg to be placed in the same folder or local as your Html and Css documents

sample.jpg

Create a Html page (web page) with the follow or equivalent:

Create the Html Head and Body
In the Head you give a Title and Link to a File named "style.css" that we will create next
In the body create 4 Layers "div"
Inside the first Layer you create a image (for the logotype)
For each of the 4 layers you will give the same class (class="myclass")
For each of the 4 Layers and the Image you will give a different ID (id="div1..")
Inside each layer, write some text

You can use the Html code I'm providing you here, but please take some time to watch and understand it, is not complicated.

Sample 1 - the HTML code

<html>
 
<head>
 <title>My Title</title>
 <link href="style.css" rel="stylesheet" type="text/css" /> 
</head>
 
<body>
 
 <div class="myclass" id="div1">
  <img id="image1" src="image1.jpg" alt="myimage" />
  Some Text here
 </div>
 
 <div class="myclass" id="div2">
  Some Text here
 </div>
 
 <div class="myclass" id="div3">
  Some Text here
 </div>
 
 <div class="myclass" id="div4">
  Some Text here
 </div>
 
</body>
 
</html>

Now let us create the Css document:

With your Notepad create a pure text document and rename it to style.css, this way, your Html document will link to it
Create the CSS element "body" so we can work with it later
Create the CSS Class "myclass" Create the ID "image1"
Create the CSS IDs for the 4 Layers "div..."

Take a look on the Css Code Sample 2

Some Notes

See the difference between the Css elements?

Sample 2 - the CSS code (simple)

body {
}
 
.myclass {
}
 
#image1 {
}
 
#div1 {
}
 
#div2 {
}
 
#div3 {
}
 
#div4 {
}

Classes start with "." IDs with "#" And general Body Elements like Body, H1, H2...etc, don't need to start with anything

Now let us use the Css document that we made, and give some style to it, in a way that it will changes every Html page that Links to it, like the Html page we already made (Take a look on the Link element inside the head element of your Html page)

Sample 3 - Result of Body Style after

	
body {
    background-color:yellow;
    color:white;
    font-family:verdana;
    font-size:12px;
}
 
.myclass {
    background-color:black;
    border:1px gray solid;
    margin:20px;
    padding:10px;
}
 
#image1 {
    float:right;
    border:0px;
    width:auto;
    height:150px;
}
 
#div1 {
    height:150px;
}
 
#div2 {
    height:50px;
    text-align:center;
    font-size:20px;
    color:red;
}
 
#div3 {
    min-height:200px;
}
 
#div4 {
    height:50px;
    text-align:center;
    font-size:11px;
    color:silver;
}

If you follow all my indications, then the result you will have will be equal to the "Image of the Result" at the bottom.

Take a look at it

PAB - CSS - styles in the HTML body

Css - Article 3

Programming a Baby series

sample.jpg

Sample 1 - the HTML code

Some Notes

Sample 2 - the CSS code (simple)

Sample 3 - Result of Body Style after

Sample 4 - the final result into a web page

Go to the Next article >> PAB - CSS - Object Position - the Z factor.

<< Return to the index of HTML Articles

SINALSOFT - 2003 - 2024