Positioning Elements in CSS

By: Daniel Imbellino
Updated: Feb 28, 2013

There are a number of ways to position elements within your webpages using CSS. You can use the CSS ID# selector or classes that typically start with a period, and then reference back to those selectors and classes within your HTML itself. You can position elements in CSS using the values: absolute; relative, fixed, and inherited. But the first thing we need to do is to clarify how CSS ID's and Classes work.

CSS ID Selector:
CSS ID selectors start with a pound "#" symbol followed by a name we will reference later in our web page, like this:
#sitebanner {width: 800px; height: 125px; background-image: url(my-image.png"); }

You then need to reference your ID in your HTML, like this:
<div id="sitebanner">
</div>
By placing the "#sitebanner" ID in your CSS and then pointing to it with a "div" tag in your HTML, you effectively link your ID's style with its "div" element inside your HTML. The division ID "banner" in your HTML will display the image you specified, as well as its height and width attributes as we specified in our CSS.

CSS Classes:
CSS classes start with a "." period, and are then followed by the selector you plan on styling, like this:
.italic {font-size: 45px; font-style: italic; color: blue; }

You can use classes to directly change style information anywhere inside your pages content:
<p>This is a <span class="italic">paragraph</span></p>
What we just did was use the span property along with the class attribute to define separate formatting for the word "paragraph" specifically. The Class selector just like ID's can also be used to position elements within your webpages, although its probably best to use the ID selector for general layout, and use classes to fine tune certain areas of your content. The "div" tag is generally thought to be used for specifying a placeholder for content, while as "classes" are typically thought to be necessary for styling content once its in place.
You can also directly apply a class to an element like this:
.heading {font-size: 50px; font-family: "times new roman"; color: blue; text-align: center; }

You then reference this class in your HTML like this:
<h1 class="heading">Check out our CSS tutorials!</h1>
What we just did was effectively use the class we created (heading) to reference our styles in our HTML.

you can also specify that all elements in a given class use the same formatting like this:
p.highlight {font-size: 25px; font-family: arial; color: red; text-align: center; }
We then reference this in our HTML like this:
<p class="highlight">Welcome to our website!</p>
What we specified is that all "p" elements that use the class "highlight" will share the same formatting. This way you can apply different styles to specific elements. We are effectively defining which element of a given class receives a specific type of formatting. This will apply this style to all p elements in that class.

On the next page we will begin showing you how to position elements on your web pages using the "class" and "ID#" selectors.

Continue to Part 2 of CSS Positioning..