Class January 10, 2014 – MHS Web Design

Before we begin:

Using CSS to create a layout for your webpage

Need to know:

ID (uniquely applied, usually used just once on a page)- preceded by # on style sheet. Used to identify one element and generally used to identify specific sections of a webpage (ex. menu, header, sidebar)

Class (defines several things at once, such as text that’s bold, 16 point, and Arial)- preceded by . on style sheet. Used to identify several elements

Elements (the various HTML elements, such as paragraphs, links, etc., that are defined by the style sheet)- not preceded by anything on a style sheet

While HTML has tags, CSS has selectors, which are the names given to the styles in your style sheet. For each selector, there are properties with values, like a headline that is bold, Arial, and 20 point font, for example.

In the body section of your webpage, you use div tags that correspond to the selectors in your style sheet.

For example, div id=”menu” or div class=”paragraph2″

Divs and containers

Containers are specific areas of a webpage that can contain text, images, etc. They are referred to as divs on your style sheet. They can be positioned with specific properties and can overlap.

Class vs id

Generally an id refers to one element while a class can be used to refer to more than one element. For example, an id can refer to a specific section of your webpage for layout purposes (example: div id=”leftmenu”) while a class can be used to define a set of style properties to modify an element. Id’s are used to refer to specific containers (divs) you’ve created.

Positioning divs on a webpage

Divs can overlap and are positioned either from the top left corner of the webpage (absolute) or in relation to their usual positions on the page (relative). It is possible to put one div inside another and position them differently. Top, right, left, and bottom values are used to tell the browser where the div should be positioned on the page. The values can either be in pixels or as a percentage, which are relative to the parent element’s dimensions (example, a webpage that’s 900 pixels wide or a table that’s 500 pixels wide).

Let’s practice

In this example, we are setting up a two-column webpage with a main content area and a sidebar area. This example is from HTMLDog.com.

Please copy and paste the following into Notepad++, save it as csslayout2.html, and open it in Firefox. Don’t forget to delete the quotation marks and add them again!

<html>
<head>
<title>CSS Layout Practice</title>
<style type=”text/css”>
#navigation {
position: absolute;
top: 0;
left: 0;
width: 10em;
}

#content {
margin-left: 10em;
}
</style>
</head>
<body>
<div id=”navigation”>
<ul>
<li><a href=”#”>This</a></li>
<li><a href=”#”>That</a></li>
<li><a href=”#”>The Other</a></li>
</ul>
</div>

<div id=”content”>
<h1>Ra ra banjo banjo</h1>
<p>Welcome to the Ra ra banjo banjo page. Ra ra banjo banjo. Ra ra banjo banjo. Ra ra banjo banjo.</p>
<p>(Ra ra banjo banjo)</p>
</div>
</body>
</html>

Questions:

What does “navigation” refer to? What about “content?”

What happens when you change margin-left under content from 10 to 20?

What would happen if you changed the content margin from 10 to 5? What is the relationship between the width of the navigation area and the margin for content?

How could you move the navigation from the left side of the page to the right?

What would happen if we switched the positions of “navigation” and content in our <body> section? Try cutting and pasting “content” above “navigation” and see what happens. What is going on?

Let’s try 3 columns:

Copy and paste the following code in your internal stylesheet:

It should look like this:

#navigation2 {
position: absolute;
top: 0;
right: 0;
width: 10em;
}

#content {
margin: 0 10em; /* setting top and bottom margin to 0 and right and left margin to 10em */
}
</style>

How do you need to change your code in the body section to refer to our new third column?

How could we add a header?

Ok, we’ve done our layout, what about adding some styling?

How could we incorporate this:

body
{
background-color:#d0e4fe;
background-image:url(dogs.gif);
background-repeat:repeat;
background-position:center;
}
h1
{
color:orange;
text-align:center;
font-family:Times New Roman;
font-size:3em;
}
h2
{
color:orange;
text-align:center;
font-family:Times New Roman;
font-size:2em;
}
p
{
font-family:Times New Roman;
font-size:1em;
}