Deitel & Associates, Inc. Logo

Back to
digg.png delicious.png blinkit.png furl.png
Internet & World Wide Web How to Program, 3/e
Internet & World Wide Web How to Program, 3/e

© 2004
pages: 1420

Amazon logo

This tutorial focuses on the presentation of Web-page elements using a technology called Cascading Style Sheets (CSS). CSS allows Web-page authors to specify the presentation (e.g., fonts, spacing, margins, etc.) separately from the Web page's structure (e.g., section head-ers, body text, links, etc.). Separating structure from presentation simplifies maintaining and modifying a Web page's layout. The first part of this tutorial demonstrates inline CSS styles in which styles are placed directly in the Web page elements. We then place these styles into an embedded style sheet, to separate the style definitions from the content. In a subsequent tutorial, you'll learn how to place the styles in a separate file and link them to a Web page. This technique allows you to easily use the same styles in many different pages to provide a uniform look-and-feel across a Web site. This tutorial is intended for people who are familiar with basic HTML.
Download the Code Examples
[Note: This tutorial is an excerpt (Sections 6.2 and 6.3) of Chapter 6, Cascading Style Sheets, from our textbook Internet & World Wide Web How to Program, 3/e. This tutorial may refer to other chapters or sections of the book that are not included here. Permission Information: Deitel, Harvey M. and Paul J., INTERNET & WORLD WIDE WEB HOW TO PROGRAM, 3/E, 2004, pp.141-145. Electronically reproduced by permission of Pearson Education, Inc., Upper Saddle River, New Jersey.]
6.3   Embedded Style Sheets
A second technique for using style sheets is embedded style sheets. Embedded style sheets enable a Web-page author to embed an entire CSS document in an XHTML document's head section. Figure 6.2 creates an embedded style sheet containing four styles.
Fig. 6.2 Embedded style sheets.
1   <?xml version = "1.0"?>
2   <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
3      "">
5   <!-- Fig. 6.2: declared.html -->
6   <!-- Declaring a style sheet in the header section. -->
8   <html xmlns = "">
9      <head>
10        <title>Style Sheets</title>
12        <!-- this begins the style sheet section -->
13        <style type = "text/css">
15        em { background-color: #8000ff;
16             color: white }
18        h1 { font-family: arial, sans-serif }
20        p { font-size: 14pt }
22        .special { color: blue }
24     </style>
25  </head>
27     <body>
29        <!-- this class attribute applies the .special style -->
30        <h1 class = "special">Deitel & Associates, Inc.</h1>
32        <p>Deitel &amp; Associates, Inc. is an internationally
33        recognized corporate training and publishing organization
34        specializing in programming languages, Internet/World
35        Wide Web technology and object technology education.
36        Deitel &amp; Associates, Inc. is a member of the World Wide
37        Web Consortium. The company provides courses on Java,
38        C++, Visual Basic, C, Internet and World Wide Web
39        programming, and Object Technology.</p>
41        <h1>Clients</h1>
42        <p class = "special"> The company's clients include many
43        <em>Fortune 1000 companies</em>, government agencies,
44        branches of the military and business organizations.
45        Through its publishing partnership with Prentice Hall,
46        Deitel &amp; Associates, Inc. publishes leading-edge
47        programming textbooks, professional books, interactive
48        CD-ROM-based multimedia Cyber Classrooms, satellite
49        courses and World Wide Web courses.</p>
51     </body>
52  </html>

Page 1 | 2 | 3
Return to Tutorial Index