G4G0-1/Semester 1/Web Development and HCI/Week 7/Week 7 Web Development.md

Lecture 1 (13:00)

Box Dimensions

• A box is sized just big enough for its contents by default.
• Dimensions are usually specified using either relative or absolute dimensions.
  • Most common dimensions are px, %, or ems.

Relative Dimensions / Measurements

• Relative length units scale better between different rendering mediums.

Unit	Description
em	Relative to the font-size of the element (2em means 2times the size of the current font)
ex	Relative to the x-height of the current font (rarely used)
ch	Relative to width of the "0" (zero)
rem	Relative to font-size of the root element
vw	Relative to 1% of the width of the viewport
vh	Relative to 1% of the height of the viewport
vmin	Relative to 1% of viewport's smaller dimension
vmax	Relative to 1% of viewport's larger dimension
%	Percentage of container dimension

Absolute Dimensions

• Absolute length units are not recommended for use on screen, because screen sizes vary so much.
• However, they can be used if the output medium is known, such as for print layout.

Unit	Description
cm	centimetres
mm	millimetres
in	inches (1in = 96px = 2.54cm)
px	pixels (1px = 1/96th of 1in)
pt	points (1pt = 1/72 of 1in)
pc	picas (1pc = 12 pt)

Limiting Width min-width, max-width

• Pages can be designed to expand and shrink to fit the users screen.
  • min-width specifies the smallest the box can be
  • max-width specifies the largest the box can be
  • This is helpful to making sure all pages are legible on all devices and screen sizes.

Limiting Height min-height, max-height

• It is also possible to limit the height of a CSS box using min-height and max-height.
• If content is too large for the box it can expand and look unclean.
• By using the overflow property, we can specify what happens to additional content when it is larger than its bounding box.

Overflowing Content overflow

• The overflow property tells the browser how to deal with content that expands outside of the box.
• It can have the following values:
  • hidden - additional content is discarded at render.
  • visible - default value. Content renders outside of the bounding box.
  • scroll - add a scroll bar to the box to allow additional content to be seen.
  • clip - similar to hidden, but forbids all types of scrolling.

Box Model

• Every box has 3 available properties
  • border - If visible, the width of the border
  • margin - space between this and adjacent boxes
  • padding - space between border and content

Border

• The border property allows us to specify width, style and colour in one line ( in that order )

p {
	width: 250px;
	border: 3px dotted red;
}

Border Width border-width

• Can be defined as thick medium or thin, but usually in pixels.
• Can also control the 4 borders individually:
  • border-top-width: 2px;
  • border-right-width: 1px;
  • etc..
• Or by setting 4 values of border-width
  • border-width: 2px, 1px, 1px, 2px;
  • border-width: top right bottom left;

Border Style border-style

• Controls the style of the border
  • Accepts: solid dotted dashed double groove ridge inset outset hidden none.
• Can also set style of the borders individually:
  • border-top-style: dotted;
  • border-right-style: ridge;
  • etc..

Border Colour border-color

• Can be set to the hard-coded CSS colour values, RGBA, HSLA, etc..
  • border-color: darkcyan;
• Can be set individually using the same scheme as previous.

Padding

• The padding property allows us to shorthand set the values for all 4 padding properties in one line

	padding: 10px 10px 5px 5px;

If we only specify 2 values, they will be treated as [top/bottom] [left/right]

Margin

• Similar to padding and border, we have a shorthand property called margin

	margin: 20px 20px 25px 20px;

If we only specify 2 values, they will be treated as [top/bottom] [left/right]

Centering Content

• Box must have a specified width ( or it will fill the page )
• Set left-margin and right-margin to auto.
• Browser will set the margin to the space it could take up, equally, on each side of the box.

Note: Older browsers may need the property text-align set to centre too.