In Part 1 we created a classic two-column layout with left side navigation using CSS and only a few types of HTML tags.
Part 1 presented the code for the page and explained what HTML tags we were going to use. Now we will look at the actual HTML code used so far and the CSS.
Our page so far is really very simple. As you may already know, all the content (text, images, Flash etc) that the user sees when viewing a web page is marked-up/coded with HTML in-between the <body> and </body> tags*.
In this case we have this:
In the above code we see that we have 2 main sections demarked by using <div> tags. As you learned in part one of this tutorial, <div> tags are designed to be used to create a ‘division’ in the document or in other words create a container. We have created two such containers and given them each of them a unique ID:
You will notice that the entire contents of the page are contained in one of these two major page divisions. So the first questions are what are the rules of ID’s in HTML pages and why do we use them and assign them to page elements like DIVs?
- First of all you can assign ID’s to any HTML tag. So I could have assigned an ID to a <p> tag as well.
- An ID in a page should only be used once. That is to say that no two elements should have the same ID. ID’s are meant to uniquely identify a page element. So in the above example we know that there is only one page element with an ID of ‘navigation’ and only page element with an ID of ‘centerDoc’. I like to use ID names that talk to you, it is pretty clear what is going on in each division we created above.
- ID’s on HTML page elements (tags) are used in CSS. We can target ID’s in our CSS code to change the appearance, position and even behavior of that element by referencing the ID of the element.
Inside the <div> tags we use header tags (<h1> and <h2>) to set the headers. I speak to what header tags mean in part 1 of this tutorial.
And finally I have some <p> tags, and of course I insert the text that makes up this simple page in-between them.
Now I am going to jump to our CSS file that is attached to the HTML page. We attach the CSS document with this line of code in between the <head> </head> tags:
Like a normal page link we have an ‘href’ attribute this time pointing to a CSS document that has all our CSS code that will affect this page since it is linked to it. This is not the only way to associate CSS code to pages (there are a few other ways) but we will leave that to another article. So in the above link we name the CSS file name with this: ‘href=”myCSS.css”‘ and we tell the browser that the link is to a CSS page with this attribute: ‘type=”text/css”‘. All that is important here is that the link point to a CSS file with the name: ‘myCSS.css’
So now that we got the style sheet linked to the document, lets look at some CSS code. This first snippet of code ‘styles’ the unique ID’s we were talking about before:
There is a lot going on here so we will focus on just a few elements for now. In the above elements we have 2 selectors, one for each ID and each selectors are grouped/contained by using the curly brackets: { }. So here is the CSS selectors code with all their guts removed:
I just inserted the text: ‘/*Look ma no CSS rules!*/’ to show you where the CSS code would normally be. So now you can see that anything in between the curly brackets is part of one group or package that in CSS can generically be called a selector.
In our above examples you can see that there is some text that appears before a curly bracket. That text gives a name to the selector. So in this case we have two selector names and thus to selectors: #centerDoc and #navigation. So why do we have the # symbol in front of the text? Why can’t we call it simply ‘centerDoc’ and ‘navigation’?
0 comments:
Post a Comment