-----------------------------------------------------------------------------------

--------------------------------------
///////////////////////////////////////////////////////////////////////////////////
//////////////////////////////////////
-----------------------------------------------------------------------------------
--------------------------------------
_____ _____ _____
/ ____|/ ____/ ____|
| | | (___| (___
| | \___ \\___ \
| |____ ____) |___) |
\_____|_____/_____/

-----------------------------------------------------------------------------------
--------------------------------------
///////////////////////////////////////////////////////////////////////////////////
//////////////////////////////////////
-----------------------------------------------------------------------------------
--------------------------------------

===================================================================================
======================================

******************
CSS - Introduction
******************

> What is CSS?

- the language used to style a web page
- stands for Cascading Style Sheets
- describes how HTML elements are to be displayed on screen
- external style sheets are stored in .css files; a .css file can be used to
change the look of an entire website

===================================================================================
======================================

**********
CSS Syntax
**********

> a CSS rule consists of a selector and a declaration block

selector {
property: value;
}

- the selector points to the HTML element to be styled

- the declaration block contains one or more declarations separated by semicolons
- each declaration is a pair of CSS property and value, separated by a colon
- declaration blocks are surrounded by curly braces
eg.
---------------------------------
p {
color: red;
text-align: center;
}
---------------------------------
 - p is a selector that targets all <p> elements (paragraphs); all <p> elements
will have red text and center alignment

===================================================================================
======================================

*************
CSS Selectors
*************

> a selector specifies the element to be styled; selectors can be divided into 5
types:
- simple selectors - select elements based on name, id, class
- combinator selectors - select elements based on specific relationship between
them
- pseudo-class selectors - select elements based on a certain state
- pseudo-element selectors - select a part of an element
- attribute selectors - select elements based on an attribute or attribute value

> element selector - selects elements based on element names

eg.
h1 { color: red; }

> id selector - selects elements based on id using # followed by id value

eg.
#para1 { color: red; }

> class selector - selects elements based on class using . followed by class name
eg.
.main { color: red; }

- specify a class belonging to a specific element by adding element name in front

eg.
p.main { color: red; }

> universal selector (*) - selects all elements in the HTML document
eg.
* { color: red; }

> grouping selectors - selectors have the same style definitions can be grouped
using comma
eg.
h1, h2, h3 { color: red; }

> an element can use style definitions from multiple classes: different class names
are included in one class attribute,
separated by a space
eg. paragraph referring to two classes - "main" and "large"
<p class="main large"> </p>

===================================================================================
======================================

**************
How To Add CSS
**************

> 3 ways to add CSS to a document:

- inline - specifies style to one single element
- internal - specifies style to one single HTML page
- external - specifies style for multiple HTML pages

> inline - defined by the style attribute within an element

eg.
---------------------------------
<h1 style="background: black; color:gold;"> My Header </h1>
---------------------------------

> internal - defined by the <style> element within the <head> section
eg.
---------------------------------
<head>
<style>
h1 {
background: black;
color: gold;
}
</style>
</head>
---------------------------------

> external - defined by a <link> element within the <head> section, which links to
an external .css file
eg.
---------------------------------
<head>
<link rel="stylesheet" href="styles.css">
</head>
---------------------------------

> multiple style sheets

- if a property is defined for a selector on several style sheets, the definition
from the last read style sheet will
be used
- inline style has the highest priority, then external/internal, and lastly
browser defaults

===================================================================================
======================================

************
CSS Comments
************

> CSS comments are surrounded by /* and */, wihtin the <style> element

===================================================================================
======================================

**********
CSS Colors
**********

> HTML colors are specified using predefined color names, or by using HEX, RGB,
HSL, RGBA, HSLA values

> HTML supports 140 standard color names

> can be used with the attributes color, background-color, border

eg.
---------------------------------
<h2 style="color:tomato; background-color:lightyellow; border:2px solid indigo">
Sample Text </h2>
---------------------------------

> RGB / RGBA colors

- an RGB color value represents a combination of RED, GREEN, BLUE light sources
eg.
- an RGBA color value is an extension of RGB with an added ALPHA channel
(opacity)

> RGB color values

- an HTML color can be represented by an RGB value using rgb(red, green, blue)
eg.
---------------------------------
<h2 style="color:rgb(65,155,240)"> Sample Text </h2>
---------------------------------
- each value represents the intensity of the corresponding color, with value
between 0-255
- rgb(0,0,0) = black; rgb(255,255,255) = white
- defines shades of gray by using equal value for all three parameters
(rgb(50,50,50), rgb(205,205,205))

> RGBA color values

- same as RGB but with ALPHA channel (opacity), which is a number between 0.0
(fully transparent) and 1.0 (fully solid)
eg.
---------------------------------
<h2 style="color:rgba(65,155,240,0.5)"> Sample Text </h2>
---------------------------------

> HEX colors

- a hexadecimal color is specified with #rrggbb, where rr (red), gg (green) and
bb (blue) hexadecimal integers
specify the components of the color

> HEX color values

- a HTML color can be represented by a HEX value of the form: #rrggbb
where rr, gg, bb are hexadecimal values between 00 and ff (or decimal 0-255)
eg. #ee82cd: red = ee (decimal 238), green = 82 (decimal 130), blue = cd (decimal
205) => same as rgb(238,130,205)

- #000000 = black; #ffffff = white

- defines shades of gray by using equal value for all three component colors
(#adadad, #404040)

- 3-digit HEX values: if the two digits in each color component are the same, one
digit can be used for each component
 instead
eg. ff22aa -> f2a

> HSL / HSLA colors

- an HSL color value represents a combination of HUE, SATURATION, and LIGHTNESS
values
- HSLA is an extension of HSL with an added ALPHA channel (opacity)

> HSL color values

- an HTML color can be represented by a HSL value of the form: hsl(hue,
saturation, lightness)

- hue is a degree on the color wheel, between 0-360

0 = red, 120 = green, 240 = blue

- saturation is a percentage value representing how much of the color is present,

the rest is gray
saturation is described as the intensity of the color
100% = the pure color, no shades of gray; 0% = full gray

- lightness is a percentage value representing how much light is present

100% = white; 0% = black

- shades of gray are defined by setting hue and saturation to 0, and adjusting
lightness between 0 and 100% to
achieve darker or lighter shades

> HSLA color values

- same as HSL but with ALPHA channel (opacity), which is a number between 0.0
(fully transparent) and 1.0 (fully solid)

===================================================================================
======================================

***************
CSS Backgrounds
***************

> background-color: sets background color for an element

> opacity: sets the transparency for the background - 0.0 = fully transparent, 1.0
= fully solid
- note: opacity also applies to the element's child elements, so can make texts
hard to read
- can use RGBA or HSLA colors to avoid applying opacity to child elements

> background-image: specifies an image to be used as the background of an element

eg.
background-image: url("image.jpg");

- by default, the image is tiled / repeated to cover the entire background

> background-repeat: specifies how an image is to be repeated

- repeat-x: image only repeats horizontally
- repeat-y: image only repeats vertically
- no-repeat: image is not repeated
> background-position: specifies the position of the background image
eg.
background-position: 25% 50%;
background-position: 100px 150px;
background-position: center;
etc.

> background-attachment: specifies whether the background image should scroll or be

fixed (ie. not scrolling with the
content)

> shorthand property: specify all background properties within a single

"background" declaration
eg.
background: #ffffff url("img_tree.png") no-repeat right top;

- order of properties: color, image, repeat, attachment, position

===================================================================================
======================================

***********
CSS Borders
***********

> border-style: specifies the type of border to be display

dotted
dashed
solid
double
groove
ridge
inset
outset
none
hidden

- can have up to 4 values for the top border, right border, bottom border, left
border (in that order)

- the border-style property must be set for all other border properties to have
any effect

> border-width: specifies the width of the four borders

- can be set using a unit, or one of three pre-defined values: thin, medium,
thick
- can have up to 4 values for the top border, right border, bottom border, left
border (in that order)
eg.
border-width: 5px;
border-width: 10px 15px;
border-width: 0.3cm;
border-width: 4pt 2pt;
etc.

> border-color: specifies the color of the four borders

- can be set using HEX, RBG, HSL values, or pre-defined color names, or
"transparent"
- can have up to 4 values for the top border, right border, bottom border, left
border (in that order)
eg.
border-color: red;
border-color: transparent transparent transparent #5eb3ee;
border-color: rgb(50,50,250) rgb(220,30,30);

> border sides: can use border-top / border-bottom / border-right / bottom-left to

point to individual sides
eg.
border-bottom-color: red;
border-left-color: solid;
etc.

- if a property can have 4 values, they are applied to the top border, right
border, bottom border, and left border, in
that order
- if a property has one value: the value is applied to all 4 sides
- if the 4th value is missing, it is copied from the 2nd value
- if the 3rd value is missing, it is copied from the 1st value

> shorthand property:

- specify all border properties within a single "border" declaration
eg.
border: 5px solid black;
border-left: 4px dashed blue;

> rounded border:

- use border-radius to make border corners rounded
eg.
border-radius: 5px;

===================================================================================
======================================

***********
CSS Margins
***********

> margin properties are used to create space around elements, outside of any
defined borders

> use margin-top, margin-bottom, margin-right, margin-left to specify borders for

individual sides

> all margin properties can have the following values:

auto - determined by the browser
length
% - margin relative to the width of the containing element
inherit - margin is inherited from the parent element

> shorthand property: use margin property to specify margins for all individual
sides
- margin can have up to 4 values for the top margin, right margin, bottom margin,
left margin, in that order
- if margin has one value, it its applied to all sides
 - if the 4th value is missing, it is copied from the 2nd value
- if the 3rd value is missing, it is copied from the 1st value

> auto
- automatically centers the element within its container
- the element will take up the specified width
eg.
---------------------------------
<head>
<style>
div {
margin: auto;
width: 300px;
border: 2px solid red;
}
</style>
</head>
---------------------------------

> margin collapse: consecutive margins are collapsed into a single margin that is
equal to the larger of the two

===================================================================================
======================================

***********
CSS Padding
***********

> padding properties are used to create space around an element, inside of any
defined borders

> all margin properties can have the following values:

length
% - padding relative to the width of the containing element
inherit - padding is inherited from the parent element

> shorthand property: use padding property to specify padding for all individual
sides
- padding can have up to 4 values for the top padding, right padding, bottom
padding, left padding, in that order
- if padding has one value, it its applied to all sides
- if the 4th value is missing, it is copied from the 2nd value
- if the 3rd value is missing, it is copied from the 1st value

===================================================================================
======================================

****************************
CSS Height, Width, Max-width
****************************

> height and width properties are used to set the height and width of an element
- height and width do not include padding, borders, margins
> height and width properties can have the following values:
auto - determined by the browser
length
% - height/width relative to the width of the containing element
initial - sets height/width to default values
inherit - height/width is inherited from the parent element

> max-width
- default: none
- when max-width is used, if the viewport width is smaller than the max-width,
the width of the element is decreased
to fit within the viewport
- if width and max-width are specified on the same element and width is greater,
max-width will be used as width

===================================================================================
======================================

*************
CSS Box Model
*************

> an HTML element can be considered a box, which consists of the content, padding,
borders, and margins

> width and height properties set the width and height for the content only

===================================================================================
======================================

***********
CSS Outline
***********

> outline is the space around the border that can make the element more prominent

> outline properties:

outline
outline-style
outline-color
outline-width
outline-offset

> outline is drawn outside the border and can overlap with other contents
- outline is not part of the element's dimensions

> outline-style
dotted
dashed
solid
double
groove
ridge
inset
outset
 none
hidden

- none of the other outline properties will have any effect if the style is not
set

> outline-width: specifies the width of the outline

- can be set using a unit, or one of three pre-defined values: thin, medium,
thick

> outline-color: specifies the color of the outline

- can be set using HEX, RBG, HSL values, or pre-defined color names, or
"transparent", or "invert"

> shorthand property: specify all outline properties within a single "outline"
declaration
eg.
outline: 10px ridge lightgray;

> outline-offset: adds space between the outline and the border of an element
- the offset space is transparent

===================================================================================
======================================

*******************
CSS Text Formatting
*******************

> color: specifies the text color

> text-align: specifies the text alignment - left, right, center, justify
- text-align-last: specifies text alignment for the last line
- direction / unicode-bidi: used to change text direction
eg.
---------------------------------
h1 {
direction: rtl;
unicode-bidi: bidi-override;
}
---------------------------------

- vertical-align: specifies the vertical alignment for an element - baseline

(default). text-top, text-bottom,
text-sub, text-super

> text decoration properties: add (and style) a decoration line to text
text-decoration
text-decoration-line
text-decoration-color
text-decoration-style
text-decoration-thickness

- text-decoration-line: adds a decoration line to text - overline, underline,

line-through
- text-decoration-color: adds color to decoration line
- text-decoration-style: specifies style for decoration line - solid, double,
dotted, dashed, wavy
- text-decoration-thickness: specifies the thickness for decoration line - auto
(default)
- shorthand property: specify all text-decoration properties within a single
"text-decoration" declaration
(order: line, color, style, thickness)
- use text-decoration: none to remove underline from links

> text-transform: transforms text to all uppercase or lowercase or capitalized -

uppercase, lowercase, capitalize

> text spacing:

text-indent
letter-spacing
line-height
word-spacing
white-space

- text-indent: specifies the indentation of the first line of a paragraph

- letter-spacing: specifies the spacing between characters (can be negative)
- line-height: specifies the vertical space allocated to a line of text
- word-spacing: specifies the spacing between words (can be negative)
- white-space: can be used to disable word-wrapping - whitespace:nowrap

> text-shadow: adds shadow to text

syntax:
text-shadow: [horizontal shadow] [vertical shadow] [blur] [color];
eg.
text-shadow: 5px 5px 10px #ff0000;

- multiple shadow effects can be specified within a single text-shadow

declaration (separated by commas)
eg.
text-shadow: 1px 1px 2px black, 0 0 25px blue, 0 0 5px darkblue;

===================================================================================
======================================

*********
CSS Fonts
*********
-------------
font families
-------------

> generic font families:

- serif: letters have a small stroke at the edges. Creates a sense of formality
and elegance
- sans-serif: letters have clean lines. Creates a modern and minimalistic look
- monospace: all letters have the same fixed width. Creates a mechanical look
- cursive: imitates human hand writing
- fantasy: decorative/playful fonts

- sans-serif fonts are generally easier to read than serif fonts on computer
screen

- use the property font-family to specify the font; if the font name has more
than one word, it must be enclosed in
quotation marks

- font-family should specify several font names as a "fallback" system, to ensure

maximum compatibility between
browsers / operating systems; the last font should be a generic family so the
browser can pick a similar font within
that family
eg.
---------------------------------
font-family: "Lucida Console", "Courier New", monospace;
---------------------------------

------------------
CSS web safe fonts
------------------

> web safe fonts are fonts that are universally installed across all browsers and
devices

> there is always a chance that a font is not found or not installed properly.
Therefore, it is important to specify
"fallback" fonts - specify a list of similar fonts, and end with the
corresponding generic font family

----------
font style
----------

> font-style: mostly used to specify italic text

normal (default)
italic
oblique

> font-weight: used to specify bold text

normal (default)
bold

> font-variant: used to specify small-caps font - lowercase letters are converted
to uppercase but are slightly smaller
than the regular uppercase letters
normal (default)
small-caps

---------
font size
---------

> font-size: specifies the font size

- absolute size: sets the text to a fixed size; does not allow browsers to resize
text
- relative size: sets the size relative to surrounding elements; allows browsers
to resize text

- default size for normal font is 16px (1em)

- a good setup is to set a default font size in % for <body>, then em for
elements within <body>
 - font size can also be specified in vw (viewport width; 1vw = 1% viewport
width), which allows text to resize
according to browser window

------------
Google fonts
------------

> to use google fonts, add the googe style sheet to the <head> section via a
<link>, then specify the font with
font-family, enclosed in quotation marks
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=font+name">
eg.
---------------------------------
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?
family=Dancing+Script">
<style>
body {
font-family: "Dancing Script", serif;
}
</style>
</head>
---------------------------------

- to add multiple fonts to the document, add the font names to the link, separate
fonts with pipe (|) character
eg.
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Sofia|
Dancing+Script">

> to enable Google font effects, add &effect=effectname to the link, then add a
special class name to the element that is
going to use the effect; the class name starts with font-effect- and ends with
effectname.
eg.
---------------------------------
<link rel="stylesheet" href="https://fonts.googleapis.com/css?
family=Sofia&effect=fire">
<h1 class="font-effect-fire"> My Header </h1>
---------------------------------

- to request multiple effects, add effect names to the link, separate effect
names with pipe (|) character
eg.
---------------------------------
<link rel="stylesheet" href="https://fonts.googleapis.com/css?
family=Sofia&effect=fire|neon">
---------------------------------

-----------------------
font shorthand property
-----------------------

> use the property font to specify all font properties within a single "font"
declaration
font-style
font-variant
font-weight
 font-size/line-height
font-family
eg.
---------------------------------
font: italic small-caps bold 12px/20px Arial, sans-serif;
---------------------------------

- if a value is missing, the default value is used

===================================================================================
======================================

*********
CSS Icons
*********

> add icons the HTML page by using an icon library: Font Awesome, Bootstrap
- add the name of the specified icon class to any inline element (eg. <i>,
<span>)

> Font Awesome: go to fontawesome.com, sign in, get the code to add to the <head>
section
<script src="https://kit.fontawesome.com/yourcode.js"
crossorigin="anonymous"></script>
eg.
---------------------------------
<head>
<script src="https://kit.fontawesome.com/yourcode.js"
crossorigin="anonymous"></script>
</head>
<body>
<i class="fas fa-cloud"></i>
<i class="fas fa-heart"></i>
<i class="fas fa-car"></i>
</body>
---------------------------------

> Bootstrap: add style sheet to <head> via <link>

<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
eg.
---------------------------------
<head>
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<i class="glyphicon glyphicon-cloud"></i>
<i class="glyphicon glyphicon-remove"></i>
<i class="glyphicon glyphicon-user"></i>
</body>
---------------------------------

> Google: add style sheet to <head> via <link>

<link rel="stylesheet" href="https://fonts.googleapis.com/icon?
family=Material+Icons">
eg.
 ---------------------------------
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?
family=Material+Icons">
</head>
<body>
<i class="material-icons">cloud</i>
<i class="material-icons">favorite</i>
<i class="material-icons">attachment</i>
</body>
---------------------------------

===================================================================================
======================================

*********
CSS Links
*********

> links are specified by the <a> tag

> link states:

a:link - default state
a:visitied - link has been visited
a:hover - when the link is hovered over; must come after a:link and a:visited
a:active - when the link is clicked; must come after a:hover

> use text-decoration:none to remove underline from links

> use background colors to style links as buttons

> use style="cursor:" to change cursor appearance

===================================================================================
======================================

*********
CSS Lists
*********

> unordered list: <ul>; ordered list: <ol>

> list-style-type
- specifies the type of marker for list items - circle, square, upper-roman,
lower-alpha, etc
- 'none' to remove item markers

> list-style-image
- specifies an image as the item marker
eg.
---------------------------------
ul {
list-style-image: url('img.gif');
}
---------------------------------
> list-style-position
- specifies the position of the marker:
outside: markers are outside of list items; if a list item spans multiple lines,
the lines are aligned vertically
(default)
inside: markers are inside of list items; first line of list items is pushed to
the right

> shorthand property: specify all list style properties within a single "list-
style" declaration
- order of properties: type, position, image

===================================================================================
======================================

**********
CSS Tables
**********

> border
- specifies table borders

> width / height

- set width to 100% to make table span entire screen

> border-collapse
- set to collapse to remove double borders

> text-align
- sets the horizontal alignment of content in <td> and <th>; by default <th> is
center-aligned and <td> is
left-aligned

> vertical-align
- sets the vertical alignment of content in <td> and <th>; by default is middle-
aligned

> padding
- used with <th> and <td>; specifies the space between the content in each cell
and the borders

> tr:hover
- can be used to highlight table rows on mouse hover
eg.
---------------------------------
tr:hover {
background-color: lightyellow;
}
---------------------------------

- to not highlight the first (header) row, can use 'tbody tr:hover' (need
<thead>/<tbody> tags in table)

> tr:nth-child(even) / tr:nth-child(odd)

- can be used to highlight even/odd rows, creating striped table
eg.
 ---------------------------------
tr:nth-child(even) {
background-color:
}
---------------------------------

> overflow-x:auto
- wrap the table in a container (ie. <div>) then add style="overflow-x:auto;" to
the container to enable horizontal
scroll bar for table if table width is greater than viewport width

===================================================================================
======================================

***********
CSS Display
***********
- most important CSS property for layout control

> display:none
- commonly used with JavaScript to hide/show elements without deleting and
recreating them

> display:inline
- can be used to create horizontal list

> display:block
- makes an inline element enter a new line

> visibility:hidden
- also used to hide an element, but the element still takes up normal space

===================================================================================
======================================

************
CSS Position
************

> the position property is used to specify the positioning method for an element
static
relative
fixed
absolute
sticky

- after setting the positioning method, the element can be position by top,
bottom, left, right properties

> position:static
- default; element is not affected by top, bottom, left, right
- the element is not positioned in any special way; it is positioned according to
the normal flow of the page

> positive:relative
 - the element is positioned relative to its normal position
- setting the top, bottom, left, right properties will cause the element to be
adjusted away from its normal position,
other elements will not be adjusted to fit into any gap left by the element

> position:fixed
- the element is positioned relative to the viewport, so it stays in the same
place when the page is scrolled
- a fixed element does not leave a gap where it normally would have been located

> position:absolute
- the element is positioned relative to the nearest positioned ancestor (instead
of relative to the viewport)
- if the element has no positioned ancestor, it uses the document body, and moves
with page scrolling
- the element is removed from normal page flow and can overlap with other
elements
eg. the child <div> element is positioned relative to the parent <div> element
---------------------------------
div.parent {
position: relative;
}
div.child {
position: absolute;
top: 8px;
left: 16px;
}
---------------------------------

> position:sticky
- the element is positioned based on the scroll position - it toggles between
relative and fixed;
- the element is relative-positioned until a given offset position is met in the
viewport, then its position becomes
fixed
- IE does not support sticky positioning; Safari requires -webkit- prefix before
'sticky'; also, at least one of
top, bottom, left, right must be specified
eg.
---------------------------------
div.sticky {
position: sticky;
top: 0;
background-color: #cae8ca;
border: 2px solid darkred;
}
---------------------------------

===================================================================================
======================================

***********
CSS z-index
***********

> the z-index property is used to specify the stack level of HTML elements when
they overlap
 - specify negative value for lower stack level
- only works on positioned elements (except static) and flex items

> without z-index, when elements overlap, elements that appear later in the
document will be placed on top

===================================================================================
======================================

************
CSS Overflow
************

> the overflow property is used to control what happens to content that cannot fit
into the display area
visible - default; overflow is not clipped; content is rendered outside the
element's box
hidden - overflow is clipped, and the cut off content is not visible
scroll - overflow is clipped, and a scroll bar is added to see the cut off
content
auto - similar to scroll, but the scroll bar only shows when overflow actually
happens

- only works on block elements with a specified height

> overflow-x / overflow-y

- change the overflow of content just horizontally or vertically

===================================================================================
======================================

*****************
CSS Float & Clear
*****************

> float
- places an element on the left or right side of its container, allowing text and
inline elements to wrap around it
left - floats left
right - floats right
none - default, no floating
inherit - inherits float value from parent element

- can be used to make block elements appear next to each other in a row instead
of vertically

> clear
- used to make an element appear properly below a floated element that comes
before it
none - default; the element is not pushed under the floated element; can cause
overlapping
left - the element is pushed under left-floated elements
right - the element is pushed under right-floated elements
both - the element is pushed under both left- and right-floated elements
inherit - inherits clear value from parent element
 - should match clear:left to float:left, and clear:right to float:right

> if a floated element is taller than its containing element, it will overflow
outside of the containing element;
this can be fixed by adding style="overflow:auto;" to the containing element
- this works well when margins and padding are controlled well (may see scroll
bars otherwise)
- new, mordern hack for clear:
---------------------------------
.clearfix::after {
content: "";
clear: both;
display: table;
}
---------------------------------

===================================================================================
======================================

****************
CSS Inline Block
****************

> display:inline-block
- allows the element to be placed next to other elements, allows specifying
height and width for the element, and top
and bottom margins and padding are respected
- one common use is for displaying list items horizontally instead of vertically

===================================================================================
======================================

*************
CSS Alignment
*************

> margin:auto
- horizontally centers a block element (width needs to be set to less than 100%)

> text-align:center
- horizontally centers text

> center an image

- set display:block and margin:auto

> vertical alignment

- using line-height: specify line-height equal to height
eg.
---------------------------------
.center {
height: 200px;
line-height: 200px;
text-align: center;
}
 ---------------------------------

- using position and transform: place the corner of the element at the center of
the display area, then transform
by 50%
eg.
---------------------------------
.center {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
---------------------------------

===================================================================================
======================================

***************
CSS Combinators
***************
descendant selector: space
child selector: >
adjacent sibling selector: +
general sibling selector: ~

> the descendant selector (space) selects all elements that are descendants (both
direct and indirect children) of a
specified element
eg. select all <p> elements inside a <div> element
div p { }

> the child selector (>) selects all elements that are direct children of a
specified element
eg. select all <p> elements that are direct children of a <div> element
div > p { }

> the adjacent sibling selector (+) selects an element that immediately follows a
specified element (must have the same
direct parent element)
eg. select the <p> element that immediately follows after a <div> element
div + p { }

> the general sibling selector (~) selects all elements that follow (have the same
direct parent as) a specified element
eg. select all <p> elements that follow after a <div> element
div ~ p { }

===================================================================================
======================================

****************
CSS Pseudo-class
****************
> pseudo-class defines a specific state of an element, eg. visited vs unvisited
link
syntax:
selector:pseudo-class
eg.
a:visited { }
a:hover { }
input:focus { }

- pseudo-class names are not case-sensitive

> pseudo-classes can be combined with classes:

eg.
a.main:hover { }

> pseudo-classes can be combined with selectors:

eg. mouse over <div> to show <p> (like a tooltip)
---------------------------------
p {
display: none;
}
div:hover p {
display: block;
}
---------------------------------

> :first-child
- selects a specified element that is the 1st child of another specified element
eg. select the first <p> element that is direct child of any other element
p:first-child { }

eg. select the first <p> element that is direct child of a <section> element
section p:first-child { }

> :lang
- defines special rules for different languages
eg. define quotation marks for <q> elements when lang="no"
---------------------------------
q:lang(no) {
quotes: "~" "~"
}
---------------------------------

===================================================================================
======================================

******************
CSS Pseudo-element
******************

> used to specify parts of an element

syntax:
selector::pseudo-element { }
eg. select the first line of any <p> element
p::first-line { }

> ::first-line
 - selects the first line of an element
- can only be applied to block-level elements

> ::first-letter
- selects the first letter of the text
- can only be applied to block-level elements

> pseudo-elements can be combined with classes:

eg. select the first letter of any paragraph of class "intro"
p.intro::first-letter { }

> ::before
- used to insert some content (usually cosmetic) just before the content of an
element, using the content property
eg. insert content just before any hyperlink
a::before { }

> ::after
- used to insert some content (usually cosmetci) just after the content of an
element, using the content property
eg. insert content just after any hyperlink
a::after { }

> ::marker
- selects the markers of list items

> ::selection
- selects the section selected (highlighted) by the user

===================================================================================
======================================

************************
CSS Opacity/Transparency
************************

> the opacity property specifies the opacity (transparency) of an element

- value 0.0-1.0; 0.0 = fully transparent, 1.0 = fully solid

> can be used with :hover to change the opacity of an element on mouse-over
eg.
---------------------------------
img { opacity: 0.6; }
img:hover { opacity: 1.0; }
---------------------------------

===================================================================================
======================================

******************
CSS Nagivation Bar
******************

> nagivation bar = list of links: a navigation bar needs standard HTML as a base
- create an unordered list
 - remove bullets, margins, padding, underline
- use display:block for the list items (<a>) to allow specifying width, height,
margin, padding, etc.
- add an "active" class to indicate which page/section is being selected
eg. vertical side menu
---------------------------------
ul {
list-style-type: none; /* remove list item markers */
margin: 0; /* remove margin */
padding: 0; /* remove padding */
width: 25%; /* set width to 25% viewport width */
background: #f1f1f1; /* set background color */
position: fixed; /* fixed position, not affected by scrolling */
height: 100%; /* make side menu vertically span entire page */
overflow: auto; /* enabled scroll bar if the side menu takes more
vertical space than the viewport allows */
}
li a {
display: block; /* allows specifying width, height, margin, padding,
etc. */
color: #000;
padding: 8px 16px;
text-decoration: none; /* remove underline */
}
li a.active {
background: #04aa6d; /* set background color for currently selected menu
item */
color: white;
}
li a:hover:not(.active) {
background: #555; /* set background color for non-active menu item on
mouse-over */
color: white;
}
---------------------------------

- note: fixed position might not work properly on mobile devices

- for horizontal nav bar, use float:left / float:right on <li>

eg.
---------------------------------
ul {
list-style-type: none; /* remove list item markers */
margin: 0; /* remove margin */
padding: 0; /* remove padding */
overflow: hidden; /* clip overflow */
background: #333;
width: 100%; /* set width to 100% viewport width */
position: fixed; /* fixed position */
top: 0;
left: 0;
}
ul li:not(:last-child) {
border-right: 1px solid #888; /* separator between list item, except after
last item */
}
li {
float: left;
}
 li a:hover:not(.active) {
background: #111; /* set background color for non-active menu
items upon mouse over */
}
.active {
background: #04aa6d; /* set background color for currently selected
menu item */
}
---------------------------------

===================================================================================
======================================

*************
CSS Dropdowns
*************

> the dropdown content is set to display:none by default, changed to display:block

upon mouse over on the dropdown field
eg.
---------------------------------
<style>
/* styling the dropdown button */
.dropdown-btn {
background: #4caf50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
.dropdown {
position: relative;
display: inline-block;
}
/* styling the dropdown menu */
.dropdown-content {
display: none; /* dropdown menu is hidden by
default */
position: absolute;
background: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2)
z-index: 1; /* dropdown menu will cover
content outside */
}
</style>
<body>
<div class="dropdown">
<button class="dropdown-btn"> Dropdown </button>
<div class="dropdown-content">
<a href="#"> Link #1 </a>
<a href="#"> Link #2 </a>
<a href="#"> Link #3 </a>
</div>
</div>
</body>
 ---------------------------------

> use right: 0 on dropdown content to make dropdown menu expand from right to left

===================================================================================
======================================

***********************
CSS Attribute Selectors
***********************

> [attribute] -> select elements that have the specified attribute
eg. selects all <a> elements that have a target attribute
---------------------------------
a[target] {
background-color: yellow;
}
---------------------------------

> [attribute="value"] -> select elements that have the specified attribute and
value
eg. selects all <a> elements that have target="_blank"
---------------------------------
a[target="_blank"] {
background-color: yellow;
}
---------------------------------

> [attribute~="value"] -> select elements that have the specified attribute whose
value contains a specified word
(whole word)
eg. selects all elements with a title value being a space-separated list of
words, one of which is "flower"
("flower", "flower image", etc.)
---------------------------------
[title~="flower"] {
border: 5px solid yellow;
}
---------------------------------

> [attribute|="value"] -> select elements that have the specified attribute whose
value is either exactly the specified
value, or the specified value followed by a hyphen(-)
eg. selects all elements that has class attribute whose value is either "top" or
contains "top-"
("top", "top-title", etc.)
---------------------------------
[class|="top"] {
background-color: yellow;
}
---------------------------------

> [attribute^="value"] -> select elements that have the specified attribute whose
value starts with the specified value
eg. selects all elements that has class attribute whose value starts with "top"
("top-header", "topcontent", etc.)
---------------------------------
 [class^="top"] {
background-color: yellow;
}
---------------------------------

> [attribute$="value"] -> select elements that have the specified attribute whose
value ends with the specified value
eg. selects all elements that has class attribute whose value ends with "test"
("header-test", "scripttest", etc.)
---------------------------------
[class$="test"] {
background-color: yellow;
}
---------------------------------

> [attribute*="value"] -> select elements that have the specified attribute whose
value contains the specified value
eg. selects all <a> elements that has href attribute whose value contains the
string "emp"
("temp", "empty", etc.)
---------------------------------
a[href*="emp"] {
background-color: yellow;
}
---------------------------------

===================================================================================
======================================

********
CSS Grid
********

> the CSS Grid Layout Module offers a grid-based layout system, with rows and
columns, making it easier to design web
pages without having to use floats and positioning

> a grid layout consist of a parent element with one or more child elements

> an HTML element becomes a grid when its display property is set to grid or
inline-grid
eg. display: grid; / display: inline-grid;

> all direct children of the grid container automatically becomes grid items

> column-gap
- sets the gap between columns

> row-gap
- sets the gap between rows

> gap
- shorthand property to set gap for both row and column - 1st value for row, 2nd
value for column
eg. gap: 50px 80px;
- if there is only one value, it is applied to both row and column
===================================================================================
======================================

******************
CSS Grid Container
******************

> grid-template-columns
- defines the number of columns in the grid layout, and the width of each column
- the value