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.
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].
Create a Html page (web page) with the follow or equivalent:
You can use the Html code I'm providing you here, but please take some time to watch and understand it, is not complicated.
<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:
Take a look on the Css Code Sample 2
See the difference between the Css elements?
body {
}
.myclass {
}
#image1 {
}
#div1 {
}
#div2 {
}
#div3 {
}
#div4 {
}
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)
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