Chapter: Internet & World Wide Web HOW TO PROGRAM - The Ajax Client - Cascading Style Sheets (CSS)

| Study Material, Lecturing Notes, Assignment, Reference, Wiki description explanation, brief detail |

Embedded Style Sheets - CSS

A second technique for using style sheets is embedded style sheets.

Embedded Style Sheets


A second technique for using style sheets is embedded style sheets. Embedded style sheets enable a you to embed an entire CSS document in an XHTML document’s head section. To achieve this separation between the CSS code and the XHTML that it styles, we will use CSS selectors. Figure 5.2 creates an embedded style sheet containing four styles.


    <?xml version = "1.0" encoding = "utf-8"?>


    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"




    <!-- Fig. 5.2: embedded.html -->


    <!-- Embedded style sheets. -->


    <html xmlns = "">




    <title>Style Sheets</title>

      <!-- this begins the style sheet section -->


<style type = "text/css">

em      { font-weight:   bold;

   color: black      }

      h1{ font-family: tahoma, helvetica, sans-serif }


      p{ font-size: 12pt;


font-family: arial, sans-serif }


      .special { color: #6666ff }







      <!-- this class attribute applies the .special 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.


      The company provides courses on Java, C++, Visual Basic,


      C#, C, Internet and World Wide Web programming, Object


      Technology, and more.</p>



      <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


      web-based multimedia Cyber Classrooms, satellite


      courses and World Wide Web courses.</p>





The style element (lines 12–19) defines the embedded style sheet. Styles placed in the head apply to matching elements wherever they appear in the entire document. The style element’s type attribute specifies the Multipurpose Internet Mail Extensions (MIME) type that describes a file’s content. CSS documents use the MIME type text/css. Other MIME types include image/gif (for GIF images), text/javascript (for the JavaScript scripting language, which we discuss in Chapters 6–11), and more.

The body of the style sheet (lines 13–18) declares the CSS rules for the style sheet. A CSS selector determines which elements will be styled according to a rule. Our first rule begins with the selector em (line 13) to select all em elements in the document. The font-weight property in line 13 specifies the “boldness” of text. Possible values are bold, normal (the default), bolder (bolder than bold text) and lighter (lighter than normal text). Bold-ness also can be specified with multiples of 100, from 100 to 900 (e.g., 100, 200, …, 900). Text specified as normal is equivalent to 400, and bold text is equivalent to 700. However, many systems do not have fonts that can scale with this level of precision, so using the values from 100 to 900 might not display the desired effect.


In this example, all em elements will be displayed in a bold font. We also apply styles to all h1 (line 15) and p (lines 16–17) elements. The body of each rule is enclosed in curly braces ({ and }).


Line 18 uses a new kind of selector to declare a style class named special. Style classes define styles that can be applied to any element. In this example, we declare class special, which sets color to blue. We can apply this style to any element type, whereas the other rules in this style sheet apply only to specific element types defined in the style sheet (i.e., em, h1 or p). Style-class declarations are preceded by a period. We will discuss how to apply a style class momentarily.


CSS rules in embedded style sheets use the same syntax as inline styles; the property name is followed by a colon (:) and the value of the property. Multiple properties are sep-arated by semicolons (;). In the rule for em elements, the color property specifies the color of the text, and property font-weight makes the font bold.


The font-family property (line 15) specifies the name of the font to use. Not all users have the same fonts installed on their computers, so CSS allows you to specify a comma-separated list of fonts to use for a particular style. The browser attempts to use the fonts in the order they appear in the list. It’s advisable to end a font list with a generic font family name in case the other fonts are not installed on the user’s computer. In this example, if the tahoma font is not found on the system, the browser will look for the helvetica font. If neither is found, the browser will display its default sans-serif font. Other generic font families include serif (e.g., times new roman, Georgia), cursive (e.g., script), fantasy (e.g., critter) and monospace (e.g., courier, fixedsys).


The font-size property (line 16) specifies a 12-point font. Other possible measure-ments in addition to pt (point) are introduced later in the chapter. Relative values— xx-

small, x-small, small, smaller, medium, large, larger, x-large and xx-large—also can be used. Generally, relative values for font-size are preferred over point sizes because an author does not know the specific measurements of the display for each client. Relative font-size values permit more flexible viewing of web pages.


For example, a user may wish to view a web page on a handheld device with a small screen. Specifying an 18-point font size in a style sheet will prevent such a user from seeing more than one or two characters at a time. However, if a relative font size is specified, such as large or larger, the actual size is determined by the browser that displays the font. Using relative sizes also makes pages more accessible to users with disabilities. Users with impaired vision, for example, may configure their browser to use a larger default font, upon which all relative sizes are based. Text that the author specifies to be smaller than the main text still displays in a smaller size font, yet it is clearly visible to each user. Acces-sibility is an important consideration—in 1998, congress passed the Section 508 Amend ment to the Rehabilitation Act of 1973, mandating that websites of government agencies are required to be accessible to disabled users.


Line 23 uses the XHTML attribute class in an h1 element to apply a style class—in this case class special (declared with the .special selector in the style sheet on line 18). When the browser renders the h1 element, note that the text appears on screen with the properties of both an h1 element (arial or sans-serif font defined in line 17) and the .special style class applied (the color #6666ff defined in line 18). Also notice that the browser still applies its own default style to the h1 element—the header is still displayed in a large font size. Similarly, all em elements will still be italicized by the browser, but they will also be bold as a result of our style rule.

The formatting for the p element and the .special class is applied to the text in lines 34–41. In many cases, the styles applied to an element (the parent or ancestor element) also apply to the element’s nested elements (child or descendant elements). The em element nested in the p element in line 35 inherits the style from the p element (namely, the 12-point font size in line 16) but retains its italic style. In other words, styles defined for the paragraph and not defined for the em element is applied to the em element. Because mul-tiple values of one property can be set or inherited on the same element, they must be reduced to one style per element before being rendered. We discuss the rules for resolving these conflicts in the next section.

Study Material, Lecturing Notes, Assignment, Reference, Wiki description explanation, brief detail

Copyright © 2018-2020; All Rights Reserved. Developed by Therithal info, Chennai.