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.2   Inline Styles
A Web developer can declare document styles in many ways. This section presents inline styles that declare an individual element's format using the XHTML attribute style. Inline styles override any other styles applied using the techniques we discuss later in the chapter. Figure 6.1 applies inline styles to p elements to alter their font size and color.
Fig. 6.1 Inline styles.
1   <?xml version = "1.0"?>
2   <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
3      "">
5   <!-- Fig. 6.1: inline.html -->
6   <!-- Using inline styles -->
8   <html xmlns = "">
9      <head>
10         <title>Inline Styles</title>
11      </head>
13      <body>
15         <p>This text does not have any style applied to it.</p>
17          <!-- The style attribute allows you to declare -->
18          <!-- inline styles. Separate multiple styles -->
19         <!-- with a semicolon. -->
20         <p style = "font-size: 20pt">This text has the
21         <em>font-size</em> style applied to it, making it 20pt.
22         </p>
24         <p style = "font-size: 20pt; color: #0000ff">
25         This text has the <em>font-size</em> and
26         <em>color</em> styles applied to it, making it
27         20pt. and blue.</p>
29      </body>
30   </html>

The first inline style declaration appears in line 20. Attribute style specifies the style for an element. Each CSS property (the font-size property in this case) is followed by a colon and a value. In line 20, we declare this particular p element to use 20-point font size. Line 21 uses element em to "emphasize" text, which most browsers do by making the font italic.
Line 24 specifies the two properties, font-size and color, separated by a semicolon. In this line, we set the given paragraph's color to blue, using the hexadecimal code #0000ff. Color names may be used in place of hexadecimal codes, as we demonstrate in the next example. We provide a list of hexadecimal color codes and color names in Appendix B.
Page 1 | 2 | 3
Return to Tutorial Index