If you're new here, you may want to subscribe to my RSS feed. Thanks for visiting!
The following tutorial will make a simple two-column layout. For the beginning the page is simple, and you know that the content (images, text) is marked with HTML code between the <body> and </body> tags.
First We will have this :
Above we have 2 sections marked using <div> tags. <div> tags are being used to create a division in the doc. or to make a department. The following code is doing that and is forming 2 containers and each has an unique ID :
The content of the page are contained in one of the major page division. So what are the rules of ID’s in HTML pages and why do we use them like DIVs to assign them to page ?
a ) You can assign ID’s to HTML tag. And also an ID to a <p> tag.
b) It should be used just once. The rule that two elements must have one ID is true. ID are used to uniquely identify a page element. Above we have presented just an page element having an ID of navigation and only one ID of ‘centerDoc’.
c) ID’s on HTML pages are used in CSS. For changing the appearance we can target ID’s in our CSS code.
In <div> tags we are using header tags like : <h1> and <h2> for setting the headers. In the following code we have attached the CSS doc. with the line code between the <head> <head/head> tags :
Like all page link we have an ‘href’ attribute for this time to a CSS doc which has all CSS code and will affect the page if we linked to it.
So after we have the styled sheet linked to the doc. we can look at the CSS code. First snippet of code ’styles’ the unique ID’s we have mentioned before :
We will pay attention just to some elements for the moment. In the previous example we have 2 selectors, one for ID and each selectors are grouped using the curly brackets :{}. In the following example you will see the CSS selectors code with all the guts out :
Now we have a CSS ID selector for each of our HTML divs which have an ID, and have the same corresponding name. The CSS selecotr #centerDoc applies to the div : ‘<div id = “centerDoc”>. For the div with id of ‘navigation’ we have the code :
The great thing is in the CSS code for centerDoc:
CSS is able to concept from 0-100% a box or you name it, that wraps around HTML elements. The model consists of : margins, padding, content and other.. this gives you the opportunity to space elements in relation with other ones.
So, all between <div> tags is content. After comes padding. Then a border and the margin.