Using HTML 'div' Elements with CSS Properties

Q

How To Use "div" Elements to Change CSS Properties?

✍: 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:

⇒ Nested HTML 'div' Elements

⇐ HTML 'div' Tag/Element

⇑ HTML 'div' and 'span' elements

⇑⇑ HTML Tutorials

2017-03-11, ∼2152🔥, 0💬

Server-Side Image Maps in HTML
What Is a Server-Side Image Map? A server-side image map is an image inside a hyper link. The image must be defined with the "ismap" attribute in the "img" element. When a server-side image map is clicked in a browser window, the mouse coordinates will be delivered to the server by them to the end o... 2017-03-22, ∼3677🔥, 0💬

Nested HTML 'div' Elements
Can "div" Elements Be Nested? 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: <?xml version="1.0" ?> <!DOCTYPE html... 2017-03-11, ∼2518🔥, 0💬

Client-Side Image Maps in HTML
What Is a Client-Side Image Map? A client-side image map is an image defined with the "ismap" attribute and the "usemap" attribute. When a client-side image map is clicked in a browser window, the browser will take mouse coordinates and map them to a predefined image map entry, to retrieve a target ... 2017-03-22, ∼2490🔥, 0💬

HTML 'div' Tag/Element
What Is a "div" Tag/Element? 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 paragraphs by most browsers. Here are basic rules about an "... 2017-03-11, ∼2169🔥, 0💬

Using HTML 'div' Elements with CSS Properties
How To Use "div" Elements to Change CSS Properties? 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" ?> ... 2017-03-11, ∼2153🔥, 0💬

HTML 'span' Tag/Element
What Is a "span" Tag/Element? 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 are basic rules about an "span" element: "span" elements are... 2017-03-11, ∼2115🔥, 0💬

HTML Interview Questions
Where to find tutorials of introduction to HTML Interview Questions? Here is a list of tutorials to answer many frequently asked questions compiled by FYIcenter.com team in introduction to HTML Interview Questions. You can find answers to these questions in other parts of this tutorial collection. I... 2017-03-07, ∼2059🔥, 0💬

HTML 'div' and 'span' elements
Where to find tutorials of introduction to HTML "div" and "span" elements? Here is a list of tutorials to answer many frequently asked questions compiled by FYIcenter.com team in introduction to HTML "div" and "span" elements. Clear answers are provided with tutorial exercises on basic usages of "di... 2017-03-22, ∼1990🔥, 0💬

Floating HTML 'div' Elements
Can "div" Elements Be Floated? 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" ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 St... 2017-03-11, ∼1964🔥, 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.