Div Tag + Html Tag

Introducing a new tag called the <div> tag.  The <div> tag is a container that will hold information. On its own, the div tag does not have a value.  Although because the div tag is generic in nature, you can add value to the tag.

Here is a div tag that changes style properties and does not utilize an external style sheet.  The method of adding style without an external style sheet is classified as inline style.  The inline style works similar to the style defined in a style sheet, except you are defining the style with html code.

In the example below, the div style sets the color of orange.  Then all of the content within the opening and closing <div> </div> tags were set to the color orange.

 

See the Pen inline-div-tag by jhoffmanbcc (@jhoffmanbcc) on CodePen.

 

Div Tag + External Style Sheet

Now lets look at a div tag that is using an external style sheet.  In general it is wise to modify the style of html elements with a .css document.  In this example:

  1. Create a div ID
  2. Name the div ID
  3. Reference the div ID name in the CSS document.
  4. Add a # in front of the div ID when we are calling it in the CSS document.
  5. Add { curly braces }
  6. Place your CSS style within the curly braces.

Note:  A Div ID is meant to address a single instance and should only be used once within your code.

See the Pen Div ID by jhoffmanbcc (@jhoffmanbcc) on CodePen.

Note:  Be sure to click on the CSS tab in the Codepen example to view the style code.

Consecutive Div Tags + External Style Sheet

A single Div Class can be utilized multiple times. In this example:

  1. Create a div class.
  2. Name the div class
  3. Reference the div class in the CSS document with a div. then the name of the class
  4. Add { curly braces }
  5. Place your CSS style within the curly braces.

 

See the Pen Div Class by jhoffmanbcc (@jhoffmanbcc) on CodePen.

Note:  Be sure to click on the CSS tab in the Codepen example to view the style code.

Modifying Html Tags

A Div Tag is useful to add specification to an html document and link to a style sheet.  In web design you can also add classes to tags that we have learned before like: paragraph tags, img tags, heading tags and others.  Here are some examples:

 

See the Pen classes-with-tags by jhoffmanbcc (@jhoffmanbcc) on CodePen.

Note:  Be sure to click on the CSS tab in the Codepen example to view the style code.

A Div tags and Html tags are considered a block level elements.  A block level element takes up an entire line on a web page and will result with the next piece of visual code on the line below the ending point of the block tag.  Other block level elements are the paragraph tag or <p> and the heading tags like <h1> – <h6>.

On the other hand, sometimes web designers would like to add an element within a line of another piece of code.  This is considered an inline element.

The <span> tag is also a container that does not represent a specific meaning.  The web designer will once again need to add the name and the value to the span to provide meaning.  The <span> tag is an inline element and may be utilized as an accent within another piece of code.  Other inline elements are the link tags or <a> and the image tags like <img>.

Inline elements often add style and additional capabilities of an element.  Block elements often function as structural elements within a web page.

Questions