Lect #3

Syllabus describes topics to be covered, reading material for you to digest before coming to class, and due dates for the assigned projects.
Projects:
Final Project #1, Final Project #2, Final Project #3
You will do one of these - the choice of which is yours to make - and present on the last day of classes.
Additional Requirements
You are expressly requested to refrain from using site editors like Wix, web.com, or other web designers. You may use any of the facilities of Visual Studio or any other text editor of your choice. This same rule applies to your lab submissions as well. For your Final Project demos you will be required to use only page links for navigation. You may host and demonstrate your labs in the built-in Visual Studio web server.
All projects must use:

Asp.net core MVC - main site

Asp.net Web API - web service

Web API Client

SQL db storage

At least one static page that uses new features of HTML5, CSS3, and JavaScript6.
HTML5 - definition and references:
HyperText Markup Language (HTML) is a language for structuring content on a web page. It is based on Elements that have opening and closing tags and bodies with content.
```
  <htmltag>              
    <custom-childtag>    
      "literal text"
    </custom-childtag>
  </htmltag>
```
- The HTML5 standard requires that all custom tags are hypenated, as shown above, to avoid clashes with future standard tags.
- A body, everything between opening and closing tags, may consist of text or markup or both.
- HTML5.2 is the latest standard version.
show page source in new window - Compare rendering with its markup. HTML5 Tutorial
HTML5 Reference - w3schools.com, HTML Reference - MDN, htmlreference.io
HTML tag reference, HTML global attributes, HTML event attributes
HTML5 Tags - tutorialspoint.com
Semantic Markup html5test.com, html5-demos run with Chrome, HTML5 Canvas demos

CSS3 - definition, selectors

Cascading Style Sheets (CSS) are collections of styles of the form:

    selectors { style-property : value; ... }

    example: body { padding:5%; background-color: #ddd; }

  where selectors are combinations of:

    htmltags:         body, div, span, img, ...
    custom-tags:      nav-keys, spacer-10, ... 
    .classnames:      .indent, .undent, .photo, ...
    #idnames:         #placeHolder, #mastheadPhoto, ...
    psuedo-classes:   a:link, a:hover, ...
    psuedo-elements:  p::first-letter, p::first-line, ...  
    attributes:       [attr], [attr=value], ...

  Selectors can be combined:

    s1, s2, ...      applied to s1 and s2 and ...
    s1 s2            applied to s2 if it has s1 ancestor
    s1 > s2          applied to s2 if it has s1 parent
    s1 + s2          applied to s2 if it has adjacent sibling s1
    s1 ~ s2          applied to s2 if it has sibling s1

  Examples:
    ol, ul { margin-top:10px; margin-bottom: 10px; }  // all ordered and unordered lists
    div li { background-color: #dddddd; }             // all list items with div ancestor
    div.indent > p { color: #333333; }                // all paragraphs that are children
                                                      //   of div with class indent

  Note: If any part of a style specification is invalid, the whole specification is invalid
        and will not be applied to it's selectors.  So styles can silently fail.

CSS - references

CSS Reference - w3schools.com, CSS Reference - MDN, cssreference.io, CSS - tympanus.net
units of measure - W3C
stylinwithcss.com, CSS-Tricks Snippets
Guide to Flexbox
CSS Grid by Example, Complete Guide to Grid, Things I learded reading the CSS Grid Spec , The CSS Fractional Unit (fr)
Bootstrap, Foundation, Normalize, purecss.io, Bulma
Uses
- page layout with CSS grid
- styling sections - header, main, sidebar, nav, footer
- styling text
- styling menus, controls like input, custom controls
- animations
CSS is also used, in conjunction with HTML and JavaScript, to build web components.
Specificity
CSS styles may be defined by style attributes applied to an element, styles defined in the document's head, and styles in a linked style sheet. Because of this, it is possible that more than one style value is selected for a given element, so which applies? The winner will be the most specific, e.g., determined by the following order:
- style appled to an element, e.g:
```
  <div style="background-color: #ddd;">...</div>
```
- style defined in a styles section, in the head element of the current document, e.g.:
```
  <style>
    div { background-color: #dedede; }
  </style>
```
- style defined in a styles sheet (file with styles), linked or imported into the current document, e.g.:
```
  <link rel="stylesheet" href="css/StylesTemplate.css" />
  @import url("CSS/DemoStyleSheet3.css");
```
- A matching id attribute is considered more specific than a selection based on class or tag name.
- Should definitions from two different sheets match an element with the same specificity, the last one loaded wins.
You will find the developer's tools in Firefox and Chrome to be very useful in sorting out specificity problems.
Cascade - CSS inheritance
- Inherited styles accumulate
- If inheritance conflict, nearest ancestor wins
- If inheritance conflict, element styles win
- style property !important overrules all
Full Property Table - W3C Shows default values, allowed values, valid targets, if inherited, if % allowed, and Media groups.
Selected CSS Properties
Box Model Properties

Applies to elements with display:block property
- margin: 1em 2em;
- border: 1px solid #ccc;
- padding: 0.5em;
Text Properties
- font-family: tahoma sans-serif;
- font-weight: bold;
- font-size: large;
Color Properties
- background-color: #ddd;
- color: #a00;
List Properties
- list-style: none;
- list-style-type: disc;
- list-style-image: url('myType.gif')
Full Property Table - W3C

Shows default values, allowed values, valid targets, if inherited, if % allowed, and Media groups.
Styling Examples

First.css - static page demo
CSS size properties - uses absolute positioning
CSS font properties - uses CSS FlexBox
CSS Grid - data presentation, CSS Grid - page layout, CSS Grid Demo, Partitioning
StylesTemplate for CSE686 lecture pages
StylesMenu for CSE686 lecture pages
CSS Grid
GridEx1 - layout of information in an element
- grid container: any element with display:grid
- grid-gap: defines space between columns;
- grid-template-columns: defines column spacing
- Content of each column is an element that contains row content
- Content of each row in a grid column is the contents of each row in the column's element
GridEx2 - layout of entire page
- grid container: element with display:grid
- grid-gap: defines space between columns and rows;
- position: absolute; top:0em; bottom:0em; left:0em; right:0em; - forces grid to fill whole page
- grid-template-columns: defines column widths
- grid-template-rows: defines row heights
- grid-template-areas: defines names and order of areas (template cells)
guide to grid
CSS Flexbox
- Font demo
guide to flexbox
Interactive Demo - CSS Build slide show with CSS and a little JavaScript
Lab #3

Lecture #3 - Cascading Style Sheets

Selectors, Cascade, Grid and Flexbox

Content: