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

Conflicting Styles - CSS

Styles may be defined by a user, an author or a user agent (e.g., a web browser).

Conflicting Styles


Styles may be defined by a user, an author or a user agent (e.g., a web browser). A user is a person viewing your web page, you are the author—the person who writes the docu-ment—and the user agent is the program used to render and display the document. Styles “cascade,” or flow together, such that the ultimate appearance of elements on a page results from combining styles defined in several ways. Styles defined by the user take precedence over styles defined by the user agent, and styles defined by authors take precedence over styles defined by the user.


Most styles defined for parent elements are also inherited by child (nested) elements. While it makes sense to inherit most styles, such as font properties, there are certain prop-erties that we don’t want to be inherited. Consider for example the background-image property, which allows the programmer to set an image as the background of an element. If the body element is assigned a background image, we don’t want the same image to be in the background of every element in the body of our page. Instead, the background-image property of all child elements retains its default value of none. In this section, we discuss the rules for resolving conflicts between styles defined for elements and styles inherited from parent and ancestor elements.


Figure 5.2 presented an example of inheritance in which a child em element inherited the font-size property from its parent p element. However, in Fig. 5.2, the child em ele-ment had a color property that conflicted with (i.e., had a different value than) the color property of its parent p element. Properties defined for child and descendant elements have a greater specificity than properties defined for parent and ancestor elements. Con-flicts are resolved in favor of properties with a higher specificity. In other words, the styles explicitly defined for a child element are more specific than the styles defined for the child’s parent element; therefore, the child’s styles take precedence. Figure 5.3 illustrates examples of inheritance and specificity.

Line 12 applies property text-decoration to all a elements whose class attribute is set to nodec. The text-decoration property applies decorations to text in an element. By default, browsers underline the text of an a (anchor) element. Here, we set the text-dec-oration property to none to indicate that the browser should not underline hyperlinks.


Other possible values for text-decoration include overline, line-through, underline and blink. [Note: blink is not supported by Internet Explorer.] The .nodec appended to a is a more specific class selector; this style will apply only to a (anchor) elements that specify nodec in their class attribute.

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


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




      <!-- Fig. 5.3: advanced.html -->


      <!-- Inheritance in style sheets. -->


      <html xmlns = "">




      <title>More Styles</title>


<style type = "text/css">

body            { font-family: arial, helvetica, sans-serif }

        a.nodec  { text-decoration: none }


a:hover  { text-decoration: underline }

li em { font-weight: bold }


h1, em          { text-decoration: underline }


ul      {           margin-left: 20px }

ul ul  {           font-size: .8em }







        <h1>Shopping list for Monday:</h1>








<li>White bread</li>

<li>Rye bread</li>

<li>Whole wheat bread</li>









        <li>Pizza <em>with mushrooms</em></li>



        <p><em>Go to the</em>


        <a class = "nodec" href = "">

        Grocery store</a>






Fig. 5.3 | Inheritance in style sheets.



Line 13 specifies a style for hover, which is a pseudoclass. Pseudoclasses give the author access to content not specifically declared in the document. The hover pseudoclass is activated dynamically when the user moves the mouse cursor over an element. Note that pseudoclasses are separated by a colon (with no surrounding spaces) from the name of the element to which they are applied.

Line 14 causes all em elements that are children of li elements to be bold. In the screen output of Fig. 5.3, note that Go to the (contained in an em element in line 37) does not appear bold, because the em element is not in an li element. However, the em element con-taining with mushrooms (line 34) is nested in an li element; therefore, it is formatted in bold. The syntax for applying rules to multiple elements is similar. In line 15, we separate the selectors with a comma to apply an underline style rule to all h1 and all em elements.


Line 16 assigns a left margin of 20 pixels to all ul elements. We will discuss the margin properties in detail in Section 5.9. A pixel is a relative-length measurement—it varies in size, based on screen resolution. Other relative lengths include em (the M-height of the font, which is usually set to the height of an uppercase M), ex (the x-height of the font, which is usually set to the height of a lowercase x) and percentages (e.g., font-size: 50%). To set an element to display text at 150 percent of its default text size, the author could use the syntax


font-size: 1.5em


Alternatively, you could use


font-size: 150%


Other units of measurement available in CSS are absolute-length measurements—i.e., units that do not vary in size based on the system. These units are in (inches), cm (centi-meters), mm (millimeters), pt (points; 1 pt = 1/72 in) and pc (picas; 1 pc = 12 pt). Line 17 specifies that all nested unordered lists (ul elements that are descendants of ul elements) are to have font size .8em. [Note: When setting a style property that takes a measurement (e.g. font-size, margin-left), no units are necessary if the value is zero.]

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

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