UP | HOME

Web Design

HTML Full Header

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"> <head> <!– declare all page rendering and programmatic related tags –> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <!– Care about IE ? –> <meta http-equiv="X-UA-Compatible" content="chrome=1"> <!– globalise scripting and styling content language –> <meta name="Content-Type-Script" content="text/javascript" /> <meta name="Content-Type-Style" content="text/css" /> <!– title tag is MANDATORY –> <title>Short and relevant, about 64 characters/spaces</title> <!– declare all CACHE controll –> <meta name="ROBOTS" content="NOINDEX, NOFOLLOW" /> <meta name="revisit-after" content="7 days" />

<!– declare all content description tags –> <meta http-equiv="PICS-Label" content='(PICS-1.1 "http://www.gcf.org/v2.5" labels on "1994.11.05T08:15-0500" until "1995.12.31T23:59-0000" for "http://w3.org/PICS/Overview.html" ratings (suds 0.5 density 0 color/hue 1))'> <!– language specific keywords –> <meta name="keywords" lang="en-us" content="vacation, Greece, sunshine" /> <!– For french example –> <meta name="keywords" lang="fr" content="vacances, Grèce, soleil" /> <meta name="description" content="about 255 characters/spaces WORDS relevant to the content of the actual page" /> <meta name="Abstract" content="about 96 characters/spaces PARAGRAPH describing the actual page content within your site" />

<!– declare all situationnal and external relativity related tags –> <link rel="DC.identifier" type="text/plain" href="http://www.ietf.org/rfc/rfc1866.txt" > <link rel="start" href="" title="Home" > <link rel="prev" href=".." title="Parent section" />

<!– declare all page rendering cascading style sheets in order of incidence –> <link rel="stylesheet" type="text/css" href="globaly-used.css" /> <link rel="stylesheet" type="text/css" href="specificly-used.css" /> <!– declare all page rendering specific cascading style i.e. IE only, hacks etc –> <link rel="stylesheet" type="text/css" href="more-specificly-used.css" /> <link rel="stylesheet" type="text/css" href="i-love-ie.css" />

<!– not relevent to subject, declare all javascripts AFTER css linking –>

</head> <body> </body> </html>

CSS

  1. Display The various ways to control the display and flow of html elements. Html elements are rendered as one of two types, block or inline. Block elements always start a new line, and take up the full width of their parent element. Inline elements do not start a new line, and they only take up as much space as necessary.
  2. Position

Specify the type of positioning method.

These properties pair with a left, right, top, or bottom property to determine how far away from the property to place the item.

  1. Sticky

Fixed|sticky is the property to use when you want to glue an element to part of the window as the user scrolls.

The parent element of a sticky element cannot have the property `overflow: hidden`, `overflow: scroll`, or `overflow: auto`.

If setting an element to sticky inside a flexbox and flex-direction is set to column, stickly will not work because all columns are equal height under flex.

Set `align-self: flex-start` to make the height of the sticky element auto, which then allows sticky to function properly.

  1. Flexbox

The flex attribute makes an elements display as a block level flex container.

Syntax:

  1. Flex Containers

justify-content aligns items along their main axis, align-items aligns items along the cross axis.

flex-wrap determines if to wrap flex items to a new row, and at what point. Do note that this functions along the main axis (and that changes with the flex-direction property).

  1. Flex Children

flex-[shrink,grow] is applicable to children of flex containers, and the INTs given control how much they shrink|grow relative to each other as the parent container shrinks|grows.

flex-basis gives the initial size of children elements before they are modified by css with the flex-[shrink|grow] property.

flex: 0 1 auto are defaults

Overrides the default display order of items inside a flex container.

Useful since the properties float, clear, and vertical-align do not work on flex items. This property overrides the align-items property.

  1. Grid

Used to define a grid layout for a page

Properties

`grid-template-areas: "area area . . .";`

A row is created for every separate string listed, and a column is created for each cell in the string. Multiple named cell tokens within and between rows create a single named grid area that spans the corresponding grid cells. Unless those cells form a rectangle, the declaration is invalid. (Yanked from https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-areas)

  1. Decoration

Border

Syntax: 

border: border-width border-style border-color;
border-width: px, pt, cm, em, thin, medium, thick;
border-style: dotted, dashed, solid, double, groove, ridge, inset, outset, none, hidden;

border-style is mandatory for a border to display.