1 of 26

CS1520: Programming Languages for Web Application Development

Lecture 08: Logging & Debugging / CSS

2 of 26

Learning Objectives

  1. Use logging to share informational, warning, and error messages with users
  2. Learn about how to include CSS in your web pages
  3. Learn about different CSS properties and values

3 of 26

Logging and Debugging

4 of 26

To See What's Happening Right Now...

gcloud app logs tail

5 of 26

Logging and Debugging

Since you won't be able to always be there watching, logging allows you to store information and errors for later review.

You can use standard Python logging:

import logging� logging.info('Some informational message.')� logging.warn('Some message you want to warn about.')

https://console.cloud.google.com/logs/viewer to view logs.

6 of 26

You Can Also Enable Cloud Logging

See: https://github.com/timothyrjames/gae-webdev/tree/main/step07

Now instead of stdout / stderr you will need to select 'app' in the Cloud Logging interface, but you'll get status codes.

See https://cloud.google.com/logging/docs/setup/python for more information.

7 of 26

Cascading Style Sheets

8 of 26

Cascading Style Sheets (CSS)

CSS is used for formatting of your page.

Selectors & declarations. Selectors based on:

  • Elements
  • IDs
  • Classes

These can be combined.

Can be shared by using commas.

​

9 of 26

Cascading Style Sheets (CSS) Selectors

footer {

font-style: italic;

font-size: 8pt;

}

#highlight {

border-color: #ff0000;

}

.bluesection {

background-color: darkblue;

color: white;

}

element selector

class selector

id selector

10 of 26

Cascading Style Sheets (CSS) Selectors

Selectors can be combined:

  • a, p, div { ...
    • uses the same CSS properties for a, p, and div�
  • p.blue { ...
    • matches "blue" classes in "p" elements�
  • div header { ...
    • matches "header" elements directly following "div" elements

11 of 26

Cascading Style Sheets (CSS) Selectors

Keep it simple - "universal" application of CSS properties will lead to conflicts and unexpected behaviors.

12 of 26

Cascading Style Sheets

Can be used:

  • Externally using a CSS file.
  • Using style elements in your HTML file.
  • Using the "style" attribute in an element.

13 of 26

Cascading Style Sheet

<head>

<title>HTML samples</title>

<style>

body {

font-family: Arial;

font-size: 10pt;

}

</style>

</head>

<head>

<title>HTML samples</title>

<link rel="stylesheet" href="style.css">

</head>

<section style="font-weight: bold; font-size: 1.25rem;">

This is an HTML file, and it is full of links to samples.

</section>

external CSS file

style HTML element

style attribute in HTML

14 of 26

CSS Fonts

font-family:

  • serif | sans-serif | monospace | cursive | fantasy | <FONT-NAME>

font-style:

  • normal | italic

font-weight:

  • normal | bold

font-size:

  • px (pixels)
  • em (relative font size; 1.5)
  • % (percentage)
  • vw (percentage of viewport)
  • vh (percentage of viewport)
  • pt (actual font points)

15 of 26

CSS Link States

link:

  • a:link

visited

  • a:visited

active

  • a:active

hover

  • a:hover

​

16 of 26

CSS Colors

Declarations:

  • color
  • background-color
  • border-color

Can use hex codes, rgb values, or color names.

  • hex codes are a 6-digit hexadecimal number representing red, blue, and green - i.e., #FF0080 is 100% red, no blue, and 50% green.

17 of 26

CSS Colors (Names)

moccasin

navajowhite

navy

oldlace

olive

olivedrab

orange

orangered

orchid

palegoldenrod

palegreen

paleturquoise

palevioletred

papayawhip

peachpuff

peru

pink

plum

powderblue

purple

red

rosybrown

royalblue

saddlebrown

salmon

lightpink

lightsalmon

lightseagreen

lightskyblue

lightslategray

lightslategrey

lightsteelblue

lightyellow

lime

limegreen

linen

magenta

maroon

mediumaquamarine

mediumblue

mediumorchid

mediumpurple

mediumseagreen

mediumslateblue

mediumspringgreen

mediumturquoise

mediumvioletred

midnightblue

mintcream

mistyrose

​

gainsboro

ghostwhite

gold

goldenrod

gray

green

greenyellow

grey

honeydew

hotpink

indianred

indigo

ivory

khaki

lavender

lavenderblush

lawngreen

lemonchiffon

lightblue

lightcoral

lightcyan

lightgoldenrodyellow

lightgray

lightgreen

lightgrey

​

darkgreen

darkgrey

darkkhaki

darkmagenta

darkolivegreen

darkorange

darkorchid

darkred

darksalmon

darkseagreen

darkslateblue

darkslategray

darkslategrey

darkslategrey

darkturquoise

darkviolet

deeppink

deepskyblue

dimgray

dimgrey

dodgerblue

firebrick

floralwhite

forestgreen

fuchsia

aliceblue

antiquewhite

aqua

aquamarine

azure

beige

bisque

black

blanchedalmond

blue

blueviolet

brown

burlywood

cadetblue

chartreuse

chocolate

coral

cornflowerblue

cornsilk

crimson

cyan

darkblue

darkcyan

darkgoldenrod

darkgray

​

silver

gray

white

maroon

red

purple

fuchsia

green

lime

olive

yellow

navy

blue

teal

aqua

sandybrown

seagreen

seashell

sienna

silver

skyblue

slateblue

slategray

slategrey

snow

springgreen

steelblue

tan

teal

thistle

tomato

turquoise

violet

wheat

white

whitesmoke

yellow

yellowgreen

​

18 of 26

CSS Background

images:

  • background-image: url("paper.gif");

repeat:

  • background-repeat: repeat-x;
  • background-repeat: repeat-y
  • background-repeat: no-repeat;

19 of 26

CSS Box

margin / border / padding all have left / right / bottom / top declarations.

The following border declarations are commonly used:

  • border
  • border-style
  • border-color
  • border-radius

20 of 26

CSS Borders

border-style

  • dotted
  • dashed
  • solid
  • double
  • groove
  • ridge
  • inset
  • outset
  • none
  • hidden

border-color

border-width

  • in: px, pt, cm, em
  • 2 values for: top+bottom sides
  • 4 values for: top right bottom, left
  • also thick, medium, thin

border-radius

  • allows for rounded corners

21 of 26

CSS Visibility and Positioning

HTML has "block" elements: start a new line and take up 100% width.

HTML also has "inline" elements: appear in normal text flow.

Can be changed with:

  • display: none | inline | block | inline-block | flex

"none" hides the element completely; to hide with its space:

  • visibility: hidden (or visible)

​

22 of 26

CSS Flex

Requires "container" and elements

flex-direction: column | row

flex-wrap: wrap | nowrap

justify-content: center | flex-start | flex-end

​

23 of 26

CSS Visibility and Positioning

position: static | relative | fixed | absolute

  • for absolute - use "top" and "left" properties (or "right" / "bottom")

24 of 26

Other CSS Properties

outline (outside border):

  • -style -color -width

float: left | right

text-align:

  • center | left | right | justify

text-decoration:

  • overline | underline | line-through

opacity:

  • 0.0 => 1.0

text-transform:

  • uppercase | lowercase | capitalize

text-shadow:

  • horizontal vertical blur color

list-style-type:

  • disc | circle | square | none
  • decimal | upper-roman | lower-roman | upper-alpha | lower-alpha

​

25 of 26

CSS Examples in Practice

see:

https://github.com/timothyrjames/gae-webdev/tree/main/step08

​

26 of 26

Questions?

​

​

​

​

​

​

​

​

​

​