CSS selectors and Typography

IDs and styles

• an element that has an id can be given special styling because it is uniquely identified
• in the stylesheet, use #id_value to select it
• The # symbol is used in the stylesheet but not in the id

Example

Suppose a page contains:

    <p id="first">This is the first short paragraph</p>
    <p id="second">This is another brief paragraph</p>

the stylesheet could have

    #first { background-color: yellow; 
             color: blue; 
             font-size: x-large; 
             font-weight: bold; }
    #second {background-color: lime; 
             color: red;  
             font-size: xx-large; 
             font-style: italic; }

Link to complete example page illustrating styles and IDs.

• be sure to view the source code.
• there is only one paragraph identified as "first"
• there is only one paragraph identified as "second"
• the # symbol is used in the stylesheet but not in the id

Classes in HTML and CSS

What if you want to style two paragraphs the same, but different from all others?

• give them a classification with the class attribute
• an element belongs to a class
• many elements can belong to the same class
• there can be only one class= in a tag
• in a style rule, the class name is added to the element name with a . (dot).
• for example, if the element tag is
  <p class="demo">
  the style rule would begin
  p.demo {

Example

Suppose a page contains:

    <p class="special">This is the first short paragraph</p>
    <p class="special">This is another brief paragraph</p>

the stylesheet could have

    p.special { background-color: blue; 
                color: yellow; 
                font-size: large; 
                font-weight: bold; 
                font-style: italic
                }

Link to complete example page illustrating styles and classes.

• be sure to view the source code.
• there are two paragraph classified as "special
• the . symbol is used in the stylesheet but not in the class property

Classes and different types of elements

• different types of elements, such as p and h1, can belong to the same class.
• use an asterisk (*) in place of the element symbol to indicate all elements with that class
• the asterisk used this way is called a wild card.

Example

the stylesheet in this example has two rules for classes

    *.special { background-color: blue; 
               color: yellow; 
               font-size: large; 
               font-style: italic
               }
    *.extra_special { background-color: yellow; 
                      color: green; 
               }

The body contains

• two paragraphs belonging to class special - <p class="special">
• strongly emphasized portion belonging to class special - <strong class="special">
• one heading belonging to class extra_special - <h2 class="extra_special">
• emphasized portion belonging to class extra_special - <em class="extra_special">
• the strong is inside a "special" paragraph
• the em is inside a normal paragraph

Link to complete example page illustrating classes.

• be sure to view the source code.
• there are three elements classified as "special
• there are two elements classified as "extra_special
• the * and the . symbols are used in the stylesheet, not in the HTML tags

Structural diagrams

The elements in an HTML document must be in the proper relationship to each other. If they are correctly nested, you can draw diagram which shows the inner elements as branches from the outer ones. This diagram is called a parse tree

The structure of a valid HTML document can be represented as a tree structure (usually drawn upside down.).

• Each element branches off from the one it is immediately contained in.
• The document itself (html) is called the root element of the tree.
• Elements higher on the tree are ancestors of those below them (their descendents).
• Elements directly connected on the diagram are called parent and child.
• Each element has exactly one parent, with the exception of the root element, which has none.
• In the example, body is the parent of h1, p, and ul; strong is a child of p.
• The content (text) is at the ends of the branches, like leaves.

Example: Tree structure of a document

The following short HTML document

      <html>
        <head>

          <title>The Emmel's home page</title>
        </head>

        <body>
          <h1>The Emmel's home page</h1>

          <p>We are a multi-generation 
            <strong>family</strong>. Our names are

          <ul>
            <li>Essgy</li>
            <li>Aitchtee</li>
            <li>Exx</li>
          </ul>

        </body>
      </html>

can be illustrated as:

Parse Trees and selectors

The parse-tree determines the selectors for style rules and the structure for rendering the page. If the document is not valid, the parse-tree may not be constructable or usable. For example if tags are nested incorrectly, it is impossible to determine which is parent and which is child.

      <a href=gotopage.html"><strong>My homepage</a></strong>

Descendent selectors

In the HTML

<body>
<h1>The <em>beginning</em> <strong>of the <em>end</em></strong></h1>
<p><strong>And so it  <em>begins </em></strong>, 
the <strong>search</strong> for better <em>style</em></p>
</body>

In the first line, the first em is a child of h1. The second em is a child of strong and a grandchild of h1.

In a descendent selector, the ancestor is separated from the descendent by whitespace.

    h1 { color: red }
    em { color: green }  /* select em */
    p  { color: #888 }
    p em { color: blue } /* select em that is a descendent of a p */

In the example, h1 text will be red and all em text will be green except for any em that is a descendent of p; that will be blue. Here is an example with that HTML and style rules.

The "ancestor" could be an id or class selector. For example, a rule selected by #demo strong would apply only to strong elements contained within the element with id "demo".

Grandchildren

A descendant selector of the form A B matches when an element B is any level descendant of ancestor element A. In the descendent example above, p em would match both of the em elements in the paragraph text. But what if you want only grandchildren - descendents with at least one intervening element.

In the specific example, where the only intermediate element is strong, we could write p strong em. But we can also allow for any intermediate element.

An asterisk in a selector is a wild card, representing any element. Use one to indicate intervening generations. For example

     p * em {background-color: yellow;}

Whitespace around the asterisk is a necessary part of the complete selector.

With this rule, only em elements that are a grandchild or later descendant of a paragraph element will be given a yellow background. Here is the example with that rule added.

Immediate Child selectors

A child selector matches when an element is the child of some element. A child selector is made up of two or more selectors separated by the character >. For example

     p>em {background-color: teal; color: lime}

This rule applies only to em elements that are an immediate child of a paragraph element, with no intervening descendants. Here is the example with that rule added.

Adjacent sibling selectors

An element B is an adjacent sibling of an element A if A and B share the same parent and A immediately precedes B. The adjacent sibling selector has the form A+B. For example,

      h1+p {color: orange; }
      p+p {font-size: 75%; }

In this case, the text color of the paragraph immediately following the h1 will be changed. Any pragraph that has a paragraph immediately before it will have smaller text. Here is the example with those rules and some extra paragraphs added.

Pseudo-elements and pseudo-classes

• Style is normally attached to an element based on its type and relation to other elements in the document.
• Pseudo-elements are based on relationships beyond those in the document tree, such as the first letter or first line of an element.
• Pseudo-classes classify elements on characteristics other than their type, attributes or content, such as whether a link has been visited or not.
• Neither pseudo-elements nor pseudo-classes actually appear in the document source code or document tree. They are abstract concepts.

Pseudo-classes

A pseudo-class is used to define a special state of an element.

For example, it can be used to:

• Style an element when a user mouses over it
• Style visited and unvisited links differently

Pseudo-classes are written after the element using a colon between the element symbol and the pseudo-class name. The following table lists most of them.

Note: a:hover MUST come after a:link and a:visited in the CSS definition in order to be effective! a:active MUST come after a:hover in the CSS definition in order to be effective! Pseudo-class names are not case-sensitive.

Example of pseudo-classes

    <style type="text/css">
      a:link { color: red }
      a:visited { color: green }
      a:hover { color: yellow }
      a:active { color: blue }
      input:focus { background-color: yellow;}
      li:first-child { font-weight: bold }
    </style>

• Unvisited links will be red text
• Visited links will be green.
• When the mouse hovers over a link it will turn yellow.
• If the mouse button is pressed over a link but not released it will be blue.
• If an input element receives the focus, its backbround color will change to yellow.
• The last rule specifies that the first item in a list will be bold, but not the others.

Pseudo-elements

A CSS pseudo-element is used to style specified parts of an element.

For example, it can be used to:

• Style the first letter, or line, of an element
• Insert content before, or after, the content of an element

Pseudo-elements are written with a double colon separator for CSS3.

Example of pseudo-elelemts

    <style type="text/css">
      p::first-line { font-style: italic }
      p::first-letter { font-size: 200%; font-weight: normal }
    </style>

The first line of each paragraph will be italicized.

The first letter will be twice as large as the others.

The example also illustrates the text-transform attribute. Here is the example with those rules added

Some CSS properties for modifying text

• Underlines, overlines, and line-throughs are applied only to the actual text, including spaces
• Margins, borders, and padding are not decorated.

• Only alphabetic characters are transformed.
• Words are groups of characters separated by spaces.

• In a true small-caps font, lower case letters look similar to the uppercase ones, but in a smaller size and with slightly different proportions.
• If the font family does not have a small caps version, the browser should create the effect by scaling the capital letters.

Some paragraphs on this page begin with a drop cap - a large capital that drops below the baseline for the rest of the line. This simple version is produced by floating the first letter.

      h1+p:first-letter, h2+p:first-letter  {
        text-transform: uppercase;  /* Ensure that it's a capital. */
        font-family: "Brush Script", "Lucida Handwriting",  Impact, cursive;
        font-size: 2em; 
        font-weight: bold; 
        color: #777; 
        background-color: inherit; 
        display: block;
        float: left; 
        padding-right: 4px;
        padding-top: 4px;
        }

Notice the use of adjacent sibling selectors and the first-letter pseudo-element.

Indentation

Additional style properties

There are many properties that can be styled - 89 altogether - for visual screen display. For now, we have only looked briefly at the most common ones. Additional properties will be introduced in later lessons.

What is typography?

Typography is the practice of arranging type within a design. This not only includes the selection of a typeface, but also the size, spacing, color, and styles of the type. At a higher level, though, typography also deals with the design of type on the page and its interaction with other elements—such as photos, illustrations, interface chrome. This treatment of the text can be every bit as important to the message as the actual words themselves.
~Jason Cranford Teague in Fluid Web Typography

Legibility, Readability, and Scannability

Legibility refers to the actual type. It is well designed and clearly rendered. A legible font will improve readability.

Readability refers to the ease of reading text, especailly in paragraphs and other blocks. White space such as line height is important for readability.

Scannability refers to how easy it is to get information by scanning quickly over the text. Typographic design is important for scannability - the design can steer the user to important features, or interfere.

Baseline, cap height, and x-height.

Characteristics of a good screen typeface (Reference: "The Anatomy of Web Fonts")

• Clear, distinct letter shapes
• Low contrast and simple strokes with a consistent weight and thickness
• Generous x-height
• Generous width and letter spacing
• Generous punch width (space within letters)

Some popular typefaces that exhibit all or most of these properties are Verdana, Trebuchet, and Helvetica. The first two are designed specifically for screen display.

Browser-Safe Fonts

    background-image: url(URL of the image);

    body {background-image: url('clouds.gif');}