View All Pages

Divs

About <div>s

<div>s are divisions in your page. They allow you to format sections of text in a variety of ways.

Formatting

For example, remember the blockquote with the line on the left side of the indented text? Using a <div> like the following creates the same look but you have control over the color and width of the line and how far it indents.

<div style="border-left-style: solid; border-color: #888888; border-width: 10px; padding-left: 10px; margin-left: 20px;">

this is not a quote, just a bunch of regular text. Me sol eat ancillary en. Ea usu stet alters. Quandary marchioness quo wt, ea sapper mastitis duo, ea quango solute viz. Us doctors time am error ibis no. In corpora cementum cum, man lull dissent in. Eel ecus linguists efficient ea, veil sale disciple at.

You can also set background colors using a <div>.

<div style="margin-left: 30px; padding: 10px; background-color: #fff0d8; width: 60%; text-align: center;">

These can be used to visually highlight important things. 

Floating

<div>s also let you float bits of text like you would an image or video.

<div style="border: 5px double #01428a; padding: 5px; margin: 10px; width: 300px; float:right;">

Please pay attention to the due dates for this module as they are earlier than normal because of the holiday.

Your other text would wrap around the <div> like if would for a picture you floated. The trick is to make sure to always put a width in the <div> tag or the <div> will simply take the entire width of the page and nothing will float.

Note that Canvas will automatically condenses the border attributes if you have the same border around the entire div instead of listing width, color, and style separately.

Border style options from W3Schools:

The following values are allowed:

  • dotted - Defines a dotted border
  • dashed - Defines a dashed border
  • solid - Defines a solid border
  • double - Defines a double border
  • groove - Defines a 3D grooved border. The effect depends on the border-color value
  • ridge - Defines a 3D ridged border. The effect depends on the border-color value
  • inset - Defines a 3D inset border. The effect depends on the border-color value
  • outset - Defines a 3D outset border. The effect depends on the border-color value
  • none - Defines no border

The border-style property can have a separate value for each side by specifying to which what side you are applying the border.

  1. border-top
  2. border-right
  3. border-bottom
  4. border-left