HTML and CSS Essentials

The HTML and CSS Essentials class helps students master the basics of HTML and HTML5 markup and how to use CSS for typography and positioning. The focus is on building Web page layouts using standard markup, presentation, and scripting languages. Below are excerpts from lectures, exercises, multimedia tools, and instructor feedback.

Lecture 5 Excerpt

Controlling Page Elements
Setting Visibility, Clipping, and Overflow

To make an element "invisible," use the visibility property to hide it from view.

To make our fish box disappear, just add the following:

#fish {
width: 200px;
visibility: hidden;
float: left;
border: 1px dashed gray;
background-color: #fbf7fb;
text-align: justify;
padding: 10px;
spacing: 10px;
}

Now our fish box is invisible. You'll notice though that the browser still makes room for the element—there is a space where the element used to be. In other words, the visibility property doesn't affect the layout of the page; it just controls whether or not we can see certain elements.

Note: If you want to completely remove an element from a layout, use the display property instead, and set its value to "none".

Overflow

Sometimes you'll want to make the content of an element overflow or "spill out" of the element area. For example, suppose we apply the following width and height settings to the "fish" element, removing the visibility setting:

#fish {
width: 100px;
height: 100px;
float:left;
border: 1px dashed gray;
background-color: #fbf7fb;
text-align: justify;
padding: 10px;
spacing: 10px;
}

Note that we've very tightly sized both the width and height of the element. But we have so much text that it doesn't fit in a 100x100 pixel area—the text just spills out of the box. The default behavior is for the content to just spill outside of the element, like this:

This may not be the behavior you want—you may want to maintain the dimensions of the box. Perhaps you'd prefer that any overflow is simply cut off (or hidden from view), or maybe you'd like a scroll bar to accommodate the extra text?

You can achieve these effects using the overflow property. You can set the property to "hidden", effectively cutting off the overflow from view:

#fish {
width: 100px;
height: 100px;
float:left;
overflow: hidden;
border: 1px dashed gray;
background-color: #fbf7fb;
text-align: justify;
padding: 10px;
spacing: 10px;
}

This results in:

Or, you can set the overflow property to "scroll". This adds a scroll bar to the element:

#fish {
width: 100px;
height: 100px;
float:left;
overflow: scroll;
border: 1px dashed gray;
background-color: #fbf7fb;
text-align: justify;
padding: 10px;
spacing: 10px;
}

You'll note that the "scroll" value will always add the scroll-bar, even if the content fits in the containing element and there is no overflow. That's not good. If you want to attach a scroll-bar only if there is overflow, use the "auto" value instead. Try increasing the dimensions of the fish box to see how it works.

Clipping

What if we only wanted to show a small piece of an element? We could apply the clip property to absolutely positioned elements to "clip out" a visible piece while hiding the rest. Using it is a little complicated, so let's start by trying it with the fish passage. First, make the fish box 100px square and absolutely positioned:

#fish {
position: absolute;
width: 100px;
height: 100px;
border: 1px dashed gray;
background-color: #fbf7fb;
text-align: justify;
margin: 10px;
padding: 10px;
}

Now, we're going to add the clip property:

clip: rect(5px, 80px, 75px, 15px);

Now, our element looks like this:

Pretty neat—but you're probably wondering what the heck just happened! What we defined in the clip property was an area (specifically a rectangle) that serves as a "window" to show through some of the element, while hiding the rest.

Let's look more closely at the code. First, we've defined a shape of the clip (or "window"). We've set it as a rectangle (which, for now, is the only possible option). Then we've designated where the edges of the rectangle are relative to the top, left-hand corner of the object, in the following order: top edge, right edge, bottom edge, left edge.

Still confused? That's understandable! Go to the einstein folder in the lesson5 folder. In the enclosed HTML document, a <div> tag wraps a link to an image of Einstein:

<body>
<div id = "einstein">
<img src="einstein.gif" alt = "einstein photo"/>
</div>
</body>

Now apply the clip property in the CSS document to the einstein ID:

#einstein {
position:absolute;
clip: rect(5px, 80px, 75px, 15px);
}

What happened? It doesn't take the great man to figure it out. The clip property is showing only part of the image.

Clipping an area of a div

This shows where the clip is relative to the rest of the element:

 
 

  • The top edge of the clip window is 5 pixels from the top of the element (the first number).

  • The right edge of the clip is 80 pixels from the left edge of the element (second number).

  • The bottom edge of the clip is 75 pixels from the top of the element (third number).

  • The left edge of the clip is 15 pixels from the left edge of the element (last number).

 
 

Note: You are also allowed to use negative values (e.g., -20px), which would pull the clip out of the element area.

Creating and Using ID Selectors

Using ID selectors along with div elements is an ideal way to split up your page into logical chunks, based on a content section's role on a page (whether it be a page header, footer, or navigational element). Not only does it make it easy to manipulate these different parts of a page using CSS, but breaking down the content by function also makes more meaningful sense of the XHTML code. A couple of things to keep in mind, however, as you endeavor to assign ID tags to sections of a Web page:

1. Remember that you can only assign one XHTML element a particular ID tag. If you call one div element "navigation", you cannot use that ID name in another div on the Web page. If you need to assign a particular role to more than one element on a page, use the class attribute instead.

2. Don't imply presentational aspects in your ID names. Even if you do plan on putting your navigation menu to the right of your main content, don't name it something like "rightcol". You want to assign an ID name based on what the element does, rather than what it looks like. So, your navigation menu should be called something like "nav". That way, if you (or your client) ever decide to change the location of the navigation menu (like to the left of the main content instead), you aren't stuck with an ID name that implies it should be somewhere else!

This hearkens back to golden rule: Presentation should be strictly separated from content. Nothing in your XHTML should control (or imply) how the page looks.

Extra Practice:Add special controls to page elements.

Column-Based Layouts

Let's switch gears now to look at how to create columns in your layouts. Most professional Web sites feature some version of the column-based layout. A more minimalist site may get away with a single column, but a robust site with more information will probably be split into two or more columns.

http://satsu.co.uk: The site may look complex, but it's a one-column layout.
http://modernbluedesign.com: This sophisticated design is simply a version of a multi-column layout.

The main strategy for creating a column-based layout is to:

 
 

  • Split up the XHTML page into sections (header, menu, and so on) using div tags and the ID attribute.

  • Size and position those divs using CSS.

 
 

Fixed and Fluid

There are two main kinds of layouts: fixed and fluid. Sound familiar? As you learned earlier in the course, table layouts work like this too, though CSS layouts are far more powerful.

A fixed layout is one in which the columns are a static width—they remain the same size no matter how big the browser window is. Fixed columns are created by setting a width to the relevant div. If we want our "main" div to be 350 pixels wide, we would write the div ID like this:

#main {
width: 350px;
}

A fluid layout is one in which the columns stretch or shrink as the browser window is resized. They are created by assigning a percentage to the relevant div. Below, we're telling the browser that the "main" div is 45% of the width of the containing element:

#main {
width: 45%
}

One advantage of a fluid layout is that it takes advantage of all the space on the screen—you aren't left with large swaths of "white space." And, all of your content fits inside the browser window—you don't have to worry about text being cut off, or forcing your users to scroll horizontally in order to see the rest of the page.

A disadvantage of a fluid layout is that you ultimately have less control over the design when you can't predict the exact size of the elements on the screen. And, if text is squeezed into too small of a space, or columns are stretched out over too large an area, your page can look odd or even be illegible.

In short, both fixed and fluid layouts have their advantages and disadvantages, and you'll have to decide which one to implement according to the needs of your particular site (or your particular design tastes).

Let's work through creating a few fixed and fluid layouts. Open the condos.html file in your condos folder and create a CSS document called condos.css to follow along.

One-Column Fluid Layout

The easiest layout to create is the one-column fluid layout. You just have to assign a percentage to the left and right margin of the body element.

For example, you can use this CSS to style the body element of the page:

body {
font: 13px verdana, sans-serif;
background-color:#cad6d7;
margin: 0 25%;
}

The result in your browser is this:

The margin is set to be 0 at the top and bottom, and 25% on the sides.

One-Column Fixed Layout

Creating a centered, fixed one-column layout is a bit more involved. First, wrap all the content in your page body in a div, and give it an ID attribute:

<div id="content"></div>

Then, apply a width, some padding, alignment, background color, and border to this div:

#content {
width: 500px;
padding: 15px;
text-align: justify;
background-color:#cad6d7;
border: 1px solid black;
}

Next, add a 50% padding to the body element:

body {
font: 13px verdana, sans-serif;
padding-left: 50%;
}

Finally, add a left margin to the div that is equal to half the width of the column:

#content {
width: 500px;
margin-left: -250px;
padding: 15px;
text-align: justify;
background-color:#cad6d7;
border: 1px solid black;
}

This gives us a page that looks like this:

Two-Column Fluid Layout

Let's move on to creating a two-column fluid layout which, when we're through, will look something like this:

The main column should be fluid, but the navigation column's width will be fixed. Delete your "content" div, and remove everything from your CSS file:

You'll see that your document contains some other divs, sectioning off the header, main text column, and navigation:

<div id="header">
<h1>The Monolith</h1>
</div>

<div id="main">
<em>The Monolith
...
</div>

<div id="menu">
<a href ="blank">Views</a>
...
</div>

Essentially, what you're going to do is float the menu to the right. As all floated elements need a designated width, we are going to assign the menu column a width, as well as some other attributes:

#menu {
float: right;
width: 150px;
margin-right: 1.67em;
border: 1px solid black;
padding: 10px 1em 10px 1em;
}

We're also going to add a left and right-hand margin to the body element to squeeze the columns in a little, as well as specify a font and background color:

body {
margin-left: 10%;
margin-right: 10%;
font: 0.9em/1.5em Verdana, sans-serif;
background-color:#cad6d7;
}

The only thing left to do is to tweak some of the lesser aesthetic properties of the menu:

#menu {
float: right;
width: 150px;
margin-top: 5px;
background-color:#f3deee;
margin-right: 1.67em;
border: 1px solid black;
padding: 10px 1em 10px 1em;
}

Notice that the menu is floated, but far down the page because its div in the XHTML code is after the main div. This is an easy fix: Simply cut out the entire menu div and paste it above the main div in the XHTML page. The order of your divs in your XHTML code matters!

Two-Column Fixed Layout

You can create a fixed-width two-column layout similarly. Instead of setting the width of the main column using percentages, however, you set it using a length (like pixels).

Then, just give the body element a width, which will thereby set the width for the header and navigation column as well (the navigation column will take up the remainder of the width of the body—here, 360 pixels—and the header will span the whole length of the body):

body {
margin: 10px;
padding: 0;
width: 800px;
font: 0.9em/1.5em Verdana, sans-serif;
background-color:#cad6d7;
}
#header {
margin-left: 10px;
}
#main {
float: left;
width: 440px;
padding: 10px 1em;
}
#menu {
padding: 30px;
}

You'll note that the text column remains stable as the browser resizes. Below 440 pixels in browser width, however, the menu on the right will wrap below the main content area.

Extra Practice: Create a page layout with fixed and fluid columns.

Comparing Structural and Presentational Markup

The beauty of CSS is its ability to completely alter the look of a Web page without touching the underlying XHTML. The paradigm demonstration of CSS's power is the CSS Zen Garden (http://csszengarden.com), which showcases dozens of CSS style sheets created by graphic artists as applied to one XHTML document.

Below is a screenshot of the CSS Zen Garden page without a style sheet applied. Notice how readable it is, even in its bare bones state:

Then, we start to see the transformative power of CSS as we add a stylesheet:

CSS Zen Garden dressed in a style called "Organica Creativa"

So, we've radically changed the look of the site just by styling the page with CSS. We haven't touched the XHTML code! The power of CSS to manipulate the way elements look is evident when we compare the page with and without a style sheet. Importantly, all of the structure and content of the page is intact without the CSS (which shows how accessible the page would be to non-standard browsers). Any and all presentational aspects are applied using the CSS style sheet.

And we can change the look of the site completely, by simply switching the style sheet:

This style is called "Pretty in Pink."

Here we have the same page, the same XHTML structure, just different styling applied to the elements. So, here, we've not only changed the colors of the elements and their underlying graphic images, but we've also changed where the main sections (the menu, main content, header, and so on) are located on the page.

Exercise 5 Excerpt

CSS Positioning

In Lecture Five, we explored just how far CSS can take us. CSS is not only useful for setting the typography on a Web page or establishing the properties of block level elements. It can also be used to position page elements and create page layouts out of basic styling "building blocks."

In this exercise, you'll put these principles into practice. First, you'll design a two-column layout for a home page with three sections: header, navigation, and content. Then, you'll create an experimental page with some box-level elements that demonstrate your control of CSS positioning.

Project Brief

Part I: Two-Column Layout

For this part of the assignment, you will need to create a two-column layout, supplying your own content from a real or fictional Web site. I would like you to design the home page of the site, using three divs—one for the header, one for the navigation menu, and one for the main content, like so:

A footer is optional, and your menu can float either left or right.

Recap the main properties used for CSS positioning in the following Review Kit before you begin your page:

1. Mark up the page

Start by the marking up the page content in XHTML. You'll need a header, 4-8 navigation links, and at least two paragraphs of body text.

To create "dummy" navigation links to other pages in the site, enter a pound sign (#) instead of a URL like so:

<a href="#">News</a>
<a href="#">Events</a>
<a href="#">Contacts</a>

This will create active links, but prevent the 404 missing page error when people click on your links.

Then wrap your main page sections in divs, like so:

<div id="header">
<h1>Header text </h1>
</div>

<div id="menu">
<p>Navigation menu
...</p>
</div>

<div id="main">
<p>Body text
...</p>
</div>

Validate your page before you go any further! http://validator.w3.org/

2. Basic CSS layout

All set? Create a link to an external stylesheet in the head of your page, like so:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>My Web Page</title>
<link rel="stylesheet" type="text/css" href="css/style.css"/>
</head>
<body>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
</body>
</html>

Now create a .css document in a local folder called "css" and make some basic styling decisions. (Remember to match the name of your CSS document with the name in the page head.)

Next... you know the drill! Choose font-family styles/sizes for headers and paragraphs, adjust letter-spacing and line-height as needed, and set background color and text color as desired. You can also add specific styles for lists, links, and more, as well as borders, padding, and spacing to box-level elements.

Tip: Using an external stylesheet, you can simply adjust the styles, save your CSS document, and refresh your HTML page in the browser to see your changes implemented.

3. Two-column layout

Now you'll create a two-column layout by specifying a width for either the "menu" or the "main" div and floating it left or right. I would recommend floating your menu to the left since you floated the main section to the left in the lecture.

As a reminder, floated elements are positioned vertically within normal flow, but are horizontally pushed all the way to the left or the right of the containing element. Content that follows a floated element in the markup then wraps around it. If the content following the float is too big (too wide, for example) to fit next to the float, it will appear below the float.

You will have some design choices to make. Will your columns be fixed or fluid? Make sure your header is prominent, your text is readable, and your navigation is clear. An effective home page template could be used throughout a small site. I'm looking forward to seeing your page.

Here is a screenshot of a two-column layout built using these principles:

4. Test your site

As always, remember to test your work in multiple browsers.

Test your work in Firefox and Safari before Internet Explorer.

Still unable to get part of your Web design working? Remember to check out Christopher's Web Development Troubleshooting guide for more step-by-step advice on how to get your CSS to work.

Part II: Pixel Positioning

OK, time for some fun. In this project, you'll create an interesting Web layout that will get you thinking about the benefits of positioning. You'll use absolute and relative positioning and floats to create the dynamic fireworks display layout you see here:

For this part of your assignment, I want you to explore the possibilities of positioning elements through CSS, but not in the usual way of taking a box with text in it and flinging it around the browser window!

First, I'll walk you through how I created mine. Then I'll have you create a CSS positioning layout of your own. You can set off some fireworks over your own home town or explore some other graphical project idea. All I ask is that your layout demonstrates:

 
 

  • Use of absolute positioning to anchor one or more page elements.

  • Use of relative positioning to anchor two graphics together.

  • Use of a float to anchor one graphic to the left or right.

 
 

The Guide to the City by Fireworks
Building the Graphics

The first step in any solid design project, in my opinion, is to get great photographs. Thanks to the combination of Flickr, the photograph sharing site, and Creative Commons, alternative licensing of content to full copyright, you can look for photographs to incorporate into your work for almost nothing.

First, go to an Advanced Search on Flickr (http://www.flickr.com/search/advanced/ ), and enter a search keyword or two at the top of the page and then check off the Creative Common options at the bottom of the search form: "Only search within Creative Commons-licensed photos," "find content to use commercially," and "find content to modify, adapt, or build upon."

The search results look like any other photo search on Flickr's site. However, the results of these images allow you to take and modify these images for your own projects as long as you give a mention to them, in some way, back to the original owner.

One way to do that is to provide a text link back to the original photo's Flickr page, like so:

<a href="http://www.flickr.com/photos/teleject/112505959/">
teleject</a>

For this project, I picked out four photos. Three were fireworks photographs from Flickr user rileyroxx and I picked one photo that contained a city landscape at night:

 
 
  • Nottingham Riverside Festival Firework Show #8
  • Nottingham Riverside Festival Firework Show #9
  • Nottingham Riverside Festival Firework Show #10
  • Miami Panorama at night
  
 

The Cityscape via Photoshop

The first thing I wanted to do was lay the foundation for the page. That meant getting the cityscape image prepared for inclusion into the Web page. As is, the photograph is a great shot of Miami at night. However, I wanted the image to appear seamless when the browser window resizes.

To do this, I worked in Photoshop. If you have Photoshop, click here to see how I did it. If not, please download the completed cityscape image.

City Placement

With the cityscape done, I turn my attention to inserting the image into the Web page. What I do is set up an XHTML page with an XHTML transitional DOCTYPE.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>City by Fireworks</title>
</body>
</html>

Next I add a couple of CSS rules:

body {
background-color: #282629;
margin: 0;
padding: 0;
background-image: url('cityscape.jpg');
background-repeat: repeat-x;
background-position: bottom center;
}
html {
height: 100%;
}

Remember the gradient? The base color that was used to make it is now the background color in the body selector. You can find the hexadecimal value for the background color by double-clicking the swatch color in Photoshop's toolbar. This will bring up the Color Picker dialog and the hexadecimal value will appear in the bottom (be sure to uncheck the "Only Web Colors" box):

The next two rules:

margin: 0;
padding: 0;

Deal with making sure there isn't any margin and padding around the edges of the entire browser window. These properties come into play later on when we want to move and position the fireworks.

The next rules bring in the cityscape into the Web page:

background-image: url('cityscape.jpg');
background-repeat: repeat-x;
background-position: bottom center;

The first property associates the cityscape image into the background of the body element-as well as telling the browser to repeat the image along the x-axis. The background position instructs the browser to set it at the bottom of the page.

The last rule, I have found, is mostly for Firefox:

html {
height: 100%;
}

This rule tells the browser to expand the visible portion of the Web document to include the entire height of the browser window. Since there isn't anything in the HTML document right now, Firefox assumes the viewable portion of the browser window technically isn't, well, viewable. This CSS rule forces Firefox to kick out to the entire height of the browser window, allowing the background image to rest comfortable at the bottom of the page.

So, with our city firmly in place, it's now time to bring on the fireworks.

Matching the Fireworks

The real hurdle for the fireworks images is that they are shown against an almost-black nighttime sky. A black nighttime sky is great for viewing fireworks, but the foggy Miami skyline had a nice brown, musty color on it. So, the trick is to match the background in the cityscape with the fireworks.

As with the cityscape, this required some Photoshop trickery. If you have Photoshop, click here to follow along. If not, download the finished fireworks images.

Firework Placement

With the images made, it's time to turn my attention to placing them on the page. (If you haven't already done so, be sure to download the example and experiment with the placement!)

To start, I insert the images into the HTML like so:

<div id="firework1">
<img src="fireworks1.gif" alt="" />
</div>
<div id="firework2">
<img src="fireworks2.gif" alt="" />
</div>
<div id="firework3">
<img src="fireworks3.png" alt="" />
</div>

For the first image, I want to move the fireworks to the right side of the browser window and place it in the upper-right corner. To do this, I set the position property to absolute as well as setting the top and right properties to zero:

#firework1 {
position: absolute;
right: 0;
top: 0;
}

If you recall, using absolute position takes an element out of the regular flow of the Web page. So this means that the other two images will "move up" in the Web page, like they were the first elements placed in the markup.

For the next image, I simply want to move a portion of it off the screen since it's already rather large as it is. So, I set a negative value for the top and left margins:

#firework2 {
margin-top: -100px;
margin-left: -100px;
}

For the next image, which I saved as PNG with robust transparency to give me a good layering effect, I'm going to use relative position. This allows me to move the image from its intended placement in the flow of the document. Specifically for this image, I move the image up 550 pixels by using a negative value and then move it to the left by setting the left margin to 66 pixels like so:

#firework3 {
position: relative;
margin-top: -550px;
margin-left: 66px;
}

That results in the final Web page—a nice fireworks display over a never-ending Miami landscape!

Conclusion

Many techniques—both coding and digital imaging—were used to pull off what appears to be a rather wonderful night in a city.

Being a professional Web designer involves having not only one strong suit, but being able to utilize different skills and bring them together in a cohesive manner. When you do that, well, it can set off fireworks. (What? Too cheesy?)

Have fun with this part of the assignment—I am looking forward to seeing what you come up with. Don't worry too much about the quality of the imaging. Your design can be anything within reason, just show me that you can utilize CSS positioning using these parameters:

 
 

  • Use of absolute positioning to anchor one or more page elements.

  • Use of relative positioning to anchor two graphics together.

  • Use of a float to anchor one graphic to the left or right.

 
 

Grading Criteria:

What your instructor expects you to do:

Use CSS to create a two-column layout with three sections: header, navigation menu, and main content.

Demonstrate your control of CSS typography and positioning by creating a page layout template.

Use CSS to style a page with four sections using three different positioning techniques: 1) Use absolute positioning to anchor one or more page elements. 2) Use relative positioning to anchor two graphics together. 3) Use a float to anchor one graphic to the left or right.

Demonstrate your understanding and control of CSS positioning in your design.

How to Post:

Once you're done, go to the Dropbox for this exercise and post links to both exercises with a brief comment.

If you have a question before sending your completed exercise for grading, use the Send Mail area to contact your instructor.

I look forward to seeing your work!

Web Pages by: Cathrine Harshman

"...BR elements should be used when making a forced break in the middle of a line of text, not for adding padding in a page design..."

Hi Cathrine,

Thanks for taking the time to work on the revisions -- even though you've reset the BR tags with P tags, the effect is still the same: using markup for presentational format. Remember, BR elements should be used when making a forced break in the middle of a line of text not for adding padding in a page design.

Instead of inserting markup for formatting purposes only, use the markup that is already in the page used for the content to format the pages. You do this by using the MARGIN and PADDING properties (along with any other CSS properties) to help design/format the page to your liking.

Good to see that the float property is now included the fireworks page along with the other examples of absolute and relative positioning. Keep up the great work!

If you have any questions in the meantime, please don't hesitate to ask.

Best,
Christopher Schmitt

http://www.christopherschmitt.com/
Faculty at Sessions College for Professional Design