Info_CSS

COMMENTS IN CSS: use /*place your comments here*/

CSS defines the visual representation of the content of a website, such as
colour, margins, borders, backgrounds and positions in the page. CSS is the
presentation of the website, where HTML is the structure.

Selector: element
example of CSS rule:
body {
  color: xxxx;
}
'body' is the selector, 'color' is the property and 'xxx' is the value:
general code is
selector {
  property: value;
  property: value;
  property: value;
  ( ... etc. ...)
}
A group of properties for a given selector is always defined within the curly
braces, as shown above.
With the * selector ALL elements are selected. * can also select all elements
inside another element.
Text decoration includes underline, overline and line-through.

SELECTOR: The part of a CSS rule that determines which HTML elements the rule
applies to.
Selector: class
A class selector selects all elements that use the specified class. This can be
.my-picture or .title.
Pseudo classes: a keyword added to a selector.
A pseudo class specifies a special state of the element to be selected, for
example 'hover' to turn a button blue when the cursor hovers over it.

Selector: id
The id selector selects the element with the exact id. There can be only one
element with a particular id.

Selector: nested elements
This selects all elements of a type that are nested within a class

Using element selectors the style is ensured for all elements of that type:
h1 style for all headings of size 1, etc.

RESET styles to avoid browser inconsistencies:
html, body, div, h1, h2, h3, h4, h5, h6, p, a, img, small, b, i, ol, ul, li {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  vertical-align: baseline;
}
UNDO BULLETS: lists can be used without bullets by adding 'list-style: none;'
LIST HAS PADDING AND MARGINS BY DEFAULT in all browsers. Remove these with
'margin: 0;' and 'padding: 0;'

DISPLAY The display property specifies the display behaviour (the type of rendering
box) of an element. In HTML, the default display property value is taken from the
HTML specifications or from the browser/user default style sheet.
INLINE and BLOCK ELEMENTS are the most common ways to display elements.

- block: elements appear on a new line (also called block-level element)
  <div> is the standard block-level element: starts on a new line and stretches
  out to the left and right as far as it can.
  <p>, <form>, <header>, <footer>, <section>, <h1>, <ul>, <li> etc. are also
  block-level elements.

- inline: elements appear on the same underline
  An inline element can wrap some text inside a paragraph: <span>sometext</span>
  without disrupting the flow of that paragraph.
  Examples of inline elements are <img>, <a> (most common because used for links),
  <em>, <strong> and <span>.

INLINE-BLOCK is a display element that is used instead of INLINE when the div
contains a class that is a block element (such as <h1>) that takes over.
Inline-blocks can have a width and height, for example to create a grid of boxes.
Inline-block can be used for layouts: set 'vertical-align' to 'top', set the
width of each column that is defined in the html code. Mind whitespaces in the
HTML: these will show as gaps between the columns.

COLUMN: It is possible to make a multi-column text, for example:
.three-column {
  padding: 1em;
  -moz-column-count: 3;
  -mox-column-gap: 1em;
  -webkit-column-count: 3;
  -webkit-column-gap: 1em;
  column-count: 3;
  column-gap: 1em;
}

NONE is also a display value: hide and show elements without really deleting
and recreating them. The page is rendered as though the element does not exist,
in contrast to 'visibility: hidden' where the element is hidden but still takes
up the space it would have if visible.

MAX-WIDTH: using 'max-width: xxxpx' instead of 'width' when preventing a block-level
element from stretching out to the edges of the container, the web page is usable on
small screens: you can resize the page. The width of the block-level element is set
and with 'margin: 0 auto;' the element will centre horizontally in the container:
the remaining space will be split evenly between the two margins.

FLOATING ELEMENTS
A floating elements stands as far to the left or right of their container
element as possible. Other elements, such as paragraphs text or Lists, wrap around
the floating element. To ensure an element floats, its width must always be
specified (otherwise it takes the width of the entire page).
Floating properties:
float: right  --> float to the right of the page
float: left   --> float to the left of the page
float: inherit --> inherit the value of the parent element
float: none   --> do not float
To NOT WRAP text but have this appear after the floating element, use 'clear':
'clear: left;' will move the text, list etc. down below the float instead of
wrapping it around the floating element (same for 'clear: right;' and 'clear: both;').

CLEARFIX: in case an image etc. is taller than the element containing it (the
container), the image may overflow outside of its container. This can be fixed
using '.clearfix {
          overflow: auto;
        }'

BOX MODEL: an element can be seen as a box. The box model describes the
stacking of spatial properties of an element: what effects its size and
spacing on the page. These are padding, margin, border, height and width.

PADDING AND MARGIN
Margin: whitespace AROUND the element
Padding: whitespace INSIDE the element

Padding and margin can be set in a number of ways:
padding: top right bottom left  --> padding: 10px 20px 30px 5px
padding: top right/left bottom  --> padding: 10px 20px 5px
padding: top/bottom right/left  --> padding: 5px 15px
padding: all  --> padding: 20px
You can also set one specific padding: padding-right
All of this also applies to MARGIN.

To keep the box from becoming bigger with padding and borders, use BOX-SIZING.
With 'box-sizing: border-box;' the padding and border no longer increase the
width of a box. This is a very recent technique and should be used together
with '-webkit' and '-moz' prefix to be used in specific browsers. Use as follows:
-webkit-box-sizing: border-box;
   -mox-box-sizing: border-box;
        box-sizing: border-box;

PERCENT WIDTH: percent is a measurement unit relative to the containing box.
It can ensure that an image is always 50% the width of its container, for example.
With 'min-width' and 'max-width' the size of the image can be limited.

PSEUDO CLASS
A pseudo class is a keyword added to selectors to specify a special STATE. In
this way, different styling can be specified for different states of a link:
a:link
a:visited
a:hover
a:active
This ORDER should be followed to apply different styling for all of the states.
With HOVER it is also possible to use time lapse for the effect to happen, e.g.:
effect builds up during certain time -->   transition-duration: 0.5s;
effect does not start immediately --->     transition-delay: 0.2s;
rotating effect of buttons etc. --->       transform: rotate(90deg);

It is possible to define COMMON STYLES for different CSS classes by comma-separating
them:
.portrait, .title {
  display: inline-block;
}

POSITIONING
Inline boxes flow from left to right and block boxes from top to bottom.
Default position HTML elements is <div class="static">. STATIC means not positioned
in any specific way within the normal flow of the page. If not static, then an
element is 'positioned'.
<div class="relative">: when an element has position RELATIVE it is no longer in
the normal flow and can be moved to top/bottom/right/left.
With a FIXED position, an element is relative to the viewport of the browser
window. As the viewport does not change when the window is scrolled, the element
always appears to be at the same place. Top/right/bottom/left properties are used.
A fixed element does not leave a gap in the page where it would normally have been
located.
ABSOLUTE positioning means the element behaves as if fixed, except relative to
the nearest positional ancestor (or else the document body). An element of
<div class="relative"> can have an absolute-positioned 'child': <div class="absolute">.

Z-INDEX: the z-index controls how content overlaps. The element with the highest
z-index appears on top.

MEDIA QUERIES AND RESPONSIVE DESIGN: making a design that responds to the browser
and the device that is used, can be done by using media queries.
Use '@media screen and (min-width: xxxpx)' and '@media screen and (max-width: xxxpx)'
for this, for example to move a menu to the top if the browser is too small to
have the menu as sidebar.

TEXT SHADOW: adds a drop shadow and is formatted as follows:
text-shadow: horizontal-shadow vertical-shadow blur color
- horizontal-shadow: length of shadow along x-axis
- vertical-shadow: length of shadow along y-axis
- blur: controls how much (if any) blur radius is added to the shadow (optional)
- color: controls the colour of the shadow (optional)
Same goes for BOX SHADOW: this makes it possible to use multiple drop shadows on
box elements using: 'box-shadow: horizontal-shadow vertical-shadow blur size
 color inset'

RGBA: with rgba not only colour but also opacity can be assigned:
rgba(rgb code, opacity). For example, rgb(176, 175, 192) is the hex code #b0afc0.
Opacity of 0.2 is very transparant; 1.0 is solid colour.

BORDER RADIUS: creates rounded corners to elements; the higher the number, the
bigger the curve.

BACKGROUND IMAGES: add to 'body': 'background: url(path-to-image)'
Use more background images by adding more urls after each other.
Set properties for background images: 'background-size: first_image_size, second-
image-size' etc.
'no repeat' must be added, otherwise the image repeats itself to fill the container.
'background-attachment: fixed, fixed' will keep the background from changing when
scrolling: it remains in view.

With EM (em = ephemeral unit) used for font-size, the font is kept relative to
the default font size. This means 0.5 em is 50% of the size that would apply as
default.

The NOT selector (not) finds all elements that do not match the specified
description (for example, for a paragraph): p:not(....) {   etc.

EVEN and ODD RULES: it is possible to apply a different style to every second
item on a list with the 'child' element: :nth-child(odd) and :nth-child(even)

To use grid layout, always start with: display: grid;

IMAGES: always optimise beforehand (scaling etc.) to have small filesize
-------------------------------------------------------------------------------
FLEXBOX:
Note: when you change row to column, you ALSO need  to change the direction of
 'justify-content' because this now refers to vertical alignment. Use
  'align-items:' for this.

ORDER: Adding an order property to a flex item defines its order in the container 
without affecting surrounding items. Its default value is 0, and increasing or
decreasing it from there moves the item to the right or left, respectively.
This can be used, for example, to swap order of the .first-item and .last-item
elements in a grid. 

STATIC ITEM WIDTHS: mix flexible boxes with fixed-width boxes
Many websites have a fixed-width sidebar (or multiple sidebars) and a flexible 
content block containing the main text of the page. This results in a flexible
layout where the middle(main) box gets resized with the browser window, but not 
the sidebar(s).