The CSS Tutorial: Part 3

In the second part of the tutorial, we covered what the major sections of HTML are and we also discussed DIV tags, separation, and the IDs that correspond to them:

As you can see:


<div id="header"> ...</div>


<div id="navigation"> ...</div>


<div id="centerDoc"> ...</div>


You should note that DIVs are only one of the strategies that you can use to configure the positions of page sections.

Today, there are also dedicated HTML5 tags that can be used for specific common sections, such as header, footer, aside and more which you can find on our HTML5 Cheat Sheet.

CSS allows you to handle the positioning and styles of page elements at a large scale across an entire website. You may get to instances where you find that CSS is just not the right fit something on your page, and you can use inline styles in those cases. At this point though and for the purpose of our tutorial, we are going to stick to CSS in a stylesheet. The good news at this point is that things are going to get a lot simpler since we are just adding images and text.

The Page: Broken Down

There is only one heading to the page, which is this:


<h1>The Main  Heading</h1>


There is also a single paragraph, which is:

<p>Here's a paragraph! We'll do fun stuff with this today. Now time for some lorem. 
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor 
incididunt ut labore et dolore magna aliqua.</p>

The paragraphs and headings in our CSS code are defined like so:

p {
width: 80%;
}

h1 {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 18px;
font-weight: bold;
color: #000000;
}

It all is really simple to follow. Just keep in mind that the width of the <p> tags is currently set at 80%. This setting enables us to control the width of our text inside the layout.

What is currently missing from our page is the navigation. To do the navigation, you can add list tags – remember <li>?

Now, our lists are styled like this: It all really is simple to follow. Just keep in mind that the width of the <p> tags is currently set at 80%. This setting enables us to control the width of our text through an edit spot.

li {
list-style-type: disc;
margin-bottom: 15px;
}

The code above sets the list style to a disc and it adds 15px of space below each list item.

The next step is to add an unordered list to your practice.html page by using <ul></ul>. These tags should be placed in between the navigation DIVs. The final result:


<h2>The Main navigation</h2>


<ul>

<li><a href="cssTutorialPage1.htm">Page One</a></li>


<li><a href="cssTutorialPage2.htm">Page Two</a></li>

</ul>


Finally – navigation! And with that, the goals of the tutorial have been realized. While it may seem that you just received a lot of information, you should also see this as only touching upon the surface of CSS. We do have a great looking page that utilizes a number of HTML tags. What we are missing though is text on the page. Fortunately, adding it is pretty easy.

If you’d like to continue – let’s head to CSS and Images.

Continue To Adding Images
We'd love to hear your thoughts...

Leave a reply

Hosting Review Box
Compare items
  • Total (0)
Compare
0