Какво е Интернет?
WebCreatorBG - Stylesheet CSS
With CSS you change the look of your website (Design) to add css you need to open notepad and save like first time but with .css format example:style.css after this you need to add this link to your index.html between <head> and </head> tags like this.
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
Also you can put your stylesheet on your html page ( index.html ) with tags.
<style>
{
CODE
}
</style>
Any way lets start to write something.
Open your index.html and write between <head> and </head> tags new tag
<style>
body { background:#333333}
header { position:relative; margin:auto; background:#CCC; width:950px; height:150px;}
nav { position:relative; margin:auto; background:#CCC; width:1000px; height:80px;}
main { position:relative; margin:auto; background:#CCC; width:950px; height:400px;}
footer { position:relative; margin:auto; background:#CCC; width:1000px; height:80px;}
</style>
Save index.html and open!
Now do you understand what is stylesheed (CSS) - CSS AND HTML are together! :)
Okay now as you see first we write our html tag after this we open like this { put the code here and } close,look very simple.
START TAG + OPEN + OUR CODE + CLOSE + CLOSETAG we have what we want!
Now what we have here?
background - as you see when you set background:#CCC; the color change to gray you can write red,white,gray,blue what you want to be.
position - we can write static,relative,fixed,absolute i will explane you difference between positions letter.
margin - margin properties are used to generate space around elements,you can change margin with top,bottom,right,left. example margin-top:10%;,margin-left:100px; and etc you can use % or px its doesn't metter.
width - The width property sets the width of an element.
height - The height property sets the height of an element
Okay now your index.html will be like this:
<!DOCTYPE html>
<html lang="en">
<head>
<style>
body { background:#333333}
header { position:relative; margin:auto; background:#CCC; width:950px; height:150px;}
nav { position:relative; margin:auto; background:#CCC; width:1000px; height:80px;}
main { position:relative; margin:auto; background:#CCC; width:950px; height:400px;}
footer { position:relative; margin:auto; background:#CCC; width:1000px; height:80px;}
</style>
<meta charset="utf-8">
<title> WebCreatorBG HTML5 BASIC </title>
</head>
<body>
<header>
Defines a header Here we put our logo,slideshow,main description for our webpage.
</header>
<nav>Defines a layout for hyperlinks or menu buttons must be here.
</nav>
<main>
Main Section We put here main text for our website
</main>
<footer>
Defines a footer for a document,the end of the page
</footer>
</body>
</html>
NEXT CHAPTER
