Cascading Style Sheets

XHTML is concerned only with structural issues, while CSS is concerned with display issues.
CSS gives the designer more expressive power
- Set color of text and background.
- Create borders around any element.
- Change space around any element.
- Change how text is capitalized and decorated.
- Change text spacing
Style sheets are associated with an XHTML (or XML) page. So changes in style are easy and a style can be used for many pages.
CSS often results in smaller total file sizes.
One CSS file for entire website.

In the beginning, HTML started out as a structural language and it was left up to the browsers to decide how things should look. For example, the browser would decide on the spacing before and after a , and what color to give a hyperlink (usually, blue). Once the web became popular, web page designers wanted more control over how their pages would look so new tags, such as font, were added to HTML. As such, the language started to contain both structural and display elements, making it very complicated to use.

CSS was developed with the goal of being the sole repository of all display information. That is, everything that tells us how things should look on the screen (or the page, or the phone) should be in the style sheet. Also, CSS gave the designer more expressive power.

1.1 Example

An example of a webpage with a style sheets is:

<?xml version="1.0" encoding="ISO-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
  <title>Example</title>
  <meta name="AUTHOR" content="Jose M Vidal"></meta>
  <link rel="stylesheet" type="text/css" 
     href="../xslides-medwhite.css" title="White" media="all" />
  <link rel="alternate stylesheet" type="text/css" 
     href="../xslides-medblue.css" title="Blue" media="all" />
  <link rel="alternate stylesheet" type="text/css" 
     href="../xslides-usc.css" title="USCTheme" media="all" />
  <style type="text/css">
  @import url(sheet2.css);
  h1 {color: blue;}
  body {background: yellow'}
  </style>
</head>
<body>
  The background is in yellow.
  <h1>This will be in blue</h1>
</body>
</html>

Or, view source on this slide if you are online.
The link tag must be inside the head.
New stylesheets can also be loaded with the import directive.
Alternative stylesheets can provide very different appearances.

2 CSS Structure

In the example
```
h1 {color: white;}
```
we have that
h1 selector
{color: white;}
declaration
color property

white value
Selectors can be grouped as in
```
h1, h2, h3 {color:	green;}
```
Declarations can be grouped as in
```
h1 {color: white; background: black;}
```

2.1 Class and ID Selectors

Any element can have a class attribute:
```
This is a lie
```
whose value can be used as a selector:
```
.lie {color: purple;}
```
Similarly, any element can have an id attribute:
```
I will have it by tomorrow
```
whose value can be used as a selector:
```
#thebiglie {color: purple;}
```
ids should only be used one per document, while class can be used many times.
Pseudo-classes represent run-time state. They are:
- :link a hyperlink that has not been visited.
- :visited a hyperlink that has been visited.
- :active a hyperlink that is being clicked on.
- :hover an element over which the mouse is pointing.
For example:
```
a:visited { color: black}
a:active  { color: red }
a:hover { background: #ffa }
```
The selector can also be contextual:
```
h1 em {color: blue;}
```

2.2 The Cascade

Most properties are inherited. For example in

<head>
    <style type="text/css">
      h1 {color:gray;}
    </style></head>
<body>
    <h1>Its a wonderful day 
      for <em>science!</em></h1>
</body>

the word "science" would be in gray.

Some properties, such as border, do not inherit.
More specific selectors dominate. id dominates class which dominates all others, for example:

<head>
    <style type="text/css">
      .blue {color:blue;}
      h1 {color:red;}
    </style></head>
<body>
    <h1 class="blue">This is blue</h1></body>

The property value that applies to a tag is
1. The one in the most specific declaration.
2. If there are more than one, then use the one defined later in the file:

  <head>
    <style type="text/css">
      .green {color: green}
      a {color: yellow;}
      h1 {color: red;}
      h1 {color: blue;}
    </style>
  </head>
  <body>
    <h1>This is blue <a href="/">this is yellow</a></h1>
    <h1 class="green">This is green</h1>
  </body>

2.3 Element Types

Block-level elements, such as p, h1, div, and body, are always displayed on a line by themselves. They can only be children of other block-level elements.
Inline elements, such as a, em, and span, do not force the start of a new line. They can be children of any other element.
List-item elements include only li. They have a "bullet".
We can change the type of any element with the display property.
display: block | inline | list-item | none
Elements can also float

2.4 Layout

If it GLISTENS, gobble it!! But was he mature enough last night at the lesbian masquerade? Civilization is fun! Anyway, it keeps me busy!! Don't worry, nobody really LISTENS to lectures in MOSCOW, either! .. FRENCH, HISTORY, ADVANCED CALCULUS, COMPUTER PROGRAMMING, BLACK STUDIES, SOCIOBIOLOGY!.. Are there any QUESTIONS?? Everywhere I look I see NEGATIVITY and ASPHALT... FOOLED you! Absorb EGO SHATTERING impulse rays, polyester poltroon!! GOOD-NIGHT, everybody.. Now I have to go administer FIRST-AID to my pet LEISURE SUIT!! He probably just wants to take over my CELLS and then EXPLODE inside me like a BARREL of runny CHOPPED LIVER! Or maybe he'd like to PSYCHOLOGICALLY TERRORIZE ME until I have no objection to a RIGHT-WING MILITARY TAKEOVER of my apartment!! I guess I should call AL PACINO! I am having FUN... I wonder if it's NET FUN or GROSS FUN? Just imagine you're entering a state-of-the-art CAR WASH!! KARL MALDEN'S NOSE just won an ACADEMY AWARD!! Leona, I want to CONFESS things to you.. I want to WRAP you in a SCARLET ROBE trimmed with POLYVINYL CHLORIDE.. I want to EMPTY your ASHTRAYS... My FAVORITE group is "QUESTION MARK and THE MYSTERIANS"... Now my EMOTIONAL RESOURCES are heavily committed to 23\% of the SMELTING and REFINING industry of the state of NEVADA!! On SECOND thought, maybe I'll heat up some BAKED BEANS and watch REGIS PHILBIN.. It's GREAT to be ALIVE!! PUNK ROCK!! DISCO DUCK!! BIRTH CONTROL!! QUIET!! I'm being CREATIVE!! Is it GREAT yet? It's s'posed to SMOKEY THE BEAR... Remember, if you try to ESCAPE, many APARTMENT HOPPING ALCOHOLICS will SIMONIZE your HALLWAYS!! This is your LAST WARNING!! Sometime in 1993 NANCY SINATRA will lead a BLOODLESS COUP on GUAM!! Then, it's off to RED CHINA!! UH-OH!! I put on ``GREAT HEAD-ON TRAIN COLLISIONS of the 50's'' by mistake!!! Vote for ME -- I'm well-tapered, half-cocked, ill-conceived and TAX-DEFERRED! What I need is a MATURE RELATIONSHIP with a FLOPPY DISK... Xerox your lunch and file it under ``sex offenders!''

3 Units

Named colors: aqua, gray, navy, silver, black, green, olive, teal, blue, lime, purple, white, fuchsia, maroon, red, and yellow.
```
h1 {color:
	lime;}
```
Color by rgb:
rgb(0%,0%,0%)

Color by hex:

h1 {color:
	#FF0000;}

or short hex:

h1 {color::
	#F00;}

Absolute lengths can be in inches, centimeters, millimeter, points (72 per inch), or picas (12 points).

p {font-size: 10in;}
p {font-size: 10cm;}
p {font-size: 10mm;}
p {font-size: 10pt;}
p {font-size: 10pc;}

Relative lengths can be in em (the value of font-size), ex (the height of lower case x) and px (pixels).

4 Text Properties

```
{text-indent: length | percentage;}
```
how much to indent the first line of the element.

{text-align: left | center | right | justify;}

how to justify the text.

```
{white-space: pre | nowrap | normal}
```
how to handle whitespace within the xhtml.

{line-height: length | percentage | normal}

the space between lines.

{vertical-align: baseline | sub | super | bottom | text-bottom 
| middle | top | text-top | percentage}

how to align the text vertically.

```
{word-spacing: length | normal;}
```
spacing between words.
```
{letter-spacing: length | normal;}
```
spacing between letters in a word.

{text-transform: uppercase | lowercase | capitalize | none;}

how to transform the text.

{text-decoration: none | underline | overline | line-through | blink}

how to decorate. Can have more than one value.

5 Fonts

```
{font-family: family-name | generic-family;}
```
specify the family, such as serif [6], sans-serif, monospace, cursive.

{font-weight: normal | bold | bolder | lighter | 100
| 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900;}

{font-size: xx-small | x-small | small | medium |
large | x-large | xx-large | smaller | larger |	length | percentage;}

is the size.

{font-style: italic | oblique | normal;}

{font: font-style | font-variant | font-weight 
| font-size | font-family;}

collapse all of them into one line.

6 Colors

```
{color: color;}
```

{background-color: color | transparent;}

{background-image: url | none;}

URLs are given in the form

url(http://planet.com/moon.png)

{background-position: percentage | length 
| top | center | bottom || left | center | right;}

specify horizontal then vertical.

{background-attachment: scroll | fixed;}

7 Boxes

Every element is placed within a box. For example, all the text inside a is placed in a box by the browser. The width and height of this box are calculated based on its placement within the page and the size of the page itself. However, you can override these by setting your own width and length. Of course, if you set them too large to fit in the page they will not be completely visible; the browser will generally add some scrollbars.

The space beyond this box is determined by the value of padding. If the element has a background color or image, this background extends all the way into the padding, but not into the margin. The border lies at the end of the padding.

7.1 Box Properties

```
{margin: length | percentage |
	auto;}
```

{margin-top margin-right margin-bottom margin-left:
	length | percentage | auto;}

{border-style: none | dotted | dashed | solid |
	double | groove | ridge | inset | outset;}

{border-width: thin | medium | thick |
	length;}

{border-top-width border-right-width
	border-bottom-width border-left-width: thin | medium | thick |
	length;}

```
{border-color: color;}
```

{padding padding-top padding-right padding-bottom
	padding-left: length | percentage;}

```
{float: left | right | none;}
```
how should the element float.
```
{clear: left | right | both | none;}
```

The use of XHTML and CSS establish a clear division between structure and display which is echoed in personnel assignment in most companies. That is, you usually see a programming department in charge of writing the software and an art or marketing department in charge of the look of the website. However, smaller companies can only afford one person for both jobs. Even when there is a separate art department it is important to understand how layout works so as to provide the adequate markup. For example, there is no way to separate the text that lies within one .