Skip to content

Latest commit

 

History

History
702 lines (637 loc) · 22.9 KB

html-notes.org

File metadata and controls

702 lines (637 loc) · 22.9 KB

Notes on HTML and related things

Intro

Private notes on HTML and CSS .. etc.
Starting from the material provided by Mozilla

HTML

Opening

An HTML file starts with stating which standard it holds to. A minimal example that works is the following

<!DOCTYPE html>

Next you declare the opening of the document. This wraps all the content

<html>

Head

Next we open up the “head” which will contain info about the document - but things that aren’t directly visible.
Ex:\

<head>
  <title>My test page</title>
  <meta charset="utf-8">
  <meta name="author" content="George Kontsevich">
  <meta name="description" content="This is a dummy description for a test page
				      that I've made to remind myself of HTML stuff">
  <link rel="shortcut icon" href="gk.ico" type="image/x-icon">
  <link rel="stylesheet" href="css-demo.css">
</head>

Body

Now we have the stuff that ends up displaying on the page

<body>
  <h1> This is an h1 (top level) header - usuall one per page </h1>

Text formating

  <p>This is a paragraph</p>
  <ul>
    <li>unordered</li>
    <li>list</li>
    <li>of</li>
    <li>words</li>
  </ul>
  <ol>
    <li>ordered</li>
    <li>list</li>
    <li>of</li>
    <li>words</li>
    <ul>
      <li>with</li>
      <li>an</li>
      <li>unordered</li>
      <li>list</li>
      <li>of</li>
      <li>words</li>
      <li>inside</li>
    </ul>
  </ol>
  <p>The following is with emphasis: <em>pandas</em></p>
  <p>The following is strong: <strong>more pandas</strong></p>
  <p>Similarly bold (which should be used less b/c it has no semantic meaning): <b>all the pandas</b></p>
  <p>
    Descriptions List:
    <dl>
      <dt>soliloquy</dt>
      <dd>In drama, where a character speaks to themselves, representing their inner thoughts or feelings and in the process relaying them to the audience (but not to other characters.)</dd>
      <dt>monologue</dt>
      <dd>In drama, where a character speaks their thoughts out loud to share them with the audience and any other characters present.</dd>
      <dt>aside</dt>
      <dd>In drama, where a character shares a comment only with the audience for humorous or dramatic effect. This is usually a feeling, thought, or piece of additional background information.</dd>
    </dl>
  </p>
  <p>The quote element — <code>&lt;q&gt;</code> — is <q cite="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/q">intended
      for short quotations that don't require paragraph breaks.</q></p>
  <blockquote cite="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/blockquote">
    <p>The <strong>HTML <code>&lt;blockquote&gt;</code> Element</strong> (or <em>HTML Block
	Quotation Element</em>) indicates that the enclosed text is an extended quotation.</p>
  </blockquote>
  <p>We use <abbr title="Hypertext Markup Language">HTML</abbr> to structure our web documents.</p>

  <p>I think <abbr title="Reverend">Rev.</abbr> Green did it in the kitchen with the chainsaw.</p>
  <p>Caffeine's chemical formula is C<sub>8</sub>H<sub>10</sub>N<sub>4</sub>O<sub>2</sub>.</p>
<pre><code>var para = document.querySelector('p');

para.onclick = function() {
  alert('Owww, stop poking me!');
}</code></pre>

<p>You shouldn't use presentational elements like <code>&lt;font&gt;</code> and <code>&lt;center&gt;</code>.</p>

<p>In the above JavaScript example, <var>para</var> represents a paragraph element.</p>


<p>Select all the text with <kbd>Ctrl</kbd>/<kbd>Cmd</kbd> + <kbd>A</kbd>.</p>

<pre>$ <kbd>ping mozilla.org</kbd>
<samp>PING mozilla.org (63.245.215.20): 56 data bytes
64 bytes from 63.245.215.20: icmp_seq=0 ttl=40 time=158.233 ms</samp></pre>

Links

In the following example we wrap some text with a hyperlink

<p>Now we want to create to my github
  <a href="https://github.com/geokon-gh/"
     title="This is the mouseover text! :)">My Github (with special mouse over text!)</a>
</p>

However you can also wrap images and other elements
As well as link to IDs (once set)

<h2 id="Mailing_address">Mailing address</h2>
<p>Want to write us a letter? Use our <a href="html-demo.html#Mailing_address">mailing address</a>.</p>

You can also set default download names. For instance this is a link to the latest Firefox:

<p>
<a href="https://download.mozilla.org/?product=firefox-latest-ssl&os=win64&lang=en-US"
   download="some-silly-default-file-name.exe">
  Download Latest Firefox for Windows (64-bit) (English, US)
</a>
</p>

Or link to emails

<p>
<a href="mailto:[email protected][email protected]&[email protected]&subject=The%20subject%20of%20the%20email&body=The%20body%20of%20the%20email">
  Send mail with cc, bcc, subject and body
</a>
</p>

Images

The <figure> wrapper <figcaption> elements are for HTML5 and allow for captions with an element that has the appropriate semantic meaning (I’ve doubled the icon’s actual width and height)

<figure>
  <img src="gk.ico"
       alt="This is text that displays if the image doesn't load"
       width="94"
       height="112"
       title="This is some mouse-over text">

  <figcaption>This is the caption below the icon image.</figcaption>
</figure>

Video/Audio

Just a small basic example (205kB file). For more details see: https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content

<video src="pregnant-shrimp.webm" controls>
  <p>Your browser doesn't support HTML5 video. Here is a <a href="pregnant-shrimp.webm">link to the video</a> instead.</p> 
</video>

iframes

Are used to embed other webpages into the current page

<p> Below is an iframe 200 pix high </p>
<iframe src="index.html"
        width="100%" height="200" frameborder="0"
        allowfullscreen sandbox>
  <p> <a href="https://geokon-gh.github.io/index.html"
    Fallback link for browsers that don't support iframes
  </a> </p>
</iframe>

Closing stuff

Gotta close some of the outer brackets

  </body>
</html>

CSS

Rules

Or ruleset. Each rule is a paired selector and a declaration block

Selector

Is a pattern that matches some element on a page like

h1

Class selectors

You can explicitely give HTML elements a class name in an HTML attribute. Classes can be assigned at random and reused

<ul>
  <li class="first done">Create an HTML document</li>
  <li class="second done">Create a CSS style sheet</li>
  <li class="third">Link them all together</li>
</ul>

And then using a dot notation you can select based on the class name

.first {
  font-weight: bold;
}

.done {
  text-decoration: line-through;
}

ID selectors

Similar to Class selectors but for a unique ID

<p id="polite"> — "Good morning."</p>
<p id="rude"> — "Go away!"</p>

And you can can then reference it in your CSS with the pound notation

#polite {
  font-family: cursive;
}

#rude {
  font-family: monospace;
  text-transform: uppercase;
}

Universal selectors

Just selects everything. Can be useful to combine with other selectors

* {
  padding: 5px;
  border: 1px solid black;
  background: rgba(255,0,0,0.25)
}

Attribute selectors

[attr] : This selector will select all elements with the attribute attr, whatever its value. [attr=val] : This selector will select all elements with the attribute attr, but only if its value is val. [attr~=val] : This selector will select all elements with the attribute attr, but only if val is one of a space-separated list of words contained in attr’s value. [attr^=val] : This selector will select all elements with the attribute attr for which the value starts with val. [attr$=val] : This selector will select all elements with the attribute attr for which the value ends with val. [attr*=val] : This selector will select all elements with the attribute attr for which the value contains the substring val. (A substring is simply part of a string, e.g. “cat” is a substring in the string “caterpillar”.)

Pseudo-class selectors

Are a bit involved. These are at the end of an attribute and go after a colon. The designate a certain element state. See the page: https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS/Pseudo-classes_and_pseudo-elements example:

a {
  color: blue;
  font-weight: bold;
}

a:visited {
  color: blue;
}

a:hover,
a:active,
a:focus {
  color: darkred;
  text-decoration: none;
}

Pseudo-element selectors

Can let you select a part of the element to modify. For instance this appends a little arrow to the element

[href^=http]::after {
  content: '⤴';
}

Combinators

A, B - matches A and/or B A B - matches a B that is a descendent of A A > B - matches B that is a direct child of an A A + B - matches B that is the next sibling of an element matching A A ~ B - matches B that is the one of the next sibling of an element matching A

Declaration Block

Is a series of declaration - each a pair of a property and a value

{
color: red;
background-color: grey;
border: 1px solid black;
}

Numbers can be in absolute units like px (pixels) or q (quarter millimeters) mm cm in pt (1/72 of an inch) pc (picas - 12 points). Or they can be in relative units like em (font size of the current element), ex (size of an x) ch (size of the number 0), rem (root em, ie. the top level default font), vw~/~vh 1/100th of the width/height of the viewport

You can also add things for animation:

@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

p {
  color: red;
  width: 100px;
  font-size: 40px;
  transform-origin: center;
}

p:hover {
  animation-name: rotate;
  animation-duration: 0.6s;
  animation-timing-function: linear;
  animation-iteration-count: 5;
}

For details concerning colors, see the Mozilla tutorial: https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS/Values_and_units

More specific rules will override less specific ones

Statements

Are additional blocks that can be written in CSS. The most common are at-rules which sometimes can be nested

@media (min-width: 801px) {
  body {
    margin: 0 auto;
    width: 800px;
  }
}

Cascade

How are HTML elements styled?

  • Each of the element’s `properties` are looked up
  • There will be a default `user-agent` value that can be overriden

Overriding is done using a declaration ex:

color: black;

If the declaration is in-line with HTML then that is used directly.

Else, it uses the style sheet and finds the most specific selector

Selector Specificity

The more specific a selector is, the higher it’s precedence. Its properites override less specific selectors’ properties. Precedence is determines based on the following (in decreasing importance)

  • Based on type

IDs -> Classes -> Tags

  • Based on the number of specifiers

Two specified classes is more specific than one specified class

  • Based on source code order

(in the `.css` file)

The first two rules can be summarized with 3 numbers

1 ID, 2 classes and 3 tags -> 1,2,3

Source Order

Sometimes you are forced to have multiple selectors of equal value In this case the order in the source code file will matter

a:link {..}
a:visited {..}
a:hover {..}
a:active {..}

One HTML <a> can match to multiple of these And the last 3 should situationally override `a:link`’s declarations

Notes:
We try to use as little specificity as possible. This allows us to easily style a particular element when needed

important!

This “cascade”, overriding with more specific selectors, can be blocked. A less specific selector can mark a property as !important

color: red !important;

This will also make it higher priority than any inline declarations Unless they too are marked !important ..

Inheritance

Some elements will pass down properties to their children These are used if the child has no style set with a selector

Note:
This is a process parallel to the cascade.. and some properties are passed down and others are not ..

Example

If a <body> is styled with a `font-family` All child elements will inherit and use this `font-family` Unless they have a different `font-family` set by a declaration

inherit

Cascade selectors will take precedence and override any inherited property However a more specific selector can revert it back using inherit The element will then go start inheriting the value of its parent

a.link {color: blue;}
.footer {color: gray;}
.footer a {color: inherit;}
  • This makes links blue
  • Then makes the `footer` gray
  • Then makes links in the footer go back to following the footer `color`

inherit can also make normally un-inherited properties inherited ..

initial will reset the value to the “default” (browser’s stylesheet..)

initial

Shorthands like font and background set multiple properties at once. If values are omitted then they are silently set to their initial value And they will override any less-specific values you’d set

h1 { font-weight: bold; }
.title { font: 32px Helvetica, Arial, sans-serif; }
  • The second property is more specific (b/c it’s a class based selector)
  • A font-weight was implicit in the font
  • B/c it was omitted it was reset to default normal

And the less specific font-weight in h1 was overriden

Sometimes values are magically inferred - like with padding

padding: 5px 15px;

Normally you’d have [top right bottom left] padding But with just two values it will set the vertical and horizontal padding

Further confusing things padding: 1em 2am 1em Vertical (top/bottom) 2em Horizontal (right/left) But… background-position: 25% 75% 25% Horizontal (right/left) 75% Vertival (top/bottom)

Lengths

Absolute Lengths

1in = 25.4mm = 2.54cm = 6pc = 72pt = 96px

Note: pixels aren’t pixels

Relative Lengths

1.0em = font-size of the current element

padding: 1em;

Padding will be the size of the font

The font-size can be set later/separately. And properties sized in em will adjust

.box { padding: 1em; }
.box .small { font-size: 12px;}
.box .large { font-size: 16px;}

And then all .box elements will have 1em padding..

If you set a font-size using em then it uses the parent’s font-size This makes em have a slighting different meaning in one css rule

body { font-size: 16px; }
.thing { font-size: 1.2em;
	   padding: 1.2em: }
  • The first 1.2em will be relative to 16px (so 19.2px)
  • While the second 1.2em is relative to the new local `font-size` 19.2px

So the `padding` will actually be 23.04px

1.0rem = font-size of the root

:root { font-size: 1em: }
ul { font-size: 0.8rem; }
  • The first will use the browser default font-size of
  • `:root` is equivalent to `html`
  • The recond will be relative to that 16px (12.8px)

Generally you will want to have the root have a sensible font-size Most elements won’t need adjustment and will just inherit the default Those that do can be adjusted can then be tuned with `rem` units

You can then adjust the root font-size and everything will adjust

:root { font-size: 0.75em; }
@media (min-width: 800px) {
:root { font-size: 0.875em; } }
@media (min-width: 1200px) {
:root { font-size: 1em; } }

Here the root font-size is adjusted in a “responsive design” style..

Selector Combinator

.panel { padding: 1em;}
.panel > h2 { margin-top: 0;
		font-size:0.8rem; }

The second selector is the direct descendant combinator It selects an h2 that’s a child element of a .panel element

Viewport

  • 1.0vh 1/100th of the viewport height
  • 1.0vw 1/100th of the viewport width
  • 1.0vmin 1/100th of the smaller of the two
  • 1.0vmax 1/100th of the larger of the two

The viewport is the visible area of the webpage in the browser

.square{ width: 90vmin;
height: 90vmin; }

The square always fits in the visible area

font-size: 2vw;

Scales the font relative to the screen-size .. but you may want to adjust with calc

:root { font-size: calc(0.5em + 1vw);

CSS Variables

:root {
    --main-font: Helvetica, Arial, sans-serif;
    --brand-color: #369;
}
p {
    font-family: var(--main-font);
    color: var(--brand-color, blue);
}

A second value can be added to the var call This functions as a fallback value. For an old browser an explicit fallback is better

color: black;
color: var(--main-color);

Values can also be modified by containers and it will affect all children

Box Model

box-sizing

The default box-sizing is content-box. ie. the size of the box is the size of the contents. Hence:

.main { float: left;
	  width: 70%;}
.sidebar {float: left;
	    width: 30%;
	    padding: 1.5em;}

This will create problems b/c the padding is added on-top of the width. This creates a wrap-around effect

border-box

This will set the size to include the border (but not the margin) So this solves the wrap-around issue

.main { boxing-size: border-box;
	  float: left;
	  width: 70%;}
.sidebar {float: left;
	    width: 30%;
	    padding: 1.5em;}

But setting the boxing-size to not be dumb for ever element is annoying So we can set it universally

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

But if we use external CSS elements then this will mess things up. So another way to do is to use inheritance (so it’s easily overwridden)

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

Adding this to the top of every CSS creates a nice baseline!

Overflow

If you constrain things vertically (setting a height) then things will overflow That means they render outside the parent element

visible
(default)
hidden
overflowing stuff is clipped and not visible
scroll
adds scrollbars
auto
scrollbars only added when overflowingp

Table

The easiest way to make two equal size columns is using display: table

.container{
    display: table;
    width: 100% /* widths need to be set explicitely */
}
.main{
    display: table-cell;
    width: 70%;
}
.sidebar{
    display: table-cell;
    width: 30%;
    margin-left: 1.5em; /* this will no longer work though.. */

The main drawback is that now margins in table-cell’s are disables and you have to use the border-spacing in the table element instead (ex: border-spacing: 1.5em 0) but they will apply on the outer edge as well. This can be fixed in turn with the use of a negative margin on an outer wrapper element.. (page 68)

Flexbox

We can avoid the extra wrapper with the negative margin and use a display: flexbox instead.

.container{
    display: flexbox;
    width: 100% /* widths need to be set explicitely */
}
.main{
    width: 70%;
}
.sidebar{
    width: 30%;
    margin-left: 1.5em; /* this will no longer work though.. */

The contained elements don’t need to specify anything special and all child elements of the flexbox element will have the same height as the parent. Widths and margins no longer need to carefully add up to 100% either as the container-parent will adjust things.

Limits can still be imposed using things like min-height and max-height

Simple vertical centering

can be done by adding padding

header{ padding-top: 4em;
	  padding-bottom: 4em;}

As long as you don’t set a height, this will center the content

If you need to set a height then you can use display: table-cell and vertical-align: middle (page 72). Also see http://howtocenterincss.com

Margin Collapse

When different element’s top/bottom margins’ meet, then they collapse to the largest value between them. So a parent and child’s bottom margins will collapse and two neighbouring elements’ margins will collapse as well into on margin area

Ways to stop collapse:

  • using overflow: auto
  • adding padding
  • use a flexbox (elements in the flexbox don’t collapse with each other)
  • table-cell elements don’t even have margins, so they can’t collapse

Margins on second children

Often it’s convenient to have a top margin only starting with the second child. So that the first child is aligned to the container. This can be done explicitely with the sibling combinator

.button-link {
    display: block;
    padding: 0.5em;
}
.button-link + .button-link {
    margin-top: 1.5em;
}

The second selector is more specific and adds a margin-top to a .button-link only when it follows another .button-link

However we can also do this for the whole webpage all at once using the lobotomized owl selector

body * + * { margin-top: 1.5em' }

And this will add a margin to all second children. You can of course override this when you want to disable it (this should always be pretty easy b/c this selector isn’t very specific).