The CSS Tutorial: Part 2

Introducing Element ID

Part 1 of this guide taught how to create a classic two-column layout that included left side navigation and to achieve this result, all that was necessary were a few simple HTML tags.

In addition, we also learned what HTML tags were important and it also provided the code for the page. The next stage of the guide is going to cover the HTML tag used thus far.

Right now, we have a very simple page. When adding content to the page such as text and images, it needs to be put in between <body> and </body> tags.

Taking this into consideration, we have the following code:

<div id="navigation">
 <h2>The Main navigation</h2>
</div>
<div id="centerDoc">
 <h1>The Main Heading</h1>
 <p>Go to the Web Designers Killer Handbook home page and grab the practice 
 HTML page that we will used as the starting template for this tutorial. 
 You can find it under the heading: 'To create the practice HTML page do 
 the following:'.

 Follow the instructions there and create your basic HTML page ... and
 do it now!</p>
</div>

The code above has 2 main sections. These sections can be identified by the <div> tags, which are used to create a division within the document between words in a container. Therefore, there are now two containers. Let’s identify each container with the following unique name:

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

As you can tell, the contents that we have on the page are within each of these two page divisions. The first thing to address now is: rules of IDs in HTML pages, their significance in relation to assigning DIV page elements.

The answer:

  • First: an ID can be assigned to any HTML tag. For example, the ID could have been assigned to the tag.
  • Second: you can only use the ID once per page. This means that if you used the unique id “navigation” once on the page already, then you cannot use it again.
  • Third: IDs for HTML tags are primarily used in CSS. IDs can be targeted in our CSS code to alter the position, appearance, and even the behavior of a certain element. To do this, simply reference the ID element.
  • Fourth: When using tags, we also need to use <h1> and <h2>. This enables us to set the headers.
  • Fifth: <p> tags can be inserted in the text to make things easier to follow and organized.

The next step is to access the CSS file attached to the HTML page. To attach the CSS document, add the following text between <head> </head> tags:

<head>
<link href="myCSS.css" rel="stylesheet" type="text/css">
</head>

Right now, we have added an ‘href’ reference that leads to the CSS document. In addition, it also includes all of the CSS code that alters the page because it is linked to the page. You should be aware that there are other ways to associate CSS code to the pages.

However, they will not be covered in this article. In using the link above, link it to ‘href=”myCss.css”’ This notifies the browser that the link corresponds to a CSS page with the following attribute: ‘type=”text/css”’. The key to this section is ensuing that the CSS file name links to myCss.css.

The style sheet should be linked to the document. The next thing to cover is the CSS code. Here is an overview of the code styles we mentioned earlier. This code style corresponds to the unique ID mentioned:

#navigation {
position: absolute;
width: 210px;
height: 600px;
margin: 0;
margin-top: 0px;
border-right: 1px solid #C6EC8C;
font-weight: normal;
}

#centerDoc {
position: absolute;
padding: 0 0 20px 0; /*top right bottom left*/

The above code may seem confusing, but we are going to parse the elements out. What we have are 2 sectors. Each selector points to each unique ID. The selectors are grouped/contained with the curly brackets “{“ and “}”.

Here is an overview of the CSS selectors without the insides:

#navigation {
/*Look ma no CSS rules!*/
}

#centerDoc {
/*Look ma no CSS rules!*/
}

The text you see: “Look ma no CSS Rules!” is just to highlight where you would normally add the CSS code. Everything between the bracket is known as a “selector” – as mentioned above.

As for the text that comes before the curly bracket, that is the name of the selector. Here, we have two selectors: 1) #navigation and 2) #centerdoc. Note the “#” symbol before each selector name. It seems pretty odd to add such a symbol, however there is a reason behind the madness…

back to menu ↑

How To Style Using IDs

Similar to HTML and programming, adding a specific text to a certain place generates a special meaning. The special meaning is what informs the system to perform a particular task. When it comes to the # symbol that is placed in front of a CSS selector, we are informing the system that the selector is a special type that is known as an “ID” selector. The next question that you may have is, “What is so special about this selector?”

Well, the ID selector can only be applied to a single element on the HTML page. Right – this should remind you of what we talked about earlier.

At this stage of the process, if you look at your code, we have a CSS ID selector that is placed in front of HTML divs that include an ID. They also have names that correspond. For example, the CSS selector #centerDoc corresponds to ‘<div id=”centerDoc”>’

When we change the rules/styles that are coded into our ID sector, we essentially change whatever is in that corresponding div. Here is the div and the id for ‘navigation’ that is included in our CSS rules:

#navigation {
position: absolute;
width: 210px;
height: 600px;
margin: 0;
margin-top: 0px;
border-right: 1px solid #C6EC8C;
font-weight: normal;
}

The thing to note about the above section is that it includes “font-weight: normal.” This means that the text has a normal font weight.

To change to bold, simply write:

font-weight: bold;

At this point, if you look at our page, you will notice that the navigation div is located on the left and it includes a border. The border is light green 1 and is in pixel style. The reason is because that is how it is set in the CSS:

border-right: 1px solid #C6EC8C;

Hopefully you are able to follow along at this point since at this stage, things are pretty obvious. If you like, you can change the border color and the thickness of the pixel. You can also check on how it looks.

The next issue we are going to address is the reason behind the navigation’s location on the left side of the page and centerDocs position to its right. The first step is to turn to the following line in the navigation sector:

position: absolute;

The simplified explanation is that the text above informs the browser to leave the div text on the page as is. For our purposes, we are just going to leave it at that.

Here is the heart of the magic – the CSS code that we are going to use for our centerDoc:

#centerDoc {
position: absolute;
padding: 0 0 20px 0; /*top right bottom left*/
margin-top: 50px;
margin-left: 235px;
}

The key line here is:

padding: 0 0 20px 0; /*top right bottom left*/

The line above notifies the browser that 20px (pixels) of padding should be added to the div’s bottom portion that has the ID ‘centerDoc.’

Before we go further, let’s cover what padding means. “Padding” is space that wraps the element (tag).

The purpose of this feature and concept is to create a box model. The model wraps the HTML elements and it includes: margins: padding, borders, and the content itself. With this feature, we can add a border to the circumference of the elements and space elements that are related to the other elements.

When considering this concept inside out, it is ordered like this: content  padding  border margin

At this point, content is located between our <div> tags. After the content, we have padding. Next, the border and finally, the margin. While it may seem like padding and margin are one in the same, there actually is a difference.

Padding is what controls the space that is located prior to the border and margins are what are responsible for the space after the border. These two elements can have a major impact on the appearance of your layout.

For our current example, you may have seen that the navigation div is located higher than the centerDoc div. The reason for the placement is the margin settings that have been configured for each selector; the centerDoc is set top margin at 50 px – as you can see below:

margin-top: 50px;

The navigation div is configured to:

margin-top: 0px;

As you should be able to tell, the top margin is set at 0 pixels. As a result, the top margin will be than the centerDoc div by 50 pixels. You also may want to alter the position of the navigation div so that is placed under the centerDoc div in the HTML. This will allow you to view whether it changes anything and you will also be able to pinpoint where the div is located in the actual HTML code. If you want to keep playing around with things, then you can also alter the CSS values just to get a sense of what happens. You can change the margins, padding, and so forth.

Note: The excess of HTML that is located at the top of the initial <body> tag. While it is necessary for the page, it has no relation with what is located on the page. This is from the user’s perspective. As a result, it is not something we will address in the rest of the tutorial.

Now that we’ve covered this – let’s head to Part 3 of the discussion, where we will address:

Continue To Part 3
We'd love to hear your thoughts...

Leave a reply

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