Color, Fonts, and Text Decoration

Colors

You should remember when specifying colors that they might look different on different machines / monitors. There is a list of 216 so called web-safe colors on Wikipedia.
To specify the foreground color of a tag you can set the color property. For example, div.changed {color: red} <div class="changed"><p>first paragraph that's new</p><p>2nd...</p></div>
To specify the background you use the background-color property

Fonts

There are several properties of fonts that you can control.

font-family (examples: Arial, Times, Courier)
font-size (examples: 20pt, 15px, xx-small, x-small, small, medium, large, smaller, larger, etc)
font-style (example: italic, oblique)
font-weight (example: bold, bolder)

Text-Decoration

The text-decoration property can be further used to control how text looks. Some values are line-through, overline, underline, and none.

List Properties

Here are some properties which can be used to control how ordered and unordered lists are displayed:
list-style-type:
For unordered lists one can have values disc, square, circle; for ordered lists one can have values decimal, upper-alpha, lower-alpha, upper-roman, lower-roman.

list-style-image:
Can be set to the url of an image to be used for the bullet. For example,
```
  <li style="list-style-image: url(mybullet.png)"> item </li> 
```

Alignment of Text

There are several properties which control the flow of text and images in a given set of tags.

text-indent
Usually used to control how much the first line of a paragraph is indented. Ex: p.indent {text-indent: 0.5in}

text-align
This controls how the text is aligned within margins. It can have the values: left, right, center, and justify.

float
This property often used with images and tables to control how text flows around the element. possible values are left, right, and none. The float tag can be used to make a simple two column layout (float one div tag to the left and set its width, follow it by another div tag). Recall that HTML 5 introduced several new semantic containers tags such as: header, footer, main, nav, section -- float is a very useful tool in doing the layout for these tags.

Box Model

Each element in XHTML/HTML has properties which control its border and the amount of white space around it.
This is called the box model:
This model is also used when you use CSS with other kinds of XML documents.

More on the Box Model

We next look at properties to control the box model. In addition to thhe ones below, thhere are also the master properties border:, padding:, margin: which can take a white space separated list of properties from thhe below.
Controlling the border:

border-style:
This can be none, solid, dotted, dashed, double

border-width:
This can be a length in pixels or thin, medium, or thick. You can more finely control each side of the border by using the properties: border-top-width, border-bottom-width, border-left-width, bottom-right-width.

border-color:
This sets the color of the border. This can also be more finely controlled with border-top-color, border-bottom-color, border-left-color, and border-right-color.

border-radius:
Sets the radius of a circle used to curve the corners of a box. Default is 0. You can give it a single value or list each of thhe four corners.
Controlling margins and padding: These can be controlled using the properties: margin-left, margin-right, margin-top, margin-bottom, padding-left, padding-right, padding-top, padding-bottom.
For block elements like the table tag, we use the margin property if we want to center them within a container -- you can't do this with text-align. To do this, set the left and right margin to have value auto and then define the table's width.

Background Images

The background-image property is used to place an image in the background of an element:
```
body {background-image: url(background.jpg);}
```
The way this image is displayed can be further controlled using the properties:

background-repeat:
this may have values: no-repeat, repeat-x, repeat-y

background-position:
this may have values which are space separated combinations of top, center, bottom, left, and right. You can also give an x and y value for the image offset in each direction. This is useful for sprites.

Position and Display Properties

The position property can have the value static (default), relative (says to place element relative to the last element), absolute (says to place element at some offset from top left of containing element), fixed (keep at that location even if scroll bar used).

For example,

<style type="text/css"> 
   p.first {position: absolute; top:1in; left:2in;}
   p.second {position: relative; left:-1in;}
</style> 
<p class="first">displays one inch down 
two inches from left of top of screen</p>
<p class="second">displays 1inch to the left 
of where the first paragraph finished</p>

The display property can take values block, inline, inline-block or none. block causes the box model to be used, inline makes the element data flow like text, and none does not render the element. You can also set the property "visibility: hidden" which renders the element in the background color
Other useful properties are width and height which set and control respectively the width and height of an element.

Keyboard Shortcuts

We are now done talking about CSS.
As a brief interlude before beginning our next major topic -- which is PHP-- I thought I would point out a useful way to make web pages more accessible.
This is to use the accesskey attribute of an element within the web page:
```
<input type="text" name="fname" accesskey="f" />
```
Now when ALT-f (maybe CTRL-ALT-f on a Mac) is typed the focus will go directly to this element.

In-Class Exercise

Draw a happy face from nested div tags using the CSS float, border, background color properties.
The face color should be in some kind of human flesh tone (not pure white), and the eye color should be brown, blue, or green.
Post your solution to the Sep 16 In-Class Exercise Thread.

Introducing PHP

PHP was developed by Rasmus Lerdorf around 1994-1995.
PHP originally stood for Personal Home Page, later PHP became an acronym for PHP: Hypertext Processor.
It is one of the most common server-side programming languages.
According to Tiobe, it is ranked eigth in overall popularity amongst all languages for any use.
The Wikipedia article on PHP says over 20 million domains are hosted on servers with PHP enabled.
Sites such as Yahoo, Facebook, Wikipedia, Slack, Dailymotion, Digg are written in a flavor of PHP. Yahoo is transitioning to Node.js. Wordpress, Drupal, Joomla, vBulletin, phpBB, Laravel, Symfony, MantisBT, Roundcube etc are written in PHP.
Here is a list of what popular websites use.
The most recent version of PHP is PHP 7.4. The big advantage of PHP 7.x over PHP 5.x is that its interpreter is almost twice as fast.
If you believe in language benchmarks... PHP tends to be faster than Python (more than twice as fast on all benchmarks where programs were parallelized equivalently).
One oft-touted advantage of PHP is its shared nothing architecture: Each PHP request is distinct and does not directly share memory/data with other requests. Shared data is stored in filesystem/memory cache/database/etc.
I.e., if your program crashes, it doesn't tend to crash the whole server.
This can make PHP easier to debug and easier to scale.

Finish CSS, PHP Intro

Outline