Lesson Five: More CSS and the Container Principle
Important Note: Try to get a mental picture of your Webpage as many individual units or elements. Each of these units or elements has a beginning tag and an ending tag. Here are the most common tags:
<h1> </h1> The largest heading
<h2> </h2> The second largest heading
<h3> </h3> The third largest heading
<p> </p> Paragraph
<br> <br> Line break (Note that there is no / character)
<div> </div> Divider
</body> </body> Body
<html> </html> Hyper Text Markup Language
<head> </head> Header (shows in browser title section)
<img > Image (Note that there is no ending text)
<ol> </ol> Ordered list (Note that this list is numbered)
<ul> </ul> Unordered list (Note that this list is marked by a symbol)
- You can think of your Webpage as many containers. Smaller containers exist within larger containers. This is called nesting. Take a quick look at your current mission statement page: Sample
You will notice that the entire body of the page is surrounded by a border. The body will always be the largest container on your webpage. Enter this code in your mission.css file to illustrate the h1 container:
h1 {border: solid 2px maroon; }
Then click file, save and save the file as mission.css in your historytree folder. Double click your mission.html file; notice that the title (your h1 element) container now has a border. The title is nested within the body element: Sample - The logo image will look better as part of the title so cut and paste the img element within the h1 tags. Your code will look like this:
Once again save and test your file to be sure that the code worked. Notice that the border has increased in size to fit the larger addition to the h1 container: Sample<h1> The History Tree Mission Statement <img src="images/compass2.jpg" alt="Company Logo"></h1> - You put a font-size of large in your body CSS to use the browser default large size, however, the title might look better if you make it even larger. So enter this code in your CSS file to make the h1 element 250% of the large font:
h1 { border: solid 2px maroon; font-size: 250%; }
Once again save and test your file to be sure that the code worked: Sample - You can move the logo image over to the right and get some separation from the text with this code:
Once again save and test your file to be sure that the code worked. Sampleimg { margin-left: 80px; } - The border around the title was put there to illustrate the concept of containers. However, the title will actually look better without the border. So remove the border code from your body CSS and take another look at your mission page. The page looks cleaner now, but keep a mental image of the container with a border and when you consider the elements in your code keep an image of a box around each element: Sample
How it works:
The elements shown above can each be visualized as being surrounded by a border. That border illustrates that the elements are all containers. Containers can be enclosed within other containers. In this lesson you put a border around the h1 element to illustrate the container principle. In lesson four you put a border around the body element to illustrate that the body is the largest container. The h1 container is nested inside the body border (container.) In this lesson you put the image element inside the h1 tags. You nested the image within the h1 container and the h1 border was resized to the size of the logo image. So now you have an image container nested inside an h1 container, and an h1 container nested inside a body container. By the way, don't forget that you also have a head container and that both the body and head elements are nested within your html tags.