How To Use DIV Elements to Change CSS Properties

Q

How To Use DIV Elements to Change CSS Properties? - XHTML 1.0 Tutorials - Understanding DIV and SPAN elements

✍: FYICenter.com

A

As elements containers, "div" elements are perfect places to set CSS properties which will be applied to all elements in the container. Here is a tutorial example of how to set CSS properties on "div" elements:

<?xml version="1.0" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
 <head>
  <title>DIV Elements with CSS Properties</title>
 </head>
 <body>
 <div>
  <h4>XHTML Interview Questions</h4>
  <div style="background-color: #eeeeee; padding: 4px;
   font-style: italic; font-weight: bold">
   Q: What is the number one advantage of using XHTML?
  </div>
  <div style="background-color: #ffeeff; 
   padding: 4px 4px 4px 20px;">
   A: XHTML documents are well-formed XML documents.
   This allows your documents to be processed by any XML 
   applications.</div>
  <div style="background-color: #eeeeee; padding: 4px;
   font-style: italic; font-weight: bold">
   Q: What is most difficult part when converting 
   a HTML document into an XHTML document?</div>
  <div style="background-color: #ffeeff; 
   padding: 4px 4px 4px 20px;">
   A: The most difficult part is to make all elements
   are closed. XML documents requires that all elements
   must be closed with closing tags or with the extra "/" 
   at the end of the opening tag.</div>
 </body>
</html>

If you save the above document as css_settings.html and view it with Internet Explorer, you will see that CSS properties are specified for different "div" elements as shown below:

2007-05-12, 6004👍, 0💬

Can DIV Elements Be Nested
Can DIV Elements Be Nested? - XHTML 1.0 Tutorials - Understanding DIV and SPAN elements Can "div" elements be nested? The answer is yes. In fact, nested "div" elements provides you more flexibilities to specify CSS properties at different levels. Here is a tutorial example of nested "div" elements: ... 2007-05-12, 5504👍, 0💬

What Is a DIV Tag/Element
What Is a DIV Tag/Element? - XHTML 1.0 Tutorials - Understanding DIV and SPAN elements A "div" element is a block element that you can use a container of flow elements (flow elements are really the superset of both inline elements and block elements). By default, "div" elements will be treated as pa... 2007-05-12, 5484👍, 0💬

How To Change Text Fonts for Some Parts of a Paragraph
How To Change Text Fonts for Some Parts of a Paragraph? - XHTML 1.0 Tutorials - Understanding DIV and SPAN elements If you want to change text fonts or colors for some parts of a paragraph, you can use "span" element with "style" attributes to specify font and color information as CSS properties. He... 2007-05-12, 5384👍, 0💬

Can DIV Elements Be Floated
Can DIV Elements Be Floated? - XHTML 1.0 Tutorials - Understanding DIV and SPAN elements Can "div" elements be floated? The answer is yes. If you want to float a "div" block, you can use the "float" CSS property. Here is a tutorial example of floated "div" elements: <?xml version="1.0" ?&... 2007-05-12, 5372👍, 0💬

Can BLOCKQUOTE Elements Be Nested
Can BLOCKQUOTE Elements Be Nested? - XHTML 1.0 Tutorials - Body Tag and Block Level Tags Yes. Blockquote elements can be directly nested. This allows you to include one quote inside another quote. Below is a good example of nested blockquote elements: <?xml version="1.0" ?> <!DO... 2007-05-12, 5351👍, 0💬

What Are HR Tags/Elements
What Are HR Tags/Elements? - XHTML 1.0 Tutorials - Body Tag and Block Level Tags A "hr" element is a block level element that can be used directly as a sub-element in the body element. You can use "hr" elements to specify horizontal rulers. Here are basic rules about "hr" elements: "hr" elements can... 2007-05-12, 5346👍, 0💬

What Are Heading Tags/Elements
What Are Heading Tags/Elements? - XHTML 1.0 Tutorials - Body Tag and Block Level Tags Heading elements are block level elements that can be used directly as a sub-element in the body element. You can use heading elements to specify heading in different sizes. Here are basic rules about heading eleme... 2007-05-12, 5272👍, 0💬

What is the Top Level Structure of an XHTML Document
What is the Top Level Structure of an XHTML Document? - XHTML 1.0 Tutorials - Document Structure and Head Level Tags The top level structure of a XHTML document consists of three parts: XML processing instruction - Provides XML version information and character set declaration. Document type declara... 2007-05-12, 5047👍, 0💬

What Is a SPAN Tag/Element
What Is a SPAN Tag/Element? - XHTML 1.0 Tutorials - Understanding DIV and SPAN elements A "span" element is an inline element that you can use a container of inline elements and text contents. By default, browsers will do nothing on "span" elements unless specify some CSS properties in them. Here ar... 2007-05-12, 5042👍, 0💬

All rights in the contents of this web site are reserved by the individual author. fyicenter.com does not guarantee the truthfulness, accuracy, or reliability of any contents.