CSS: Text Examples

  Chapter 6 - Code Examples:

 

Link to File Source Code
inline.html

[top]

 <?xml version="1.0" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<!-- Fig. 6.1: inline.html -->
<!-- Using inline styles -->

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Inline Styles</title>
</head>

<body>
<p>This text does not have any style applied to it.</p>

<!-- The style attribute allows you to declare -->
<!-- inline styles. Separate multiple styles -->
<!-- with a semicolon. -->

<p style="font-size: 20pt">This text has the <em>font-size</em> style applied to it,

making it 20pt. </p>

<p style="font-size: 20pt; color: #0000ff">This text has the <em>font-size</em> and <em>color</em>

styles applied to it, making it 20pt. and blue.</p>
</body>
</html>
declared.html

[top]

 <?xml version="1.0" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<!-- Fig. 6.2: declared.html -->
<!-- Declaring a style sheet in the header section. -->
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<title>Style Sheets</title>

<!-- this begins the style sheet section -->
<style type="text/css">
em { background-color: #8000ff; color: white }
h1 { font-family: arial, sans-serif }
p { font-size: 14pt }
.special { color: blue }
</style>

</head>
<body>

<!-- this class attribute applies the .blue style -->
<h1 class="special">Deitel &amp; Associates, Inc.</h1>

<p>Deitel &amp; Associates, Inc. is an internationally recognized corporate training and publishing organization specializing in programming languages, Internet/World Wide Web technology and object  technology education. Deitel &amp; Associates, Inc. is a member of the World Wide Web Consortium. The company provides courses on Java, C++, Visual Basic, C, Internet and World Wide Web programming, and Object Technology.</p>
<h1>Clients</h1>

<p class="special">The company's clients include many <em>Fortune 1000 companies</em>, government agencies, branches of the military and business organizations. Through its publishing partnership with Prentice Hall, Deitel &amp; Associates, Inc. publishes leading-edge programming textbooks, professional books, interactive CD-ROM-based multimedia Cyber Classrooms, satellite courses and World Wide Web courses.</p>

</body>
</html>
advanced.html

[top]

 <?xml version="1.0" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!-- Fig 6.3: advanced.html -->
<!-- More advanced style sheets -->
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<title>More Styles</title>

<style type="text/css">
a.nodec { text-decoration: none }
a:hover { text-decoration: underline; color: red; background-color: #ccffcc }
li em { color: red; font-weight: bold }
ul { margin-left: 75px }
ul ul { text-decoration: underline; margin-left: 15px }
</style>

</head>
<body>
<h1>Shopping list for <em>Monday</em>:</h1>

<ul>
<li>Milk</li>
<li>Bread

<ul>
<li>White bread</li>
<li>Rye bread</li>
<li>Whole wheat bread</li>
</ul>
</li>

<li>Rice</li>
<li>Potatoes</li>
<li>Pizza <em>with mushrooms</em></li>
</ul>

<p><a class="nodec" href="http://www.food.com">Go to the Grocery store</a></p>
</body>
</html>
external.html

[top]

 <?xml version="1.0" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!-- Fig. 6.5: external.html -->
<!-- Linking external style sheets -->
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<title>Linking External Style Sheets</title>

<link rel="stylesheet" type="text/css" href="styles.css" />

</head>
<body>
<h1>Shopping list for <em>Monday</em>:</h1>

<ul>
<li>Milk</li>
<li>Bread

  <ul>
     <li>White bread</li>
    <li>Rye bread</li>
    <li>Whole wheat bread</li>
  </ul>

</li>

<li>Rice</li>
<li>Potatoes</li>
<li>Pizza <em>with mushrooms</em></li>
</ul>

<p><a href="http://www.food.com">Go to the Grocery store</a> </p>
</body>
</html>

styles.css

[top]

 
/* Fig. 6.4: styles.css   */
/* An external stylesheet */
a       { text-decoration: none }
a:hover { text-decoration: underline;
          color: red;
          background-color: #ccffcc }
li em   { color: red;
          font-weight: bold; 
          background-color: #ffffff }
ul      { margin-left: 2cm }
ul ul   { text-decoration: underline;
          margin-left: .5cm }
positioning.html

[top]

 <?xml version="1.0" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<!-- Fig 6.6: positioning.html -->
<!-- Absolute positioning of elements -->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Absolute Positioning</title>
</head>

<body>
<p>
<img src="i.gif" style="position: absolute; top: 0px; left: 0px; z-index: 1" alt="First positioned image" / width="250" height="250"></p>

<p style="position: absolute; top: 50px; left: 50px; z-index: 3; font-size: 20pt;"> Positioned Text</p>

<p><img src="circle.gif" style="position: absolute; top: 25px; left: 100px; z-index: 2" alt="Second positioned image" / width="150" height="150"></p>

</body>
</html>
positioning2.html

[top]

 <?xml version="1.0" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<!-- Fig. 6.7: positioning2.html -->
<!-- Relative positioning of elements -->
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<title>Relative Positioning</title>

<style type="text/css">
p { font-size: 1.3em;  font-family: verdana, arial, sans-serif }

span { color: red; font-size: .6em;   height: 1em }

.super { position: relative; top: -1ex }

.sub { position: relative; bottom: -1ex }

.shiftleft { position: relative; left: -1ex }

.shiftright { position: relative; right: -1ex }

</style>
</head>

<body>
<p>The text at the end of this sentence <span class="super">is in superscript</span>.</p>
<p>The text at the end of this sentence <span class="sub">is in subscript</span>.</p>
<p>The text at the end of this sentence <span class="shiftleft">is shifted left</span>.</p>
<p>The text at the end of this sentence <span class="shiftright">is shifted right</span>.</p>
</body>
</html>
background.html

[top]

 <?xml version="1.0" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!-- Fig. 6.8: background.html -->
<!-- Adding background images and indentation -->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Background Images</title>

<style type="text/css">

body { background-image: url(logo.gif); background-position: bottom right;

background-repeat: no-repeat; background-attachment: fixed; }

p { font-size: 18pt; color: #aa5588;   text-indent: 1em; font-family: arial, sans-serif; }

.dark { font-weight: bold; }

</style>

</head>
<body>
<p>This example uses the background-image, background-position and background-attachment styles to place the <span class="dark">Deitel &amp; Associates, Inc.</span> logo in the bottom, right corner of the page. Notice how the logo stays in the proper position when you resize the browser window. </p>
</body>
</html>
width.html

[top]

 <?xml version="1.0" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!-- Fig. 6.9: width.html -->
<!-- Setting box dimensions and aligning text -->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Box Dimensions</title>

<style type="text/css">

div { background-color: #ffccff; margin-bottom: .5em }

</style>

</head>
<body>

<div style="width: 20%">

<p>Here is some text that goes in a box which is set to stretch across twenty precent of the width of the screen.</p>

</div><div style="width: 80%; text-align: center">

<p>Here is some CENTERED text that goes in a box which is set to stretch across eighty precent of the width of the screen.</p>

</div><div style="width: 20%; height: 30%; overflow: scroll">

<p>This box is only twenty percent of the width and thirty percent of the height. What do we do if it overflows? Set the overflow property to scroll!</p>

</div>
</body>
</html>
floating.html

[top]

 <?xml version="1.0" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!-- Fig. 6.10: floating.html -->
<!-- Floating elements and element boxes -->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Flowing Text Around Floating Elements</title>

<style type="text/css">

div { background-color: #ffccff; margin-bottom: .5em; font-size: 1.5em; width: 50% }

p { text-align: justify; }

</style>

</head>
<body>
<div style="text-align: center">
<p>Deitel &amp; Associates, Inc.</p>
</div>

<div style="float: right; margin: .5em; text-align: right">
<p>Corporate Training and Publishing</p>
</div>

<p>Deitel &amp; Associates, Inc. is an internationally recognized corporate training and publishing organization specializing in programming languages, Internet/World Wide Web technology and object technology education. Deitel &amp; Associates, Inc. is a member of the World Wide Web Consortium. The company provides courses on Java, C++, Visual Basic, C, Internet and World Wide Web programming, and Object Technology.</p>

<div style="float: right; padding: .5em;  text-align: right">
<p>Leading-edge Programming Textbooks</p>
</div>

<p>The company's clients include many Fortune 1000 companies, government agencies, branches of the military and business organizations. Through its publishing partnership with Prentice Hall, Deitel &amp; Associates, Inc. publishes leading-edge programming textbooks, professional books, interactive CD-ROM-based multimedia Cyber Classrooms, satellite courses and World Wide Web courses.

<span style="clear: right"> Here is some unflowing text. Here is some unflowing text.</span></p>

</body>
</html>
borders.html

[top]

 <?xml version="1.0" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!-- Fig. 6.12: borders.html -->
<!-- Setting borders of an element -->
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<title>Borders</title>

<style type="text/css">
body { background-color: #ccffcc }

div { text-align: center; margin-bottom: 1em; padding: .5em }

.thick { border-width: thick }
.medium { border-width: medium }
.thin { border-width: thin }
.groove { border-style: groove }
.inset { border-style: inset }
.outset { border-style: outset }
.red { border-color: red }
.blue { border-color: blue }
</style>

</head>
<body>

<div class="thick groove">
<p>This text has a border</p>
</div>

<div class="medium groove">
<p>This text has a border</p>
</div>

<div class="thin groove">
<p>This text has a border</p>
</div>

<p class="thin red inset">A thin red line...</p>

<p class="medium blue outset">And a thicker blue line</p>
</body>
</html>
borders2.html

[top]

 <?xml version="1.0" ?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!-- Fig. 6.13: borders2.html -->
<!-- Various border-styles -->
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<title>Borders</title>

<style type="text/css">

body { background-color: #ccffcc }

div { text-align: center; margin-bottom:

   .3em; width: 50%; position: relative; left: 25%; padding: .3em }

</style>
</head>
<body>

<div style="border-style: solid">
<p>Solid border</p>
</div>

<div style="border-style: double">
<p>Double border</p>
</div>

<div style="border-style: groove">
<p>Groove border</p>
</div>

<div style="border-style: ridge">
<p>Ridge border</p>
</div>

<div style="border-style: inset">
<p>Inset border</p>
</div>

<div style="border-style: outset">
<p>Outset border</p>
</div>

</body>
</html>
user_absolute.html

[top]

 <?xml version="1.0" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<!-- Fig. 6.16: user_absolute.html -->
<!-- User styles -->

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>User Styles</title>

<style type="text/css">
.note { font-size: 9pt }
</style>

</head>
<body>
<p>Thanks for visiting my Web site. I hope you enjoy it. </p>
<p class="note">Please Note: This site will be moving soon. Please check periodically for updates.</p>
</body>
</html>
userstyles.css

[top]

 
/* Fig. 6.17: userstyles.css */
/* A user stylesheet         */
body     { font-size: 20pt;
           color: yellow;
           background-color: #000080 }
user_relative.html

[top]

 <?xml version="1.0" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<!-- Fig. 6.20: user_relative.html -->
<!-- User styles -->

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>User Styles</title>

<style type="text/css">

.note { font-size: .75em }

</style>
</head>
<body>
<p>Thanks for visiting my Web site. I hope you enjoy it. </p>
<p class="note">Please Note: This site will be moving soon. Please check periodically for   updates.</p>
</body>
</html>

  

This page was last updated on 3/14/2008   by Linda M. Hicks