Introduction

One Monday, we began talking about Cascading Style Sheets (CSS) -- one mechanism for controlling how the tags on a web page are drawn by the browser.
The word cascade is used because default values of a CSS property can be overriden if an external stylesheet value for the property exists, which in turn can be overriden if a document level style for the property exists, which can be overriden if an inline style for the property exists.
Inline styles are defined by having a style="property_1:value_1;...property_n:value_n;" attribute on a tag. For example, <p style="color:red;" >.
Document styles are a sequence of style statements within <style> tags in the head of a HTML page.
An external stylesheet is a file associated with a webpage using a <link rel="stylesheet" href="url_of_stylesheet" > (or @import url_of_stylesheet; within <style> tags) containing a sequence of style statements.

We looked at one type of style statement which has the format:

selector {
    property_1:value_1;
    ...
    property_n:value_n;
}

For example,

h1 {
    font-size:20pt; // make the font-size for h1 tags 20pt=20/72inches tall
}

Common types of non-path selectors are an html tag name (ex: h1), an html tag name followed by class or id selector, (ex: p.foo, span#abstract), just a class or id selector, (.goo, #sec1), some non-path selector, or some selector followed by a pseudo-class (ex: p:first-letter, .my-input:focus, .my-input:blur, .my-input:focus-within, div:first-child).
A path selector consists of a sequence of non-path selectors either connected by space or an operator > (immediate child), + (sibling). For example, p > b i.
After talking about selectors, we went over the different possible kinds of values a property might have in CSS: predefined, signed number, percentage, url, color.
Then we talked about text and font properties, list properties, and alignment properties.
We begin today by looking at how block level elements are described using CSS.

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.

Notable Browser Differences

Since about the mid-2010s, most browsers render webpages relatively similarly.
This is largely because we have entered a so-called browser winter where we have very little competition for the underlying rendering engine.
I.e., there are Webkit/Blink descendants which power Konqueror, Safari, Edge, Chrome, Brave, Opera, all iOS mobile, most Android mobile browsers, and there is Gecko which powers Firefox (Desktop) and its forks (such as the Tor Browser) and Firefox Android.
Two areas where these two engines differ in a "gotcha" kind-of-way are for styling certain browser controls and for handling certain event pseudo-classes.
As an example of the first, generally Firefox browsers, let you style all controls without doing anything special. For example, if I want to style a select tag in Firefox to change its text font-size, I can do:
```
select
{
    font-size: 2in;
}
```
To do the same thing in Safari, I would need to set the -webkit-appearance property to none. On other browsers, I might need to se the appearance property to none.
As an example of the second suppose, I want to use a pseudo-class like :focus or :focus-within. For Firefox, these classes in my experience seem to be usable on more block level elements. For Webkit based browsers, they will only work on elements which are traditionally focusable like input tags. If we want use these pseudo-selectors on a non-traditional elements, for all browsers we can add a tabindex attribute to it:
```
<style>
.hidden-div
{
    display: none;
}
.focus-test
{
    font-size:.6in;
}
.focus-test:focus-within .hidden-div
{
    display:block;
}
</style>
<div class="focus-test">
<a href="">Nothing to see here.</a>
<div class="hidden-div">
    Whoa! Big reveal! In Safari, would need to add tabindex="1" to focus-test div tag
</div>
</div>
```

In-Class Exercise

Write an HTML 5 web page whose body tag only has div tags within it that draws a smiley face (round corners).
If you click on the left eye, it puts an X over the eye and displays text beneath the face: "Ouch! My left eye hurts!".
Similarly, if you click on the right eye, it puts an X over the eye and displays text beneath the face: "Ouch! My right eye hurts!".
Please post your solution to the Sep 14 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 tenth in overall popularity amongst all languages for any use.
The Wikipedia article on PHP says that PHP is used by 78.1% of all the websites whose server-side programming language is publicly known.
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 8.2. The big advantage of PHP 7.x over PHP 5.x is that its interpreter is almost twice as fast.
PHP 8.x introduces a just in time (JIT) compiler, more languages, and better type checking in general, further speeding up the language.
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

Introduction

Box Model

More on the Box Model

Background Images

Position and Display Properties

Keyboard Shortcuts

Notable Browser Differences

In-Class Exercise

Introducing PHP