Learning the Basics of Formatting Web Page Content with CSS

---

width, height, and border

Code Syntax

<div style="width:250px;height:60px;border:solid 1px silver;">div (250px x 60px) with border</div>

Browser Display

---

margin, padding, and border

Code Syntax

<div style="margin:10px;padding:10px;border:dotted 2px steelblue;">div with 10px margin, 10px padding, and 2px border</div>

Browser Display

---

width, height, overflow, and border

Code Syntax

<div style="width:250px;height:100px;overflow:auto;border:solid 1px silver;">
div (250px x 100px) with overflow:auto<br/>
div (250px x 100px) with overflow:auto<br/>
div (250px x 100px) with overflow:auto<br/>
div (250px x 100px) with overflow:auto<br/>
div (250px x 100px) with overflow:auto<br/>
div (250px x 100px) with overflow:auto<br/>
div (250px x 100px) with overflow:auto<br/>
div (250px x 100px) with overflow:auto<br/>
</div>

Browser Display

---

display

Code Syntax

<div style="display:none;color:red;">this div will not be displayed</div>
<div style="display:block;color:green;">this div will be displayed</div>

Browser Display

---

color, font-family, font-size, font-weight, font-style,

Code Syntax

<div style="color:red;font-family:arial;font-size:14pt;font-weight:bold;font-style:italic;">div with red text, arial 14pt bold and italic</div>

Browser Display

---

line-height, text-align, text-decoration

Code Syntax

<p style="line-height:1.5em;text-align:justify;text-decoration:underline;"> paragraph line-height 1.5em, justified, and underlined
paragraph line-height 1.5em, justified, and underlined
paragraph line-height 1.5em, justified, and underlined
paragraph line-height 1.5em, justified, and underlined
</p>

Browser Display

paragraph line-height 1.5em, justified, and underlined paragraph line-height 1.5em, justified, and underlined paragraph line-height 1.5em, justified, and underlined paragraph line-height 1.5em, justified, and underlined

---

background-color

Code Syntax

<div style="width:300px;height:40px;background-color:silver;">300px x 40px, silver</div>

Browser Display

---

background-image, background-repeat, background-position

Code Syntax

<div style="width:550px;height:100px;border:solid 1px silver;background-image:url(http://www.vwd-cms.com/Images/vwd-cms-medium.gif);"> </div>
<br/>
<div style="width:550px;height:100px;border:solid 1px silver;background-image:url(http://www.vwd-cms.com/Images/vwd-cms-medium.gif);background-repeat:no-repeat;background-position:left top;"> </div>
<br/>
<div style="width:550px;height:100px;border:solid 1px silver;background-image:url(http://www.vwd-cms.com/Images/vwd-cms-medium.gif);background-repeat:no-repeat;background-position:right bottom;"> </div>
<br/>

Browser Display

---

list-style-type, list-style-image, list-style-position

Code Syntax

<ol style="list-style-type:decimal;list-style-position:inside; list-style-image:none;">
<li>ordered list item 1</li>
<li>ordered list item 2</li>
<li>ordered list item 3</li>
</ol>

Browser Display

1. ordered list item 1
2. ordered list item 2
3. ordered list item 3

Code Syntax

<ul style="list-style-type:disc;list-style-position:outside; list-style-image:none;">
<li>unordered list item 1</li>
<li>unordered list item 2</li>
<li>unordered list item 3</li>
</ul>

Browser Display

• unordered list item 1
• unordered list item 2
• unordered list item 3

Code Syntax

<ul style="list-style-type:none;list-style-position:inside; list-style-image:url(http://www.vwd-cms.com/Images/Admin/delete.gif);">
<li>unordered list item 1</li>
<li>unordered list item 2</li>
<li>unordered list item 3</li>
</ul>

Browser Display

• unordered list item 1
• unordered list item 2
• unordered list item 3