Week 2 — Cascading Style Sheets (CSS)
The presentation layer for web pages
— Box model & syntax
— Element selector patterns

Web console

Get the web console with the following.

Use the inspector for finding which HTML elements correspond to which parts of the HTML file. Use the style editor for prototyping CSS. Use web console with Javascript. Firefox — Menu Tools --> Web Developer --> Web Console Submenus of interest
- Inspector
- Style editor
- Web console
Chrome — Tools --> JavaScript Console
Safari — Develop --> Show Error Console. You may need to turn on the Developer menu, in which case, Safari --> Preferences, click the Advanced button, and turn on the "Show Develop menu in menu bar" checkbox.
Internet Explorer (obsolescent should move to Firefox or Chrome) — F12 key gets the Developer Tools, then select the console tab

HTML table, div and span elements

Creating tables. The main points are here.
Use of DIV and SPAN elements in Underground Airways web site example.
- the embedded style version.
- the external style version.
Highlights of images and sound — NOT DONE left to you; the content is not of central interest in this course. Using images and sound is a design topic as opposed to a web page construction topic.

CSS overview

CSS element selector patterns

Element selectors can be more specific than simply selecting all instances of an element. Selector patterns are used to select elements depending upon their position relative to other elements, and depending upon mouse position, and mouse clicks.

Selector pattern examples are here.

They show that styles can affect parts of HTML elements.
They show that HTML elements change style depending upon their context (surrounding HTML elements).
They show that HTML elements can change style depending upon mouse states such as hover, active, link, and visited.

Exam topic