Week Three | Part One: Display Characteristics

HTML Display Characteristics Review

HTML elements (words, pictures, etc.) are written into your Web page code in four different ways:

• In blocks (one element follows the next top-to-bottom).
• In a line (one element follows the next left-to-right.)
• In a list (like this one).
• Not at all (shows in your code, but not in your browser).

In Week Two - Part One we looked at the concept of block-level elements. We found there are a number of elements (such as <p>, <h1> and <img>) that will force the next element underneath it from top-to-bottom.

We also looked at in-line elements that will normally not cause a line break. Some of these elements (called presentation tags) included <em>, <cite>, and <strong>. A partial list was found in Week Two - Part Three.

I wrote in my Week 2 lecture that I could change the display of these two types of elements if I wanted to.

We're going to do that right now.

Changing Display from Block to In-line

Remember my dog Snuffy? Of course you do!

Snuffy is, by virtue of being an <img>, inherently a block-level element. But I can change this by changing the display property for his image.

Since I don't want to mess up the display properties for all my images, I'm going to create a special class that will allow me to alter the display properties just for this example.

I'll start by creating a special class that will only apply in those instances where I want to have images of Snuffy appear in-line across my Web page. I'll add the following class selector to my style sheet:

img.snuffy {display: inline;
margin: 5px;}

You might be wondering why I wrote the selector in that way --- img.snuffy.

This is an example of a contextual selector. It can be applied to any type of selector (common, class, id) and gives me a greater level of styling control

Because of how I wrote this selector, its properties will only apply to images that have been classed as "snuffy".

I'll apply this new class to pictures of Snuffy on my Web page. Here's what the mark up code looks like:

<img class="snuffy" src="../images/snuffy.jpg" width="150px" height="150px" alt="Snuffy" />
<img class="snuffy" src="../images/snuffy.jpg" width="150px" height="150px" alt="Snuffy" />
<img class="snuffy" src="../images/snuffy.jpg" width="150px" height="150px" alt="Snuffy" />
<img class="snuffy" src="../images/snuffy.jpg" width="150px" height="150px" alt="Snuffy" />

Would you like to see the result?

Go to Week Three - Part Two.