HTML & CSS Web-Sites

Code

Published

September 7, 2012

Modified

July 27, 2022

HTML

Text

 …represents a paragraph
<a> …creates a hyperlink
 …syntax highlighting
 …attention
- …draw the reader’s attention
- …formerly known as the Boldface element
- …keywords in a summary, product names in a review
 …importance
- …seriousness, or urgency above the surrounding text
- …typically render the contents in bold type
 …readability
- …text that is set off from the normal prose…
 - …foreign word, designations, terms, transliterations
 - …fictional character, thoughts
 - …definition of a word instead of representing its semantic meaning
 …emphasis
- …words that have a stressed emphasis compared to surrounding text
- …affects the meaning of the sentence itself
- …typically displayed in italic type
 …relevance
- …content which has a degree of relevance
- …within  or <blockquote> elements
<abbr> …abbreviation or acronym
<code> …short fragment of computer code

CSS

CSS (cascading style sheets)…

…describes the presentation HTML
…how elements should be rendered
…standardized by W3C specifications
…rule-based language
CSS modules…
- …language is broken down into modules
- …modules linked to a specification
- …e.g. CSS Grid Layout, CSS Colors
References…
- CSS Reference, Mozilla
- CSS Specification, W3C

HTML `<style>`

CSS files use the *.css suffix…

External …<link> elements can reference a CSS file

<!-- ... -->
<head>
  <!-- ... -->
  <link rel="stylesheet" href="style.css" />
  <!-- ... -->
</head>
<!-- ... -->

Internal …inside a <style> element …inside the HTML <head>

<!-- ... -->
<head>
  <!-- ... -->
  <style>
    /* rulesets */
  </style>
  <!-- ... -->
</head>
<!-- ... -->

Inline …affect a single HTML element …style= attribute

<p style="color:red;">this is read text...</p>

Ruleset

Basic syntax of the CSS ruleset:

selector {
  property: value;
  ...
}

Selector …
- …HTML element name, e.g. p for the  element
- …start of the ruleset
Declaration
- …single rule of the form property: value;
- …inside the braces will be one or more declarations
Properties
- …style an HTML element, e.g. color
- …have different allowable values
Property value
- …right of the property, after the colon
- …for a given property, e.g. color: red;

Example of a ruleset with multiple properties…

p {
  color: red;
  width: 500px;
  border: 1px solid black;
}

Selectors

Separate multiple selectors by commas…

h1, h2, h3 {
  /* ... */
}

Different types of selectors…

…element selector …body selects <body>
…ID selector …p#note selects 
…class selector …p.alert selects 
…attribute selector …img[src] selects <img src="pic.jpg">
…pseudo-class selector …a:hover …selects mouse pointer hover over link

Combinators

Descendant combinator…

…based on location in the document
…select <a> element inside (a descendant of)

p.alert a:hover {
  /* ... */
}

Adjacent sibling combinator…

…element directly after another
…+ between selectors
…select  directly after a  element

p#note + em {
  /* ... */
}

Selectors and combinators can be matched together…

body p#note + em {
  /* ... */
}

Conflicting rules…

…defines which selector is stronger in the event of a conflict
- …more then one selector for the same HTML element…
- …later styles replace conflicting styles that appear earlier
- …class selector overwrites element selector
Cascade layer …order of CSS rules matter
- …two rules from the same cascade layer apply
- …both have equal specificity
- …the one defined last will be used
Specificity…
- …decides the property value that gets applied to the element
- …measure of how specific a selector’s selection will be
- …less specific
  - …element selector
  - …pseudo-element selector
- …more specific
  - …class selector
  - …attribute selectors
  - …pseudo-classes

Inheritance

Some CSS property values set on parent elements are inherited by their child elements…

…e.g. color, font-family
Five special universal property values for controlling inheritance…
- inherit …turns on inheritance
- inital …set to default (inital) value
- revert …reset to browser default styling
- revert-layer …value established in a previous cascade layer
- unset …resets to natural value …either inherit or inital
Shorthand all: property…
- …apply inheritance values to (almost) all properties at once
- …undo changes made to styles
- …known starting point before beginning new changes

Boxes

CSS layout is mostly based on the box model…

…(most) HTML elements …boxes sitting on top of other boxes
…box taking up space on the page
…used to create more complex layouts with CSS

Parts of a block box…

…content box …
- …inline-size and block-size
- …or width and height
…padding box …white-space around content
…border box …wraps the content and any padding
…margin box
- …outermost layer
- …wraps content, padding, and border

Box Model

Standard …dimensions calculated by adding content + padding + border

Alternative…

…declaration box-sizing: border-box
…dimensions include padding and border

Enable alternative box model for all elements…

html {
  box-sizing: border-box;
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

`display:` Block & Inline

Broadly two types of boxes

…block boxes and inline boxes
…defines how a box behaves…
- …in terms of page flow
- …in relation to other boxes
…set using the display property
…have an inner and outer display type
- inner …dictates how elements inside that box are laid out

block type…

…box will break onto a new line
…width and height properties respected
…padding, margin and border apply …push other boxes
…filling up 100% of the space available
…elements with block as default <h*>,

inline type…

…box will not break onto a new line
…width and height not applied
…vertical padding, margins, and borders apply
- …no push to other inline boxes
…horizontal padding, margins, and borders apply
- …push other inline boxes
…elements with inline as default <a>, , ,

`padding`, `border` & `margin`

…boxes properties…

padding …space around the content
border …line outside the padding
margin …space around the outside of the border

Examples for margin and padding with values…

…e.g. 1em,20px …size as fixed value
…5% …relative to the inline size
…auto browser selects a suitable value

/* apply to all four sides */
margin: 1em;

/* ...specfific sides */
padding-top: 10px;
padding-right: 15px;
padding-bottom: 15px;
padding-left: 5px;

/* top | right | bottom | left */
padding: 10px 15px 15px 5px;

/* top | left and right | bottom */
margin: 1em auto 2em;

/* top and bottom | left and right */
margin: 5% auto;

`var()` Custom Properties

…aka cascading variables

var() function …insert the value of a CSS property

var(--name, value)

…name …property name
- …must start with two dashes --
- …case sensitive
…value (optional) fallback value (used if the variable is not found)
…have access to the DOM …accessible to Javascript
…scoping
- …global…
  - …:root {} pseudo class
  - …accessed/used through the entire document
- …local …only inside the selector where it is declared
…custom properties do inherit

/* global scope */
:root {
   --code-background: rgba(0,0,0,0.1);
}

/* use a varibale as property value */
code {
   background-color: var(--code-background);
}

/*local scope ...inherited by child elements */
main {
   --code-border: rgba(0,0,0,0.5);
}

CSS Layout

Arrange boxes…

…in relation to the viewport
…in relation to other boxes

Normal flow …how the browser lays out HTML pages by default

Properties related to layouts…

display:…
- …standard values…
  - …block, inline or inline-block
  - …change how elements behave in normal flow
- …alternative layout methods…
  - …also enabled via specific display values
  - …CSS Grid, Flexbox and table layout
float: …cause block-level elements to wrap along one side of an element
position: …precisely control the placement of boxes inside other boxes

`display:flex`

Flexible box layout…

…lay things out in one dimension
…due to them becoming flex items

Flex model…

…flex container …parent element that has display: flex
…flex items …items laid out as flexible boxes inside the flex container
…main axis
- …direction the flex items are laid out
- …start and end of this axis are called the main start and main end
…cross axis
- …perpendicular to the direction the flex items are laid out
- …start and end of this axis are called the cross start and cross end

Flex container properties…

…flex-direction
- …how flex items are placed
- …specifies which direction the main axis runs
- row (inital value) …main-axis is defined to be the same as the text direction
- column …main-axis is the same as the block-axis
…justify-content…alignment along the main axis
- left, right and center
- …spacing
  - space-between …evenly distributed in the line
  - space-around …evenly distributed in the line with equal space around them
  - space-evenly …distributed so that the spacing between any two items is equal
…align-items …alignment of items on the cross axis

Flex item properties…

flex …expand or contract according to available space

`display:grid`

Two-dimensional layout system…

display:grid …defaults to one column grid
…layouts have…
- …columns
- …rows
- …gaps (gutters)

Grid….

…container …wrapper element with display:grid …parent of…
…item (direct descendant of container) …elements in grid
…line …dividing structure …vertical or horizontal
…cell …between two adjacent row and two adjacent
…track …columns or rows of the grid
…area …composed of any number of grid cells

Container properties…

grid-template-columns & grid-template-rows
- …columns and rows of the grid
- …with size …lengths and percentages
- …fr unit …flexibly size grid rows and columns
gap …creates gaps between tracks

Viewport

Area currently viewed in the browser window

…everything that is currently visible
…depends on the size of the screen
Web contains two viewports…
- …layout viewport
- …visual viewport
  - …part of the web page that is currently visible
  - …reacts to zoom, pop-ups, dynamic keyboards, etc.

Mobile devices come in all shapes and sizes…

…screens of differing device pixel ratios
…render pages in a virtual viewport
- …shrink the rendered result down to screen width
- …users pan and zoom

<!-- use screen width as viewport size -->
<meta name="viewport" content="width=device-width" />

Units…

Unit	Description
`vw`	…relative to 1% of the width of the viewport
`vh`	…relative to 1% of the height of the viewport

…if the viewport is 50cm wide, 1vw = 0.5cm

Text

Web safe fonts…

…limited number of fonts generally available across all systems
Names…
- Arial sans-serif …best practice to use nearly identical Helvetica as alternative
- Courier New monospace …preferred alternative is the older Courier
- Georgia serif
- Times New Roman serif …preferred alternative is the older Times
- Verdana sans-serif
Reference CSS Fonts

Font Style

Properties effecting the font and text …inherited from that element’s parent

Font properties…

font-family
- …specify a font …otherwise browser default font
- …supply a font stack
  - …browser has multiple fonts it can choose from
  - …suitable generic font name at the end
font-size …off all text
- …standard font size is 16px
- px …number of pixels high …absolute unit
- em …relative to font-size of parent
- rem …relative to root element of the document
font-style …normal, italic
font-weight
- normal, bold…
- …lighter, bolder relative to parent
- 100 - 900 …numeric boldness values
color …color of the foreground, underline, overline

/* set defaults... */
html {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 16px;
}

code {
  font-famaly: Courier New, Courier, monospace;
  font-size: 0.95.rem;
}

Text properties…

text-transform…
- none, uppercase, lowercase…
- …first letter capitalize…
- …full-width …inside a fixed-width square
text-decoration …shorthand
- …none, underline, overline, line-through
- …can accept multiple values
text-decoration-line …none, underline, overline, line-through, blink
text-decoration-style …solid, double, dotted, dashed, wavy
text-decoration-color…
text-shadow …apply drop shadows

Text Layout

Affect spacing …other layout of text

text-align …alignment within containing content box
- left, right …center
- justify …text spread out …varying the gaps between words
line-height …height of each line of text
- …typical units or…
- 1.5 unit less value …acts as a multiplier
letter-spacing, word-spacing
text-indent …horizontal space before first line
text-overflow …how to display overflow content
white-space …how white space inside an element is handled
word-break …before text overflow

--- title: HTML & CSS Web-Sites categories: - Code date: 2012/09/07 date-modified: 2022/07/27 --- # HTML ## Text * `` ...represents a paragraph * `<a>` ...creates a hyperlink * `` ...syntax highlighting * `` ...**attention** * ...draw the reader's attention * ...formerly known as the Boldface element * ...keywords in a summary, product names in a review * `` ...**importance** * ...seriousness, or urgency above the surrounding text * ...typically render the contents in bold type * `` ...**readability** * ...text that is set off from the normal prose... * ...foreign word, designations, terms, transliterations * ...fictional character, thoughts * ...definition of a word instead of representing its semantic meaning * `` ...**emphasis** * ...words that have a stressed emphasis compared to surrounding text * ...affects the meaning of the sentence itself * ...typically displayed in italic type * `` ...**relevance** * ...content which has a degree of relevance * ...within `` or `<blockquote>` elements * `<abbr>` ...abbreviation or acronym * `<code>` ...short fragment of computer code # CSS CSS (cascading style sheets)... * ...describes the presentation HTML * ...how elements should be rendered * ...standardized by W3C specifications * ...rule-based language * CSS modules... * ...language is broken down into modules * ...modules linked to a specification * ...e.g. CSS Grid Layout, CSS Colors * References... * [CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS), Mozilla * [CSS Specification](https://www.w3.org/Style/CSS/#specs), W3C ## HTML `<style>` CSS files use the `*.css` suffix... **External** ...`<link>` elements can reference a CSS file ```html  <head>  <link rel="stylesheet" href="style.css" />  </head>  ``` **Internal** ...inside a `<style>` element ...inside the HTML `<head>` ```html  <head>  <style> /* rulesets */ </style>  </head>  ``` **Inline** ...affect a single HTML element ...`style=` attribute ```html this is read text... ``` ## Ruleset Basic syntax of the CSS ruleset: ```css selector { property: value; ... } ``` * **Selector** ... * ...HTML element name, e.g. `p` for the `` element * ...start of the ruleset * **Declaration** * ...single rule of the form `property: value;` * ...inside the braces will be one or more declarations * **Properties** * ...style an HTML element, e.g. `color` * ...have different allowable values * **Property value** * ...right of the property, after the colon * ...for a given property, e.g. `color: red;` Example of a ruleset with multiple properties... ```css p { color: red; width: 500px; border: 1px solid black; } ``` ## Selectors Separate multiple selectors by commas... ```css h1, h2, h3 { /* ... */ } ``` Different types of selectors... * ...**element** selector ...`body` selects `<body>` * ...**ID** selector ...`p#note` selects `` * ...**class** selector ...`p.alert` selects `` * ...**attribute** selector ...`img[src]` selects `<img src="pic.jpg">` * ...**pseudo-class** selector ...`a:hover` ...selects mouse pointer hover over link ### Combinators **Descendant combinator**... * ...based on location in the document * ...select `<a>` element inside (a descendant of) `` ```css p.alert a:hover { /* ... */ } ``` **Adjacent sibling combinator**... * ...element directly after another * ...`+` between selectors * ...select `` directly after a `` element ```css p#note + em { /* ... */ } ``` Selectors and combinators can be matched together... ```css body p#note + em { /* ... */ } ``` ### [Conflicting rules](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance)... * ...defines which selector is stronger in the event of a conflict * ...more then one selector for the same HTML element... * ...later styles replace conflicting styles that appear earlier * ...class selector overwrites element selector * **Cascade layer** ...order of CSS rules matter * ...two rules from the same cascade layer apply * ...both have equal specificity * ...the one defined last will be used * **Specificity**... * ...decides the property value that gets applied to the element * ...measure of how specific a selector's selection will be * ...less specific * ...element selector * ...pseudo-element selector * ...more specific * ...class selector * ...attribute selectors * ...pseudo-classes ### Inheritance Some CSS property values set on parent elements are inherited by their child elements... * ...e.g. `color`, `font-family` * Five special universal property values for controlling inheritance... * `inherit` ...turns on inheritance * `inital` ...set to default (inital) value * `revert` ...reset to browser default styling * `revert-layer` ...value established in a previous cascade layer * `unset` ...resets to natural value ...either `inherit` or `inital` * Shorthand `all:` property... * ...apply inheritance values to (almost) all properties at once * ...undo changes made to styles * ...known starting point before beginning new changes ## Boxes CSS layout is mostly based on the box model... * ...(most) HTML elements ...boxes sitting on top of other boxes * ...box taking up space on the page * ...used to create more complex layouts with CSS Parts of a block box... * ...content box ... * ...`inline-size` and `block-size` * ...or `width` and `height` * ...padding box ...white-space around content * ...border box ...wraps the content and any padding * ...margin box * ...outermost layer * ...wraps content, padding, and border ### Box Model Standard ...dimensions calculated by adding content + padding + border Alternative... * ...declaration `box-sizing: border-box` * ...dimensions include padding and border Enable alternative box model for all elements... ```css html { box-sizing: border-box; } *, *::before, *::after { box-sizing: inherit; } ``` ### `display:` Block & Inline Broadly two types of boxes * ...`block` boxes and `inline` boxes * ...defines how a box behaves... * ...in terms of page flow * ...in relation to other boxes * ...set using the `display` property * ...have an inner and outer display type * inner ...dictates how elements inside that box are laid out `block` type... * ...box will break onto a new line * ...`width` and `height` properties respected * ...padding, margin and border apply ...push other boxes * ...filling up 100% of the space available * ...elements with block as default `<h*>`, `` `inline` type... * ...box will not break onto a new line * ...`width` and `height` not applied * ...vertical padding, margins, and borders apply * ...no push to other inline boxes * ...horizontal padding, margins, and borders apply * ...push other inline boxes * ...elements with inline as default `<a>`, ``, ``, `` ### `padding`, `border` & `margin` ...boxes properties... * `padding` ...space around the content * `border` ...line outside the padding * `margin` ...space around the outside of the border Examples for `margin` and `padding` with values... * ...e.g. `1em`,`20px` ...size as fixed value * ...`5%` ...relative to the inline size * ...`auto` browser selects a suitable value ```css /* apply to all four sides */ margin: 1em; /* ...specfific sides */ padding-top: 10px; padding-right: 15px; padding-bottom: 15px; padding-left: 5px; /* top | right | bottom | left */ padding: 10px 15px 15px 5px; /* top | left and right | bottom */ margin: 1em auto 2em; /* top and bottom | left and right */ margin: 5% auto; ``` ## `var()` Custom Properties ...aka cascading variables `var()` function ...insert the value of a CSS property ```txt var(--name, value) ``` * ...`name` ...property name * ...must start with two dashes `--` * ...case sensitive * ...`value` (optional) fallback value (used if the variable is not found) * ...have access to the DOM ...accessible to Javascript * ...scoping * ...**global**... * ...`:root {}` pseudo class * ...accessed/used through the entire document * ...**local** ...only inside the selector where it is declared * ...custom properties do inherit ```css /* global scope */ :root { --code-background: rgba(0,0,0,0.1); } /* use a varibale as property value */ code { background-color: var(--code-background); } /*local scope ...inherited by child elements */ main { --code-border: rgba(0,0,0,0.5); } ``` ## [CSS Layout](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout) Arrange boxes... * ...in relation to the viewport * ...in relation to other boxes Normal flow ...how the browser lays out HTML pages by default Properties related to layouts... * `display:`... * ...standard values... * ...`block`, `inline` or `inline-block` * ...change how elements behave in normal flow * ...alternative layout methods... * ...also enabled via specific `display` values * ...CSS Grid, Flexbox and table layout * `float:` ...cause block-level elements to wrap along one side of an element * `position:` ...precisely control the placement of boxes inside other boxes ### `display:flex` [Flexible box layout](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout)... * ...lay things out in **one dimension** * ...due to them becoming flex items [Flex model](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox#the_flex_model)... * ...**flex container** ...parent element that has `display: flex` * ...**flex items** ...items laid out as flexible boxes inside the flex container * ...**main axis** * ...direction the flex items are laid out * ...start and end of this axis are called the main start and main end * ...**cross axis** * ...perpendicular to the direction the flex items are laid out * ...start and end of this axis are called the cross start and cross end Flex container properties... * ...`flex-direction` * ...how flex items are placed * ...specifies which direction the main axis runs * `row` (inital value) ...main-axis is defined to be the same as the text direction * `column` ...main-axis is the same as the block-axis * ...`justify-content`...alignment along the main axis * `left`, `right` and `center` * ...spacing * `space-between` ...evenly distributed in the line * `space-around` ...evenly distributed in the line with equal space around them * `space-evenly` ...distributed so that the spacing between any two items is equal * ...`align-items` ...alignment of items on the cross axis Flex item properties... * `flex` ...expand or contract according to available space ### `display:grid` Two-dimensional layout system... * `display:grid` ...defaults to one column grid * ...layouts have... * ...columns * ...rows * ...gaps (gutters) Grid.... * ...**container** ...wrapper element with `display:grid` ...parent of... * ...**item** (direct descendant of container) ...elements in grid * ...**line** ...dividing structure ...vertical or horizontal * ...**cell** ...between two adjacent row and two adjacent * ...**track** ...columns or rows of the grid * ...**area** ...composed of any number of grid cells Container properties... * `grid-template-columns` & `grid-template-rows` * ...columns and rows of the grid * ...with size ...lengths and percentages * ...`fr` unit ...flexibly size grid rows and columns * `gap` ...creates gaps between tracks ## Viewport Area currently viewed in the browser window * ...everything that is currently visible * ...depends on the size of the screen * Web contains two viewports... * ...**layout viewport** * ...**visual viewport** * ...part of the web page that is currently visible * ...reacts to zoom, pop-ups, dynamic keyboards, etc. Mobile devices come in all shapes and sizes... * ...screens of differing device pixel ratios * ...render pages in a virtual viewport * ...shrink the rendered result down to screen width * ...users pan and zoom ```html  <meta name="viewport" content="width=device-width" /> ``` Units... Unit | Description ------|-------------------- `vw` | ...relative to 1% of the **width** of the viewport `vh` | ...relative to 1% of the **height** of the viewport ...if the viewport is 50cm wide, 1vw = 0.5cm ## Text **Web safe fonts**... * ...limited number of fonts generally available across all systems * Names... * `Arial` sans-serif ...best practice to use nearly identical `Helvetica` as alternative * `Courier New` monospace ...preferred alternative is the older `Courier` * `Georgia` serif * `Times New Roman` serif ...preferred alternative is the older `Times` * `Verdana` sans-serif * Reference [CSS Fonts](https://www.cssfontstack.com) ### Font Style Properties effecting the font and text ...inherited from that element's parent Font properties... * `font-family` * ...specify a font ...otherwise browser default font * ...supply a **font stack** * ...browser has multiple fonts it can choose from * ...suitable generic font name at the end * `font-size` ...off all text * ...standard font size is `16px` * `px` ...number of pixels high ...absolute unit * `em` ...relative to font-size of parent * `rem` ...relative to root element of the document * `font-style` ...`normal`, `italic` * `font-weight` * `normal`, `bold`... * ...`lighter`, `bolder` relative to parent * `100` - `900` ...numeric boldness values * `color` ...color of the foreground, underline, overline ```css /* set defaults... */ html { font-family: Arial, Helvetica, sans-serif; font-size: 16px; } code { font-famaly: Courier New, Courier, monospace; font-size: 0.95.rem; } ``` Text properties... * `text-transform`... * `none`, `uppercase`, `lowercase`... * ...first letter `capitalize`... * ...`full-width` ...inside a fixed-width square * `text-decoration` ...shorthand * ...`none`, `underline`, `overline`, `line-through` * ...can accept multiple values * `text-decoration-line` ...`none`, `underline`, `overline`, `line-through`, `blink` * `text-decoration-style` ...`solid`, `double`, `dotted`, `dashed`, `wavy` * `text-decoration-color`... * `text-shadow` ...apply drop shadows ### Text Layout Affect spacing ...other layout of text * `text-align` ...alignment within containing content box * `left`, `right` ...`center` * `justify` ...text spread out ...varying the gaps between words * `line-height` ...height of each line of text * ...typical units or... * `1.5` unit less value ...acts as a multiplier * `letter-spacing`, `word-spacing` * `text-indent` ...horizontal space before first line * `text-overflow` ...how to display overflow content * `white-space` ...how white space inside an element is handled * `word-break` ...before text overflow

HTML

Text

CSS

HTML <style>

Ruleset

Selectors

Combinators

Conflicting rules…

Inheritance

Boxes

Box Model

display: Block & Inline

padding, border & margin

var() Custom Properties

CSS Layout

display:flex

display:grid

Viewport

Text

Font Style

Text Layout

HTML `<style>`

`display:` Block & Inline

`padding`, `border` & `margin`

`var()` Custom Properties

`display:flex`

`display:grid`