The div tag is used to specify a section within an HTML document. Anything from text to images to videos can be placed within a div. Divs are similar to tables but they are easier to use, customizable with CSS, and load faster than tables. Divs also make it easier for search engine spiders to “crawl” or examine a website – making your website easier to find via Google.
Div ID vs. Class
Beginning web designers sometimes wonder what the difference is between div id and div class. Div id should be used to identify a single element that appears only once within a document. Div class should be used to identify elements that appear more than once within a document. For example, let’s say that you have an HTML document that uses a div for the header and a div to contain each image. Since the header will only appear once you might code
< div >< img src="”header.jpg”" alt="" />< /div>
Since you may have more than one image you might code:
< div >< img src="”image1.jpg”" alt="" /> < /div>
Div ID and Class (Explained in Detail)
Difference Between ID and Class
Div layouts can be created within HTML or PHP documents. Div layouts are always modified by using CSS. With CSS you can change the height, width, color, and other elements of a div layout. You can create your own layout using web design software or find free, clean div layout templates on the web.
How to Create a Div Layout Step by Step
You can modify the size of a div in a variety of ways. The most common way to define a div’s size is through pixels. For example, in a CSS document you might code #image1 {height: 24px} to define the height of a div that is used to contain images. You can also define size by a percentage by coding #image1 {height: 24%}.
CSS floats are commonly used when you’d like to place divs side by side rather than one on top of another. The float property allows you to float a div right or left on the webpage. There are two ways to use the float property. Floats are intended to wrap around another div, or even an image. The first is through the initial div tag by codin:
< div >left div< /div>
The second way is by assigning the div its own ID and defining the float property within the context of a CSS document. E.g. #rightdiv { float: right; }.
Step by Step Floating Tutorial
You can change the font, border, and inside color of a div. This can all be done within the CSS file. To change the font color you may code something like h1 { color: #FFFFFF; }. To change the border color you may code something such as #SuperDIV { border-color: #CCFFFF; }. Finally, to change the color of a div you may code something like #SuperDIV { color: FFCCFF; }.
Setting Div Layer and Background Colors
Changing Div Size, Color, and Location
Borders are the surrounding line of divs and tables. You can change the border color, style and width or choose to display no border at all. If you choose to use the border style option you can choose from a solid, dotted, dashed, groove, ridge, double, inset, outset, or hidden. Use pixels to define the width of a border.
Border Sides
border-top:
border-left:
border-bottom:
border-right:
Border width
border-width: thin;
border-width: medium;
border-width: thick;
border: 1px;
border-top: 2px;
Border Styles
border-style: dotted;
border-style: dashed;
border-style: solid;
border-style: double;
border-style: groove;
border-style: ridge;
border-style: inset;
border-style: outset;
Padding is the amount of space between the contents within a div or table and the div or table’s border. Without the use of padding, the text or images can appear “smooshed” against the border. Padding should be used for divs with borders to create a clean look. Padding is defined by pixels.
Margins are similar to padding except that they are the area outside of the border. You may wish to use margins if you are placing divs side by side or are trying to place a div in a very specific area. Margins are defined by pixels. For example, you might code #SuperDIV { margin: 22px; }.
Centering and Auto-Width Margins
External CSS files are documents that contain only CSS code. They can be linked to HTML and PHP documents and are useful when coding an entire website rather than just one webpage. They are also useful when your CSS code is very lengthy. To link external CSS files to an HTML or PHP document use the following code within the header section: .
To include an external style sheet in your webpage include the following code in the head. Be sure to replace "style.css" with your stylesheet's filename.
< link rel="stylesheet" href="style.css" />< style >
Creating and Linking External CSS Files
While divs and CSS may seem a bit complex at first, they are actually rather simple to master. With time and patience, you can create stunning div layouts using CSS and HTML. The following websites can offer you more information and in-depth tutorials on divs and CSS.
