This tutorial will introduce you to styling the HTML Content Division element—or element—using CSS. The element can be used to structure the layout of a page and break up a webpage into separate components for individual styling. In this tutorial, you will create and style elements, as well as learn how to add and style other elements inside a container. These skills will prepare you to use elements as layout tools later on in the series when you begin recreating the demonstration website.
The
element is used by adding opening and closing
tags to an HTML document. On its own, the
element typically has little visual effect on the presentation of a webpage. To specify the size, color, and other properties of a
element, you can assign it style rules using CSS.
Prerequisites
To follow this tutorial, make sure you have set up the necessary files and folders as instructed in a previous tutorial in this series How To Set Up You CSS and HTML Practice Project.
Let’s try a hands-on exercise to study how the element works. Erase everything in your styles.css file (if you added content from previous tutorials). Next, add the following CSS rule for the tag selector:
Save the styles.css file. Next, return to your index.html file, erase everything that’s there (except for the first line of code: ) and add the following code snippet:
Notice that the element has opening and closing tags but does not require any content. Save the index.html file and reload it in your browser. (For instructions on loading an HTML file, please visit our tutorial step How To View An Offline HTML File In Your Browser).
Your webpage should display a green box 100 pixels wide and 100 pixels tall as specified by the CSS rule:
CSS markup
You can use # for making an ID for your or just simply write div and set its height, width, etc. But when you have many divs, its better to use an ID.
Using span
HTML markup
Put the tag and write some text and then close it with . The span tag is generally used to select a part of line and apply some properties to it. However you can use it for selecting more than a single line.
CSS markup
Community Q&A
To apply fit to width to the web page you are viewing, go to the right of the status bar and click the arrow next to the zoom slider. Select “Fit to Width” and the page will be adjusted accordingly. To return to normal display mode and turn off fit to width, select this option again.
Thanks! We’re glad this was helpful. Thank you for your feedback. As a small thank you, we’d like to offer you a $30 gift card (valid at GoNift.com). Use it to try out great new products and services nationwide without paying full price—wine, food delivery, clothing and more. Enjoy! Claim Your Gift If wikiHow has helped you, please consider a small contribution to support us in helping more readers like you. We’re committed to providing the world with free how-to resources, and even $1 helps us in our mission. Support wikiHow
