How to Make a Block Element With CSS

As CSS becomes a driving force is 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. You could say a block element acts like a paragraph: think of it as an element that forces a new line, that doesn't share space. Making block elements is part of web page spacing design, as engineers improve on the old HTML tag system.

Difficulty: Challenging

Instructions

1. Define your object. Use either a simple definition (Ex: h1 for a headline) or a class. Classing an element in CSS involves giving it properties defined in CSS selector commands, for example, if A is your element: A {color: red}

2. Now, if A is some element you want to make into a block element, you can use another CSS command to render it that way using the display command. For A, the command would look like this: A {display: block}

3. Consider also using other display styles that make a block element, such as 'list-item', 'compact' and 'run-in'. (Both 'compact' and 'run-in' support multiple display styles).

4. Manifest your element by using open and close tags in CSS and putting text or other code inside.

5. Do a page view to see if CSS made your element into a block element. If it appears on its own line and positioned as you intended, you're successful.

6. To check your syntax further, go to the W3 site and use their validator tool. Simply upload your page code and the CSS validator will show you any errors.

Resources

• CSS information from the World Wide Web Consortium, the CSS standards organization.
• Includes tutorials.