http://wbex.ru/index.php?action=history&feed=atom&title=HTML%2FCSS%2FText%2Fp
HTML/CSS/Text/p - История изменений
2026-04-04T18:26:00Z
История изменений этой страницы в вики
MediaWiki 1.30.0
http://wbex.ru/index.php?title=HTML/CSS/Text/p&diff=5836&oldid=prev
в 09:21, 26 мая 2010
2010-05-26T09:21:00Z
<p></p>
<table class="diff diff-contentalign-left" data-mw="interface">
<tr style="vertical-align: top;" lang="ru">
<td colspan="1" style="background-color: white; color:black; text-align: center;">← Предыдущая</td>
<td colspan="1" style="background-color: white; color:black; text-align: center;">Версия 09:21, 26 мая 2010</td>
</tr><tr><td colspan="2" style="text-align: center;" lang="ru"><div class="mw-diff-empty">(нет различий)</div>
</td></tr></table>
http://wbex.ru/index.php?title=HTML/CSS/Text/p&diff=5837&oldid=prev
Admin: 1 версия
2010-05-26T08:17:16Z
<p>1 версия</p>
<p><b>Новая страница</b></p><div>==Change color and font size of paragraph==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"<br />
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml"><br />
<head><br />
<meta http-equiv="content-type" content="text/html; charset=utf-8" /><br />
<title></title><br />
<style type="text/css" title="text/css"><br />
.warningText {<br />
color: #ff0000;<br />
font-size: 120%;<br />
}<br />
</style><br />
</head><br />
<body><br />
<p class="warningText">this is a test. this is a test. this is a test. </p><br />
<p>Only <span class="warningText">this is a test. </span> this is a test. </p><br />
</body><br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
==Different methods of separating paragraphs==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<br />
<?xml version="1.0" encoding="utf-8"?><br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"<br />
"http://www.w3.org/TR/2000/REC-xhtml1-20000126/DTD/xhtml1-transitional.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><br />
<head><br />
<meta http-equiv="content-type" content="text/html; charset=utf-8" /><br />
<title>Different methods of separating paragraphs</title><br />
<style type="text/css"><br />
body {<br />
font-size: 12px;<br />
}<br />
h1 { <br />
margin: 2em 0 0 0;<br />
padding: 0;<br />
}<br />
div {<br />
margin: 0;<br />
width: 33em;<br />
font: 1em/1.5em Georgia, serif;<br />
}<br />
div.space p {<br />
margin: 0.5em 0 0 0;<br />
padding: 0;<br />
}<br />
div.space p.first {<br />
margin: 0;<br />
}<br />
div.indent p {<br />
margin: 0;<br />
padding: 0;<br />
text-indent: 1.5em; <br />
}<br />
div.indent p.first {<br />
text-indent: 0;<br />
}<br />
</style><br />
</head><br />
<body><br />
<div class="space"><br />
<h1>Paragraphs separated by space</h1><br />
<p class="first"><br />
this is a test. this is a test. this is a test. <br />
this is a test. this is a test. this is a test. <br />
this is a test. this is a test. this is a test. <br />
this is a test. this is a test. this is a test. <br />
this is a test. </p><br />
<p> this is a test. this is a test. this is a test. <br />
this is a test. this is a test. this is a test. <br />
this is a test. this is a test. this is a test. <br />
this is a test. this is a test. this is a test. <br />
this is a test. this is a test. this is a test. <br />
this is a test. </p><br />
</div><br />
<div class="indent"><br />
<h1>Paragraphs separated by indenting</h1><br />
<p class="first"><br />
this is a test. this is a test. this is a test. <br />
this is a test. this is a test. this is a test. <br />
this is a test. this is a test. this is a test. <br />
this is a test. this is a test. this is a test. <br />
this is a test. </p><br />
<p> this is a test. this is a test. this is a test. <br />
this is a test. this is a test. this is a test. <br />
this is a test. this is a test. this is a test. <br />
this is a test. this is a test. this is a test. <br />
this is a test. this is a test. this is a test. <br />
this is a test. </p><br />
<p> this is a test. this is a test. this is a test. <br />
this is a test. this is a test. this is a test. <br />
this is a test. this is a test. this is a test. <br />
this is a test. this is a test. this is a test. <br />
this is a test. this is a test. this is a test. <br />
this is a test. </p><br />
</div> <br />
</body><br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
==Get attribute of a paragraph in Javascript==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"<br />
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"><br />
<head><br />
<meta http-equiv="content-type" content="text/html; charset=utf-8" /><br />
<title>Shopping list</title><br />
<style type="text/css"><br />
p {<br />
color: yellow;<br />
font-family: "arial", sans-serif;<br />
font-size: 1.2em;<br />
}<br />
body {<br />
color: white;<br />
background-color: black;<br />
}<br />
#purchases {<br />
border: 1px solid white;<br />
background-color: #333;<br />
color: #ccc;<br />
padding: 1em;<br />
}<br />
</style><br />
</head><br />
<body><br />
<h1>Title</h1><br />
<p title="asdf">This is a test. </p><br />
<p>This is just a test</p><br />
<script type="text/JavaScript"><br />
var paras = document.getElementsByTagName("p");<br />
for (var i=0; i< paras.length; i++) {<br />
var title_text = paras[i].getAttribute("title");<br />
if (title_text != null) {<br />
alert(title_text);<br />
}<br />
}<br />
</script><br />
</body><br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
==Paragraph highlighting==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"<br />
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml"><br />
<head><br />
<title>A Cautionary Demo</title><br />
<style rel="stylesheet" type="text/css" media="All"><br />
.danger {<br />
text-align: center;<br />
font-size: 1.2em;<br />
font-weight: bold;<br />
background-color: red;<br />
color: white;<br />
margin-left: 25%;<br />
margin-right: 25%;<br />
border: 3px solid red;<br />
} <br />
</style><br />
</head><br />
<body><br />
<div class="danger ">this is a test. </div><br />
</body><br />
</html> <br />
</source><br />
<br />
<br />
<br />
<br />
==Paragraphs tag==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"<br />
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><br />
<head><br />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><br />
<title>Paragraphs</title><br />
</head><br />
<body><br />
<p>This is a text</p><br />
</body><br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
==paragraph with different font==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br />
<html><br />
<head><br />
<title></title><br />
<style type="text/css"><br />
p#times-new-roman {<br />
font-family: "Times New Roman";<br />
}<br />
p#arial {<br />
font-family: Arial;<br />
}<br />
</style><br />
</head><br />
<body><br />
<p id="times-new-roman"><br />
This font is Times New Roman.<br />
</p><br />
<p id="arial"><br />
This font is Arial.<br />
</p><br />
</body><br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
==P text-align: justify==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"<br />
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"><br />
<head><br />
<title></title><br />
<style type="text/css"><br />
p {<br />
text-align: justify;<br />
}<br />
</style><br />
</head><br />
<body><br />
<h1>header 1</h1><br />
<p>This is a text. This is a text. This is a text. This is a text.<br />
This is a text. This is a text. This is a text. This is a text.<br />
This is a text. This is a text. This is a text. This is a text.<br />
This is a text. This is a text. This is a text. This is a text.<br />
This is a text. This is a text. This is a text. This is a text.<br />
This is a text. This is a text. This is a text. This is a text.</p><br />
</body><br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
==Set font size for a paragraph==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<?xml version="1.0" encoding="utf-8"?><br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"<br />
"http://www.w3.org/TR/2000/REC-xhtml1-20000126/DTD/xhtml1-transitional.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><br />
<head><br />
<meta http-equiv="content-type" content="text/html; charset=utf-8" /><br />
<title></title><br />
<style type="text/css"><br />
p { <br />
font: 1em/1.5em Georgia, serif; <br />
width: 30em;<br />
margin: 0;<br />
}<br />
</style><br />
</head><br />
<body><br />
<div><br />
<p>before span</p><br />
</div><br />
</body><br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
==Set line height of a Paragraph in content section==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" <br />
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml"><br />
<head><br />
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /><br />
<title></title><br />
<style type="text/css"><br />
<br />
div#content p {<br />
line-height:1.5;<br />
}<br />
<br />
</style><br />
</head><br />
<body><br />
<div id="container"><br />
<div id="header"><br />
<h1>My Amazing Web Site </h1><br />
</div><br />
<div id="wrapper"><br />
<div id="content"><br />
<h2>Contact Form</h2><br />
<br />
<p>This is a test.</p><br />
<br />
<p>Please fill out our form below in order to contact me. </p><br />
<br />
<p>Note: Due to our busy schedules, we cannot answer every message.</p><br />
<br />
</div><br />
</div><br />
<div id="extra"><br />
<h2>header</h2><br />
<p>This is a text</p><br />
</div><br />
<div id="footer"><br />
<p>All rights reserved except where noted.</p><br />
</div><br />
</div><br />
</body><br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
==Set width for a paragraph==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<?xml version="1.0" encoding="utf-8"?><br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"<br />
"http://www.w3.org/TR/2000/REC-xhtml1-20000126/DTD/xhtml1-transitional.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><br />
<head><br />
<meta http-equiv="content-type" content="text/html; charset=utf-8" /><br />
<title>Headings example 2a</title><br />
<style type="text/css"><br />
body {<br />
font: 12px/1.5em Georgia, serif;<br />
}<br />
h1 { <br />
margin: 1.25em 0 0 0;<br />
}<br />
h2 { <br />
margin: 1.25em 0 0 0;<br />
}<br />
p {<br />
margin: 0;<br />
width: 33em;<br />
}<br />
</style><br />
</head><br />
<body><br />
<h1>The most important heading</h1><br />
<p> this is a test. this is a test. this is a test. <br />
this is a test. this is a test. this is a test. <br />
this is a test. this is a test. this is a test. <br />
this is a test. this is a test. this is a test. <br />
this is a test. this is a test. this is a test. <br />
this is a test. </p><br />
<h2>A less important heading</h2><br />
<p> this is a test. this is a test. this is a test. <br />
this is a test. this is a test. this is a test. <br />
this is a test. this is a test. this is a test. <br />
this is a test. this is a test. this is a test. <br />
this is a test. this is a test. this is a test. <br />
this is a test. </p><br />
</body><br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
==Text is large, bold, and aligned at the baseline. Subsequent lines are not indented.==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"<br />
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml"><br />
<head><br />
<meta http-equiv="content-type" content="text/html"; charset="utf-8" /><br />
<title></title><br />
<style type="text/css" media="Screen"><br />
* .padded-dropcap1 {<br />
padding-left: 10px;<br />
font-size: 80px;<br />
line-height: normal;<br />
font-weight: bold;<br />
vertical-align: middle;<br />
}<br />
</style><br />
</head><br />
<body><br />
<p><span class="padded-dropcap1">P</span>added Aligned Drop Cap. </p> <br />
</body><br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
==Text is larger than wrapper box==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br />
<html><br />
<head><br />
<title></title><br />
<style type="text/css"><br />
p {<br />
border: thin solid black;<br />
text-align: justify;<br />
width: 150px;<br />
height: 150px;<br />
}<br />
</style><br />
</head><br />
<body><br />
<p><br />
Peter<BR/>Peter<BR/>Peter<BR/><br />
Peter<BR/>Peter<BR/>Peter<BR/><br />
Peter<BR/>Peter<BR/>Peter<BR/><br />
Peter<BR/>Peter<BR/>Peter<BR/><br />
</p><br />
</body><br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
==This is a paragraph with a dashed border==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<?xml version="1.0" ?><br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"<br />
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"><br />
<head><br />
<title>Borders</title><br />
<style rel="stylesheet" type="text/css"><br />
.dashed {<br />
border-style: dashed;<br />
border-color: #666666;<br />
border-width: 3px;<br />
}<br />
</style><br />
</head><br />
<body><br />
<p class="dashed">This is a paragraph with a dashed border</p><br />
</body><br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
==This is a paragraph with a dotted border==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<?xml version="1.0" ?><br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"<br />
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"><br />
<head><br />
<title>Borders</title><br />
<style rel="stylesheet" type="text/css"><br />
.dotted {<br />
border-style: dotted;<br />
border-color: #999999;<br />
border-width: 2px;<br />
}<br />
</style><br />
</head><br />
<body><br />
<p class="dotted">This is a paragraph with a dotted border</p><br />
</body><br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
==This is a paragraph with a double border==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<?xml version="1.0" ?><br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"<br />
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"><br />
<head><br />
<title>Borders</title><br />
<style rel="stylesheet" type="text/css"><br />
.double {<br />
border-style: double;<br />
}<br />
</style><br />
</head><br />
<body><br />
<p class="double">This is a paragraph with a double border</p><br />
</body><br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
==This is a paragraph with a groove border==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<?xml version="1.0" ?><br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"<br />
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"><br />
<head><br />
<title>Borders</title><br />
<style rel="stylesheet" type="text/css"><br />
.groove {<br />
border-style: groove;<br />
}<br />
</style><br />
</head><br />
<body><br />
<p class="groove">This is a paragraph with a groove border</p><br />
</body><br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
==This is a paragraph with an inset border==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<?xml version="1.0" ?><br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"<br />
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"><br />
<head><br />
<title>Borders</title><br />
<style rel="stylesheet" type="text/css"><br />
body {<br />
color: #000000;<br />
background-color: #ffffff;<br />
font-family: arial, verdana, sans-serif;<br />
font-size: 12px;<br />
}<br />
.inset {<br />
border-style: inset;<br />
}<br />
</style><br />
</head><br />
<body><br />
<p class="inset">This is a paragraph with an inset border</p><br />
</body><br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
==This is a paragraph with a ridge border==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<?xml version="1.0" ?><br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"<br />
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"><br />
<head><br />
<title>Borders</title><br />
<style rel="stylesheet" type="text/css"><br />
.ridge {<br />
border-style: ridge;<br />
}<br />
</style><br />
</head><br />
<body><br />
<p class="ridge">This is a paragraph with a ridge border</p><br />
</body><br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
==This is a paragraph with a solid border==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<br />
<?xml version="1.0" ?><br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"<br />
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"><br />
<head><br />
<title>Borders</title><br />
<style rel="stylesheet" type="text/css"><br />
.solid {<br />
border-style: solid;<br />
border-color: #000000;<br />
border-width: 1px;<br />
}<br />
</style><br />
</head><br />
<body><br />
<p class="solid">This is a paragraph with a <code>solid</code> border</p><br />
</body><br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
==This paragraph has a 180-pixel width and 20 pixels of padding==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br />
<html><br />
<head><br />
<title></title><br />
<style type="text/css"><br />
p#paragraph-2 {<br />
padding: 20px;<br />
width: 180px;<br />
border: 1px solid black;<br />
margin: 10px;<br />
background: lightgrey;<br />
}<br />
</style><br />
</head><br />
<body><br />
<p id="paragraph-2"><br />
This is a test. This is a test. <br />
</p><br />
</body><br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
==This paragraph has a 180-pixel width and 20 pixels of padding, and yet the backgrounds of both paragraphs are lined up together==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br />
<html><br />
<head><br />
<title></title><br />
<style type="text/css"><br />
p#paragraph-2 {<br />
padding: 20px;<br />
width: 180px;<br />
border: 1px solid black;<br />
margin: 10px;<br />
background: lightgrey;<br />
}<br />
</style><br />
</head><br />
<body><br />
<p id="paragraph-2"><br />
this is a test. <br />
</p><br />
</body><br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
==This paragraph has a 200 pixel width and 10 pixels of padding.==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br />
<html><br />
<head><br />
<title></title><br />
<style type="text/css"><br />
p#paragraph-1 {<br />
padding: 10px;<br />
width: 200px;<br />
border: 1px solid black;<br />
margin: 10px;<br />
background: gray;<br />
}<br />
</style><br />
</head><br />
<body><br />
<p id="paragraph-1">This is a test. <br />
</p><br />
</body><br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
==This paragraph is floated left==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br />
<html><br />
<head><br />
<title></title><br />
<style type="text/css"><br />
div {<br />
margin: 10px;<br />
background: rgb(200, 200, 200);<br />
height: 100px;<br />
}<br />
<br />
p#floated {<br />
background: rgb(220, 220, 220);<br />
margin: 10px;<br />
padding: 10px;<br />
border: 1px solid black;<br />
float: left;<br />
}<br />
p#normal {<br />
background: rgb(240, 240, 240);<br />
border: 1px solid black;<br />
}<br />
</style><br />
</head><br />
<body><br />
<div><br />
<p id="floated"><br />
This paragraph is floated left.<br />
</p><br />
<p id="normal"><br />
The text if this paragraph is beside the floated paragraph.<br />
</p><br />
</div><br />
</body><br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
==Use style to hide text==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"<br />
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml"><br />
<head><br />
<title></title><br />
<style type="text/css"><br />
.no {<br />
display: none;<br />
}<br />
</style><br />
</head><br />
<h2><span class="no">Earth News</span></h2><br />
<p>before <a href="">after</a></p<br />
<br />
</body><br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
==Using inline styles==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<?xml version = "1.0"?><br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"<br />
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br />
<html xmlns = "http://www.w3.org/1999/xhtml"><br />
<head><br />
<title>Inline Styles</title><br />
</head><br />
<body><br />
<p>This text does not have any style applied to it.</p><br />
<p style = "font-size: 20pt">This text has the <br />
<em>font-size</em> style applied to it, making it 20pt.<br />
</p><br />
<p style = "font-size: 20pt; color: #0000ff"><br />
This text has the <em>font-size</em> and <br />
<em>color</em> styles applied to it, making it<br />
20pt. and blue.</p><br />
</body><br />
</html><br />
</source></div>
Admin