How To

How to Make an Inline Element With CSS

Contributor
By eHow Contributing Writer
(0 Ratings)

As CSS becomes a driving force in new web page design, many are discovering how the language makes coding pages different from straight HTML. One main idea in CSS is the difference between different types of elements as designers move beyond the outdated HTML tag system. The inline element shares space with other elements to maximize page space.

From Quick Guide: Working With HTML and CSS
Difficulty: Moderate
Instructions
  1. Step 1

    Go to the spot where you keep all of your CSS code, whether it's in a separate file or imbedded in the page. Go to where you want your element to appear.

  2. Step 2

    Create or modify your element. You are either addressing a simple element of HTML, like an image, text, icon or a class. Properties of classes are created by the programmer.

  3. Step 3

    Now look at your display option. Inline is the display default, so you may not need to enter a display command, but if your element needs to be one of several more complex options, you'll need to specify that with a command like {display: (element type)}

  4. Step 4

    Add any indicators for inline elements that help the browser decide where the item goes on the line, like (align) or (vertical).

  5. Step 5

    Go to a page view to see if your element appears as it should, in line with other elements. If your element has forced a new line, it's not inline, and you'll have to go back and modify the code again.

Tips & Warnings
  • CSS validators exist. One is on the W3 website. The W3 or World Wide Web consortium is the standards organization for CSS. You can use their software to see and fix CSS errors on your pages.

Post a Comment

Post a Comment
  • Have you done this? Click here to let us know.
I Did This

Related Ads

Computers
Alexia Petrakos,

Meet Alexia Petrakos eHow's Computers Expert.

Get Free Computers Newsletters

Copyright © 1999-2009 eHow, Inc. Use of this web site constitutes acceptance of the eHow Terms of Use and Privacy Policy.   en-US

eHow Computers
eHow_eHow Technology and Electronics