<!DOCTYPE html> - html5 <!DOCTYPE> declaration
Old html declarations : HTML 4.01 Strict/Transitional/Frameset, XHTML 1.0 Strict/Transitional/Frameset, XHTML 1.1
<html></html> - tells the browser that this is an HTML document
<head></head> - metadata elements
<body></body> - page content
<!-- --> - comment
<p></p> - paragraph ; used as a container
<div></div> - defines a division/section in the html document ; used as a container
<h1></h1> -> <h6></h6> - 6 levels of title size
<img src="" alt=""> - alt=alternate text for an image
<ul><li>...</li></ul> - unordered list
<ol><li>...</li></ol> - ordered list
<a href="" title="" target=""></a> - title=mouse over tool tip
target=_blank - opens in a new window/tab
target=_self - (default) opens in same page
target=_parent - opens in parent frame
target=_top - opens in full body of the window
<form action=""></form> - action=/url-where-to-submit-form-data
<input type="text" placeholder="" required> - type=text field ; placeholder=hint expected value ; add required if needed
<button type=""></button> - type=button/reset/submit
<label for=""><input type="" id="" name="" checked></label> - type can be radio/checkbox ; label for = input id ; grouped radio/checkbox button need the same name ; start checked if needed
<DOCTYPE! html>
<html>
<head>
<!-- metadata elements -->
</head>
<body>
<!-- page content -->
<div>
<h1></h1>
<p>
<a href=“” title=“” target=“”><img src=“” alt=“”></a>
</p>
<p>
<ul>
<li>…</li>
<li>…</li>
</ul>
</p>
</div>
<form action=“”>
< label for=“”>
<input type=“radio” id=“” name=“” checked>
<input type=“radio” id=“” name=“”>
</label>
<input type=“text” placeholder=“” required>
< button type=“”></button>
</form>
</body>
</html>
Ref. https://www.w3schools.com/cssref/css_selectors.asp
:root -> highest parent level, style in here are available in the entire document
style=...; - specify the style for the element (color, size, border...)
.class - apply a style to multiple elements
#id - style a single element
element - style a type of element
[attr=value] - style a target element with a specific value (ex. [type='radio'] { })
!important - takes precedence over everything, useful if importing css libraries
Order of priority : .class -> #id -> inline style -> !important
font - color, font-family, size...
<link href="" rel="stylesheet" type="text/css"> - import a font
font-family: family_name, generic_name - generic_name=fallback font (monospace, serif, sans-serif)
border - border-width, border-style, border-color, border-radius... - Shorthand -> border: width style color;
padding - content -> space -> container
margin - container -> space -> parent container
padding/margin - top, right, bottom, left - Shorthand -> padding: px px px px)
hexadecimal - #000000 or #000 ; 000000 black -> FF0000 red -> 00FF00 green -> 0000FF blue -> FFFFFF white
RGB values - rgb(000,000,000) -> rgb(256,256,256)
--custom_name: value;
var(--custom_name, fallback_value);
:root { --main-bg-color: coral; }
#div1 { background-color: var(--main-bg-color); }
#div2 { background-color: var(--main-bg-color, blue); }
Fallback for older browser
:root { --main-bg-color: coral; }
#div1 { background: coral; background-color: var(--main-bg-color); }
Ref. https://www.w3schools.com/cssref/css3_pr_mediaquery.asp
@media {} - apply different styles for different media types/devices
Can check :
@media screen and (max-width: 600px) { div.example { display: none; } }
<b> - Bold text
<strong> - Important text, same as <b> but different meaning
<i> - Italic text
<em> - Emphasized text, same as <i> but different meaning
<mark> - Marked text
<small> - Small text
<del> - Deleted text
<ins> - Inserted text, strike-through
<sub> - Subscript text
<sup> - Superscript text
text-align: - justify, center, right, left
text-transform: - either none or lowercase, uppercase, capitalize, initial (default value), inherit (value from the parent element)
width / Height
line-height
<hr> - horizontal line
rgb(r,g,b,a) - color and opacity with a=alpha level of opacity
box-shadow - either none or x-offset y-offset blur spread color
link states -> a:link, a:visited, a:hover, a:active
static - default, positioned according the the normal flow of the page, not affected by the top, bottom, left, and right properties
relative - relative to it's normal position, affected by the top, bottom, left, and right properties
fixed - relative to the viewport (stay in place even when page is scrolled), affected by the top, bottom, left, and right properties
absolute - relative to the nearest positioned ancestor, if no positioned ancestor (position:relative;) it uses the document body, affected by the top, bottom, left, and right properties
sticky - positioned based on the user's scroll position[1]
float: none|left|right|initial|inherit; - removed from the normal flow of the page, pushed to either the left or right of their containing parent element[2]
z-index - specifies the stack order of an element (which element should be placed in front of, or behind, the others), positive or negative
margin:auto; - center the element horizontally
hsl(hue, saturation, lightness)
Hue is a degree on the color wheel from 0 to 360. 0 is red, 120 is green, 240 is blue
Saturation is a percentage value; 0% means a shade of gray and 100% is the full color
Lightness is also a percentage; 0% is black, 100% is white
<style>
div { background-color: hsl(180, 50%, 50%); color: hsl(0, 0%, 100%); }
</style>
background: linear-gradient(gradient_direction, color1, color2, color3...); - gradients
background: url(); - add a pattern
transform:scale(*); - change the size of an element
transform:skewX(*deg); - skews the selected element along its X (horizontal) axis
transform:skewY(*deg); - skews the selected element along its Y (vertical) axis
::before - inserts something before the content of each selected element(s)
::after - inserts something after the content of each selected element(s)
The > character selects elements that are direct children of the parent element. The first selector is the parent, and the second selector refers to the children.
The > character selects only immediate children — grand-children or grand-grand-children etc are not selected.
<ul class="first-list">
<li>First</li>
<li>Second</li>
<li>Third</li>
</ul>
/* all "li" elements inside "ul.first-list" */
ul.first-list > li {
padding: 10px 0;
}
<div class="parent-container">
<div class="post">
<div class="post">Post</div>
</div>
</div>
/* selects only the outer "div.post"
inner "div.post" is not selected as it is not the immediate child of ".parent-container" */
.parent-container > .post {
border: 1px solid blue;
}
The (single space) combinator selects elements that are descendants of the parent element. They can be direct children, and also can be grand-children, grand-grand-children etc.
The space character is added between 2 CSS selectors. The first is the parent, and the second is its descendant.
<div class="outer">
<span>One</li>
<span>Two</li>
<span>Three</li>
</div>
/* all "span" elements inside the "div" */
div.outer span {
padding: 10px 0;
}
<div class="parent-container">
<div class="post">
<div class="post">Post</div>
</div>
</div>
/* both "div.post" will be selected */
.parent-container .post {
border: 1px solid blue;
}
The + character used in CSS is a combinator — it combines 2 CSS selectors. It selects the second element, only if it is just after the first element, and both elements are children of the same parent.
<div class="main">
<div id="child-1">Child 1</div>
<div id="child-2">Child 2</div>
</div>
/* "#child-2" is selected */
#child-1 + #child-2 {
padding: 10px 0;
}
<div class="parent">
<span class="one">One</span>
<span class="two">Two</span>
<span class="three">Three</span>
</div>
/* nothing is selected, as ".one" is not immediately followed by ".three" */
.one + .three {
border: 1px solid black;
}
The ~ character combinator combines 2 CSS selectors. It selects the second element, if it is a sibling of the first element. Both should be children of the same parent.
Unlike the + combinator, the second element just needs to be any sibling, and not compulsorily followed after the first element.
<div class="main">
<label class="label">First</label>
<span></span>
<img class="img" src="img2.jpg" />
</div>
/* ".img" is selected */
.label ~ .img {
width: 300px;
}
<div class="parent">
<span class="one">One</span>
<span class="two">Two</span>
<span class="three">Three</span>
</div>
/* ".three" is selected */
.one ~ .three {
border: 1px solid black;
}
@keyframes animationname {keyframes-selector {css-styles;}} - style change from -> to[3]
@keyframes mymove {
0% {top: 0px; background: red; width: 100px;}
100% {top: 200px; background: yellow; width: 300px;}
}
animation-fill-mode: none|forwards|backwards|both|initial|inherit; - specifies a style for the element when the animation is not playing (before it starts, after it ends, or both)
animation-iteration-count: number|infinite|initial|inherit; - number of times an animation should be playedanimation-timing-function: linear|ease|ease-in|ease-out|ease-in-out|cubic-bezier(n,n,n,n); - speed curve of an animation to make changes smooth = the TIME an animation uses to change from one set of CSS styles to another.<img src="iogo.jpeg" alt="Company logo"> - alt text décris l'image. Inutile de préciser un alt pour la décoration (fond...)
figure - self-contained content, like illustrations, diagrams, photos, code listings, etc.[5]
figcaption - caption for a <figure> element.
<figure>
<img src="pic_trulli.jpg" alt="Trulli" style="width:100%">
<figcaption>Fig.1 - Trulli, Puglia, Italy.</figcaption>
</figure>
1 seul main par document, les éléments dans le main sont uniques (donc pas de nav, logos, sidebars...). The <main> element must NOT be a descendant of an <article>, <aside>, <footer>, <header>, or <nav> element.
<main>
<h1>Web Browsers</h1>
<p>Firefox and Internet Explorer are the most used browsers today.</p>
<article>
<h1>Internet Explorer</h1>
<p>Internet Explorer is a free web browser from Microsoft, released in 1995.</p>
</article>
<article>
<h1>Mozilla Firefox</h1>
<p>Firefox is a free, open-source web browser from Mozilla, released in 2004.</p>
</article>
</main>
en-tête de contenu, plusieurs headers possibles dans un document. A <header> tag cannot be placed within a <footer>, <address> or another <header> element.
<article>
<header>
<h1>Most important heading here</h1>
<h3>Less important heading here</h3>
<p>Some additional information here</p>
</header>
<p>Lorem Ipsum dolor set amet....</p>
</article>
pied-de-page de contenu (infos de contact, sitemap, retour haut de page...), plusieurs footers possibles dans un document. A <footer> element should contain information about its containing element.
<footer>
<p>Posted by: Hege Refsnes</p>
<p>Contact information: <a href="mailto:someone@example.com">
someone@example.com</a>.</p>
</footer>
liens de navigation. The <nav> element is intended only for major block of navigation links.[6]
<nav>
<a href="/html/">HTML</a> |
<a href="/css/">CSS</a> |
<a href="/js/">JavaScript</a> |
<a href="/jquery/">jQuery</a>
</nav>
défini un contenu indépendant, auto-contenu. Doit faire sens à lui tout seul, doit pouvoir être servi indépendamment du reste du site sans perdre de son sens (post de forum, blog post, news story...).
<article>
<h1>Google Chrome</h1>
<p>Google Chrome is a free, open-source web browser developed by Google, released in 2008.</p>
</article>
The <section> tag defines sections in a document, such as chapters, headers, footers, or any other sections of the document.
<section>
<h1>WWF</h1>
<p>The World Wide Fund for Nature (WWF) is....</p>
</section>
controls - ajoute les contrôles basic de lecture, pause... et permet les commandes claviers sur l'audio.
<audio id="meowClip" controls>
<source src="audio/meow.mp3" type="audio/mpeg" />
<source src="audio/meow.ogg" type="audio/ogg" />
</audio>
<label> - défini un label pour un <button>, <input>, <meter>, <output>, <progress>, <select> ou <textarea>.
N'affiche rien sur la page mais signale lélément aux liseuses, <label for=""> égal à l'id de l'élément auquel il est relié (<input id="">).
<form action="/action_page.php">
<label for="male">Male</label>
<input type="radio" name="gender" id="male" value="male"><br>
<label for="female">Female</label>
<input type="radio" name="gender" id="female" value="female"><br>
<label for="other">Other</label>
<input type="radio" name="gender" id="other" value="other"><br><br>
<input type="submit" value="Submit">
</form>
<fieldset> - groupe des éléments apparentés, dessine une box autour des élements apparentés.
<legend> - description du groupe d'éléments apparentés.
<form>
<fieldset>
<legend>Personalia:</legend>
Name: <input type="text"><br>
Email: <input type="text"><br>
Date of birth: <input type="text">
</fieldset>
</form>
<input type="date" - Defines a date control (year, month, day (no time))
<input type="password" - crée un champ qui masque le contenu par des *****
<input type="email" - crée un champ pour email avec vérification du formatage correct de l'entrée
<input type="hidden" - champ masqué
<time> - human-readable date/time.
<datetime> - machine-readable date/time of the <time> element
<p>We open at <time>10:00</time> every morning.</p>
<p>I have a date on <time datetime="2008-02-14 20:00">Valentines day</time>.</p>
Make content hidden for all but for screen readers (display: none; or visibility: hidden; hides content for everyone, including screen reader users)
.sr-only {
position: absolute;
left: -10000px;
width: 1px;
height: 1px;
top: auto;
overflow: hidden;
}
Give links meaning => use descriptive link text for screen readers[7] (Click here for <a href="">A pony running in a field</a>).
<element accesskey="character"> - Make links navigable with HTML access keys (<button accesskey="b">Important Button</button>).
<element tabindex="number"> - Add keyboard focus to an element[8].
tabindex="1" will bring keyboard focus to that element first. Then it cycles through the sequence of specified tabindex values (2, 3, etc.), before moving to default and tabindex="0" items.:focus to change the state of the element focused (p:focus{background-color:yellow;}).Improve Readability with high contrast text: the Web Content Accessibility Guidelines (WCAG) recommend at least a 4.5 to 1 contrast ratio for normal text[9].
Avoid Colorblindness Issues by using sufficient contrast((adjust the lightness of the colors using the CSS hsl() property (hue, saturation, lightness) )) and choosing colors that convey information[10].
The @media rule is used in media queries to apply different styles for different media types/devices.
Media queries can be used to check many things, such as
@media only screen and (max-width: 600px) {
body {
background-color: lightblue;
}
}
ref. https://www.w3schools.com/css/css_rwd_mediaqueries.asp - Media Queries
ref. https://www.w3schools.com/cssref/css3_pr_mediaquery.asp - CSS Media Rules
Instead of applying an absolute width to an element (img { width: 720px; }), you can use
img {
max-width: 100%;
display: block;
height: auto;
}
Define the width and height values as half of what the original file are.
Use viewport units[11] for responsive typography: viewport units, like percentages, are relative to the viewport dimensions (width or height) of a device.
The four different viewport units are:
À compléter.
Sens d'écriture d'un texte, voir explications chez Mozilla developer && w3schools
Start by attaching display: flex; to the container.
The justify-content property aligns items horizontally and accepts the following values:
flex-start Items align to the left side of the container.flex-end Items align to the right side of the container.center Items align at the center of the container.space-between Items display with equal spacing between them.space-around Items display with equal spacing around them.For example, justify-content: flex-end; will move the object to the right.
The flex-direction property defines the direction items are placed in the container and accepts the following values:
row Items are placed the same as the text direction.row-reverse Items are placed opposite to the text direction.column Items are placed top to bottom.column-reverse Items are placed bottom to top.Note: when the flex-direction is a column, justify-content changes to the vertical and align-items to the horizontal.
The flex-wrap property spreads the elements and accepts the following values:
nowrap Every item is fit to a single line.wrap Items wrap around to additional lines.wrap-reverse Items wrap around to additional lines in reverse.The shorthand property flex-flow combines the two properties flex-direction and flex-wrap and accepts the value of one of the two properties separated by a space (ex. flex-flow: row wrap;).
Sometimes reversing the row or column order of a container is not enough. In these cases, we can apply the order property to individual items (or type). By default, items have a value of 0, but we can use this property to also set it to a positive or negative integer value (-2, -1, 0, 1, 2).
|-|-|-|-|-|
| ITEM | ITEM | ITEM | OBJECT | ITEM |
| Move the item OBJECT { order: -3; } |||||
| OBJECT | ITEM | ITEM | ITEM | ITEM |
The flex-basis property sets the initial main size of a flex item and accepts the following values:
content indicates automatic sizing, based on the flex item’s content.
a <width>, an absolute <length>, a <percentage> of the parent flex container's main size property, or the keyword auto. Negative values are invalid. Defaults to 0.
The flex-grow property sets how much of the remaining space in the flex container should be assigned to that item (the flex grow factor).
The remaining space is the size of the flex container minus the size of all flex items together. Only accepts a <number>, negative values are invalid.
The flex-shrink property sets the flex shrink factor of a flex item.
If the size of all flex items is larger than the flex container, items shrink to fit according to flex-shrink. Only accepts a <number>, negative values are invalid.
The shorthand property flex combines the three properties flex-grow, flex-shrink and flex-basis, and accepts the value of one of the three properties separated by a space (ex. flex: flex-grow flex-shrink flex-basis;).[12]
The align-items property aligns items vertically and accepts the following values:
flex-start Items align to the top of the container.flex-end Items align to the bottom of the container.center Items align at the vertical center of the container.baseline Items display at the baseline of the container.stretch Items are stretched to fit the container.The align-self property accepts the same values as align-items but is made for individual items and accepts the following values:
flex-start Items align to the top of the container.flex-end Items align to the bottom of the container.center Items align at the vertical center of the container.baseline Items display at the baseline of the container.stretch Items are stretched to fit the container.The align-content property sets how multiple lines are spaced apart from each other and takes the following values:
flex-start Lines are packed at the top of the container.flex-end Lines are packed at the bottom of the container.center Lines are packed at the vertical center of the container.space-between Lines display with equal spacing between them.space-around Lines display with equal spacing around them.stretch Lines are stretched to fit the container.Note: This can be confusing, but align-content determines the spacing between lines, while align-items determines how the items as a whole are aligned within the container. When there is only one line, align-content has no effect.
https://codepip.com/games/flexbox-froggy/
Start by placing display: grid; to the container.
The property value span specifies the number of columns the item will span. Span only works with positive values.
Example: grid-column-start: span 3;
grid-column: grid-column-start / grid-column-end;
The grid-column property is a shorthand for both grid-column-start and grid-column-end, and can accept both values at once separated by a slash.
For example, grid-column: 2 / 4; will set the grid item to start on the 2nd vertical grid line and end on the 4th grid line.
Note: The span keyword also works with this shorthand
Make “item1” start on column 1 and span 2 columns: grid-column: 1 / span 2;
grid-column-start: auto|span n|column-line;
The grid-column-start property defines on which column-line the item will start.
For example, grid-column-start: 3; will start at the 3rd vertical grid line, which is another way of saying the 3rd vertical border from the left in the grid.
grid-column-end: auto|span n|column-line;
The grid-column-end property defines how many columns an item will span, or on which column-line the item will end.
grid-row: grid-row-start / grid-row-end;
The grid-row specifies a grid item's size and location in a grid layout and is a shorthand for grid-row-start and grid-row-end.[13]
For example: grid-row: 1 / span 2;
grid-row-start: auto|row-line;
The grid-row-start property defines on which row-line the item will start.
grid-row-end: auto|row-line;
The grid-row-end property defines how many rows an item will span, or on which row-line the item will end.
grid-area: grid-row-start / grid-column-start / grid-row-end / grid-column-end | itemname;
The grid-area property specifies a grid item's size and location in a grid layout, is a shorthand for both grid-column and grid-row, and accepts four values separated by slashes:
Example: grid-area: 1 / 1 / 3 / 6;
Name all items, and make a ready-to-use webpage template:
.item1 { grid-area: header; }
.item2 { grid-area: menu; }
.item3 { grid-area: main; }
.item4 { grid-area: right; }
.item5 { grid-area: footer; }
.grid-container {
grid-template-areas:
'header header header header header header'
'menu main main main right right'
'menu footer footer footer footer footer';
}
grid-template: none|grid-template-rows / grid-template-columns|grid-template-areas|initial|inherit;
grid-template is a shorthand property for
For example, grid-template: 50% 50% / 200px; will create a grid with two rows that are 50% each, and one column that is 200 pixels wide.
grid-template-columns: none|auto|max-content|min-content|length|initial|inherit;
The grid-template-columns property defines the number of columns and their width in the grid.
This property doesn't just accept values in percentages, but also length units like pixels and ems. You can even mix different units together.
The grid-template-rows property specifies the number (and the heights) of the rows in a grid layout and works the same as grid-template-columns.
grid-gap: grid-row-gap grid-column-gap;
The grid-gap property is a shorthand for the grid-row-gap and the grid-column-gap properties in a grid layout and it accepts the following values :
grid-row-gap: length;
The grid-row-gap property defines the size of the gap between the rows in a grid layout.
grid-column-gap: length;
The grid-column-gap property defines the size of the gap between the columns in a grid layout.
The order property place items according to the order given. (Accessibility concerns[14])
By default, all grid items have an order of 0, but this can be set to any positive or negative value, similar to z-index.
See https://developer.mozilla.org/en-US/docs/Web/CSS/order
The repeat function help defining multiple columns or rows with identical width or height.
Example: grid-template-columns: 20% 20% 20%; ⇒ grid-template-columns: repeat(3, 20%);
repeat(auto-fill, minmax(60px, 1fr)); ⇒ when the container changes size, this setup keeps inserting 60px columns and stretching them until it can insert another one.The fractional fr unit is a new unit introduced with CSS Grid. Each fr unit allocates one share of the available space.
For example, if two elements are set to 1fr and 3fr respectively, the space is divided into 4 equal shares; the first element occupies 1/4 and the second element 3/4 of any leftover space.
#garden {
display: grid;
grid-template-columns: 1fr 5fr;
grid-template-rows: 20% 20% 20% 20% 20%;
}
The minmax function is used to limit the size of items when the grid container changes size. To do this we need to specify the acceptable size range for our item.
Example: grid-template-columns: 100px minmax(50px, 200px);
In the code above, grid-template-columns is set to create two columns:
Bootstrap 4 & 5 - The official Bootstrap 4 & 5 website.
bootstrap-rubygem - Bootstrap 4 Ruby Gem for Rails / Sprockets and Compass.
Interactive Bootstrap (4) cheat sheet ⇒ https://hackerthemes.com/bootstrap-cheatsheet/
Bootstrap Kit - Bootstrap 4 you want, but there is no Bootstrap 4 (and).
Bootstrap Float Label - A pure CSS implementation of the Float Label mode of Bootstrap 4.
Bootstrap Layouts - Generic Bootstrap 4 layout. Used as: HTML template - or - Jekyll layouts - or - Codepen template.
bootstrap-datepicker - A date-picker for twitter bootstrap
boostrap-table - An extended Bootstrap table with radio, checkbox, sort, pagination, and other added features.
ng-bootstrap - Angular Components
bootstrap-vue - Vue Components
reactstrap - React Components
Bootstrap 4 tooltips beginner guide to make you pro 2019 - Bootstrap 4 beginner's guide
Tutorialspoint - Online bootstrap 4 step-by-step guideline recommend bookmark this
Quakit - Learning with hands-on practice
Startbootstrap - Handy crafted bootstrap themes
Bootstrap4cc - Bootstrap daily freebies
Internet Explorer, Edge 15 and earlier versions do not support sticky positioning. Safari requires a -webkit- prefix (see example below). You must also specify at least one of top, right, bottom or left for sticky positioning to work. ↩︎
Elements after a floating element will flow around it. To avoid this, use the clear property or the clearfix hack. ↩︎
Tip: For best browser support, you should always define both the 0% and the 100% selectors. ↩︎
Although the cubic Bezier curve is mapped on an 1 by 1 coordinate system, and it can only accept x values from 0 to 1, the y value can be set to numbers larger than one. This results in a bouncing movement that is ideal for simulating the juggling ball => animation-timing-function: cubic-bezier(0.3, 0.4, 0.5, 1.6); ↩︎
While the content of the <figure> element is related to the main flow, its position is independent of the main flow, and if removed it should not affect the flow of the document. ↩︎
Browsers, such as screen readers for disabled users, can use this element to determine whether to omit the initial rendering of this content. ↩︎
Having a list of "click here" or "read more" links isn't helpful ↩︎
Links and form controls, automatically receive keyboard focus when a user tabs through a page. ↩︎
The ratio is calculated by comparing the relative luminance values of two colors. This ranges from 1:1 for the same color, or no contrast, to 21:1 for white against black, the strongest contrast. ↩︎
close colors can be thought of as neighbors on the color wheel => those combinations should be avoided when conveying important information ↩︎
Instead of using em or px to size text ↩︎
The default property settings are flex: 0 1 auto; ↩︎
One of the things that sets CSS grids apart from flexbox is that you can easily position items in two dimensions: columns and rows. ↩︎
Using the order property will create a disconnect between the visual presentation of content and DOM order. This will adversely affect users experiencing low vision navigating with the aid of assistive technology such as a screen reader. If the visual (css) order is important, then screen reader users will not have access to the correct reading order. ↩︎