Using CSS to style HTML

The easiest way to demonstrate how CSS works is through examples of the code, and then how these code examples would display on a web page. With CSS, there are lines of code that needed to be added to the basic HTML that determine specific regions to be stylized by CSS. One of the most common of these elements is called a “div”. Think of div as short for division, or divider. Once a certain section of HTML is placed within a div, you can control how everything in that div looks, and also how it might be placed on the web page.

Here is an example of some HTML code set inside a div:

<html>
<head>

<style type=”text/css”>

#imagefloatright {
float: right;
width: 200px;
height: 200px;
}

</style>

</head>

<body>

<div id=”imagefloatright”>
<img src=”http://outwardimage.net/blog_examples/boat-homepage.jpg” />
</div>

<h1>Top 50 Boats</h1>
<p>On the list, many familiar names are represented, but there are a few surprises. Pictured to the right is the top boat in this year’s show.</p>

</body>
</html>

Click the following link to see how this code would display in a browser window.

Popup Example

You can see by the popup example that the image of the boat (<img src=”http://outwardimage.net/blog_examples/boat-homepage.jpg” />)ended up on the right side, as it was designated to “float” to the right (float: right;) inside the div called “imagefloatright”(<div id=”imagefloatright”>).

The div is set inside the HTML using this format:

<div id=”(name of div)”>
[text or visual content]
</div>

from the example:
<div id=”imagefloatright”>
<img src=”http://outwardimage.net/blog_examples/boat-homepage.jpg” />
</div>

The div has an opening and closing tag like all other HTML. The div needs the id to designate it from other divs. You can name a div anything you want, but you should name it something relevant to what is going to be in the div or where the div may be placed on a page. Any text or other content is placed between the opening and closing div tags, and is carried along with the div wherever it goes.

In the example, the content is an image, placed between the div tags.

The div is referenced in the CSS code by using a # symbol for a div. So in the head section of the HTML code, between the CSS style tags, the div is designated in our example by:

#imagefloatright {}

The elements that you place within the {} symbols are the style properties that the div will be assigned, thus affecting how that div displays.

Again, in our example, the CSS code looks like this:

float: right;
width: 200px;
height: 200px;

Each one of these lines is called a CSS declaration. A declaration consists of a property and a value. In the case of the first line, the property is “float” and the value is “right”. All CSS declarations are written in the same syntax. Following the same example, each declaration begins with the property to be defined (float), followed by a colon (:), a space, then the value (right), and then finally a semi-colon;

The other declarations are pretty obvious as to what properties they control. The div is exactly 200 pixels wide by 200 pixels high, a perfect square.

 

This entry was posted in HTML-CSS Lessons. Bookmark the permalink.

Comments are closed.