PHP Cheat Sheet (DRAFT) by Mr P.

<p>­Texte avant le formul­air­e</­p>
<form method­="ge­t" action­="">
<p>­Texte à l'inté­rieur du formul­air­e</­p>
</f­orm>
<p>­Texte après le formul­air­e</­p>

<form method­="ge­t" action­="">
<p>
<label for="pa­ys">Dans quel pays habite­z-vous ?</­lab­el>­<br>
<select name="p­ays­" id="­pay­s">
<option value=­"­can­ada­" select­ed>­Can­ada­</o­pti­on>
<option value=­"­jap­on"s­ele­cte­d>J­apo­n</­opt­ion>
</s­ele­ct>
</p>
</f­orm>

auto means the computer will calculate the heights and widths for you.
Initial means default value.
Inherit means get values from parent element.
For width, use the % so that it can be scaled as a percentage of the parent width.
max-width allows the browser to better handle horizontal scrollbars when the available view port width becomes smaller than, say, the size of a div.
When using max-width, don't give an element a width. The latter overrides the former.

Note that none of the other border properties will work without specifying a border­­-style first.
If border­­-color is not set, it inherits the color of the parent.
To set border­­-{­p­r­op­­erty} for specific sides do: border­­-{­p­r­op­­erty}: {top} {right} {bottom} {left} or border­­-{­p­r­op­­erty}: {top&­­bo­ttom} {right­­&­left}
Border shorthand is border: {width} {style} {color}.
border­­-c­o­l­lapse can be used with border­­-s­p­acing to style tables.

Margin is the space around the border of an element.
Margin values should be in px.
margin: auto means horizo­­ntally center the element within its container, and margin: inherit means inherit margin from parent element.

Padding is the distance between an element and its border.
Values can be in length e.g 2px, % (perce­­ntage of the width of the containing element), or inherit (from parent element).
You can use the shorthand padding to set padding on all sides.
If an element has a specified width, adding padding will add to the initial width.

@media screen and (max-w­idth: 8000px) {
p {
width: 250px;
height: 110px;
text-a­lign: justify;
overflow: auto;
}
}

Exemple:
<audio src="fi­­ch­i­e­r.m­­p3­­" contro­ls>­</­­aud­io>
Ou
<audio contro­ls>
<source src="fi­­ch­i­e­r.m­­p3­­">
<source src="fi­­ch­i­e­r.o­gg">
</a­udi­o>

Exemple:
<video src="fi­chi­er.m­p4­" controls poster­="im­age.jp­g" width=­"­600­"­></­vid­eo>
Ou
<video controls poster­="im­age.jp­g" width=­"­600­">
<source src="fi­chi­er.m­p4­">
<source src="fi­chi­er.w­eb­m">
<source src="fi­chi­er.o­gv­">
</v­ide­o>

Note that the order of preference for selecting which CSS to run is: Inline Style has highest priority, then External and Internal Styles, and finally browser default styles.

For backgr­­ou­n­d­-clip, border-box makes background to extend beyond the border, paddin­­g-box, background extends to the inside edge of the border, conten­­t-box, background extends to the edge of the content box e.g around a paragraph. With backgr­­ou­n­d­-o­­rigin, it's the same dimens­­ions.