Week Two.

Typical HTML elements

I could list all of the elements that we went over in class again, typing out a description and sample syntax for each one, but I think the Wikipedia article probably does a better job.

An introduction to CSS

Now that we have the semantic framework of our Web page laid out — our page has content with meaning — it’s time to make some of it look pretty. Enter Cascading Style Sheets, or CSS. CSS is a versatile formatting language that works by specifying values for certain properties of an element. In this way, it differs significantly from HTML — recall that HTML is a markup language used to indicate the semantic contexts of certain parts of text. CSS, on the other hand, is more definition-oriented.

As an analogy, imagine your Web page as a house. The rooms of this house are like HTML elements, dividing the square footage into areas for various purposes: eating, working, sleeping. Nested within certain rooms are smaller rooms, such as closets or bathrooms. Applying CSS is like bringing in an interior decorator, who will dictate the color of each room’s walls, the style of each door, and the type of each area’s flooring. The interior decorator has changed certain properties of the rooms — wall color, door type, flooring — but not the rooms themselves.

General CSS syntax

CSS is a rather simple language, owing to its property-value nature. Here’s a sample definition block:

#footer {
    font: 10pt "Helvetica";
    color: gray;
    /* background-color needs to be picked */
}

Just by looking at the above code, you can probably tell that it says that the footer should be set in gray 10-oint Helvetica. Let’s break it down, though, into its components.

The first part, #footer, is called the selector. As its name implies, it selects the elements to which the style rules within the following block will apply. Selectors are probably the most complicated aspect of CSS syntax, primarily because there are so many different ways to pick an element. The three most basic are:

• By the element’s tag name: p, div, strong. This selects all elements with the specified name. A special case is the magic name *, which selects all elements, period.
• By the element’s class: .comment, .filename, .note. This selects all elements of the specified class. You can specify two classes by simply sticking another class selector onto the end, so .note.marginal selects all elements with a class of both note and marginal (you would specify this in HTML by using class="note marginal").
• By the element’s id: #sidebar, #credits, #footer. This is useful for selecting a specific element — just assign an id to it and apply styles directly to it. Unlike with class, an HTML element can only have one id, so #footer#copyright is both invalid syntax and completely useless.

You can use these selectors by themselves or combine them in nearly any fashion by just sticking them all together: div#monkey.bonobo would select all div elements with both an id of monkey and a class of bonobo.

Along with these simple selectors, CSS also gives two primary methods for selecting elements that are within other elements:

• The descendant selector: ancestor descendant. This selects any elements to which the selector descendant applies that fall somewhere within the content of elements to which the selector ancestor applies. For example, .data a would apply to all a elements that are somewhere within an element with the class data.

• The child selector: parent > child. This is similar to the descendant selector, except that it only selects child elements that are located exactly one level below parent. Given the following HTML code:

  <div id="text">
      <p>Lorem ipsum dolor sit amet.</p>
   
      <div>
          <p>Consecteur adipiscing elit.</p>
      </div>
  </div>

  the selector #text p would select both p elements, while #text > p would select only Lorem ipsum….

Multiple selectors can be applied by separating them with commas:

em, .section h1, #fineprint {
    color: red;
    font-style: italic;
}

Following the selector is an opening curly brace ({), which starts the declaration block. Every style rule inside this block — between this brace and the next closing one — will apply to the elements selected.

Each individual rule is composed of two parts, the key and the value, separated by a colon and terminated by a semicolon. For example, to set the margin on an element to 10 pixels on all sides, the appropriate rule would be:

margin: 10px;

Here, the key is margin, and the value is 10px. In the footer example at the start of this section, we defined two key-value pairs: font has the value 10px "Helvetica", and color has the value gray.

As in HTML, you can place comments in CSS at pretty much any point in your stylesheet. In CSS, comments start with /* and end with */. (This syntax is indeed inherited from the C programming language, for those with that sort of background.)