CSS - auto-mate/CheatSheetWiki GitHub Wiki
Animate From JS
Box Model -New
Box
Box Model - Show Boxes on all items in a page
Classes
Center An Element
Display
Elements
Float
Grid
Position
Print Screen and media
Selectors
Table
Text
Window Size
Use this for width and height to be as its value:
html {
box-sizing: border-box;
}
*, *::before, *::after {
box-sizing: inherit;
}
examples
table {table-layout: fixed;}
th {background-color:white;color:black;}
examples
.SomeClass1 {visibility:collapse;}
.SomeClass2 {width:9%;margin-bottom:10px;padding:5px;text-align:center;}
.SomeClass2:hover {border:1px solid;font-size: 10px;}
.SomeClass3: {position:relative;z-index:99; }
.SomeClass3: {position:fixed; }
.SomeClass3: {position:absolute;top:10px;left:10px;}
Use box-sizing: border-box; to stop box size changing with padding etc
NB height as a % is the % of the width(!) of the containing element
Simple Box where the main Div is positioned absolutely and relative items inside move with the main box
<div style="position:absolute;top:10px;left:10px;border:solid;width:150px;height:150px;">
<div style="position:relative;width:100%;text-align:center;border-bottom:solid;background-color:red;color:white;">
TITLE
</div>
<div style="position:relative;width:100%;text-align:left;">
Content<br>
etc........
</div>
</div>
Basic
Universal selector "*"
Selects all elements. (NB namespaces can be used)
Syntax: *
Example: * will match all the elements of the document.
Type selector "div"
Selects all elements that have the given node name.
Syntax: elementname
Example: input will match any <input> element.
Class selector ".class"
Selects all elements that have the given class attribute.
Syntax: .classname
Example: .index will match any element that has a class of "index".
ID selector "#id"
Selects item with this id attribute.
Syntax: #idname
Example: #toc will match the element that has the ID "toc".
Attribute selector "[anAtt]"
Selects all elements that have the given attribute.
Syntax: [attr] [attr=value] [attr~=value] [attr|=value] [attr^=value] [attr$=value] [attr*=value]
Example: [autoplay] will match all elements that have the autoplay attribute set (to any value).
Grouping selectors
Selector list ","
The , selects all the matching nodes.
Syntax: A, B
Example: div, span will match both <span> and <div> elements.
Combinations (combinators)
Descendant " " (space)
All B in an A
Syntax: A B
Example: div span will match all <span> elements that are inside a <div> element.
Child ">"
B directly in A (one level only)
Syntax: A > B
Example: ul > li will match all <li> elements that are nested directly inside a <ul> element.
General sibling "~"
B following an A and both share the same parent. B can be any position.
Syntax: A ~ B
Example: p ~ span will match all <span> elements that follow a <p>, immediately or not.
Adjacent sibling "+"
B directly follows A.
Syntax: A + B
Example: h2 + p will match all <p> elements that directly follow an <h2>.
Column combinator "||"
The || combinator selects nodes which belong to a column.
Syntax: A || B
Example: col || td will match all <td> elements that belong to the scope of the <col>.
Pseudo
Pseudo classes ":" states
The : pseudo allow the selection of elements based on state information that is not contained in the document tree.
Example: a:visited will match all <a> elements that have been visited by the user.
Pseudo elements "::" non-state
The :: pseudo represent entities that are not included in HTML.
Example: p::first-line will match the first line of all <p> elements.
absolute: position as required from 0,0 or rel to 0,0 of previous relative/absolute
relative: position from where it would have been
fixed : stays when scrolled
sticky : becomes fixed after scrolling to a given point
Inline - doesn't start a new row
Block - starts a new row
Inline-BLock - doesn't start a new row but can adjust height and width, margin and padding
use a width with margin:auto
OR
transform: translate(50%, 50%);
right: 50%;
position: absolute/fixed;
width: 20%;
background-color: aquamarine;
Wrap all screen and media separately for completely different views
<html>
<head>
<style>
@media print {
p {
color:red;
}
}
@media screen {
p {
color:blue;
}
}
</style>
</head>
<body>
<p>Hello</p>
</body>
</html>
positioning
use
text-align: (centre,left,right,justify)
vertical-align: (top,middle,bottom)
text-transform: (uppercase,lowercase,capitalize)
letter-spacing:
text-indent:
letter-spacing:
line-height
word-spacing:
simple table view, set border for table,th,td and border-collapse on the table
Use to wrap text around image
Or divs to float next to rather than on top of each other
see clearfix hack for overflow issues
Add below to a style tag
* {border:solid; border-width:thin;border-color:red; ! important}
This finds the first Input element specifically with [type=text] and changes the Background Color from red to white over a 2 sec period. It also resets the value to its original state (assuming ele is also the input box)
document.querySelector("Input[type=text]").animate( { backgroundColor: ["red", "white"] }, 2000 );
ele.value = ele.getAttribute('value');
Simple grid for centering a popup of size 500*500
<body>
<p>Other stuff</p>
<div style="
position: absolute;
display: grid;
grid-template-columns: 1fr 500px 1fr;
grid-template-rows: 1fr 500px 1fr;
width: 100%;
height: 100%;">
<-- optional - makes area underneath non responsive -->
<div style="grid-area: 1 / 1; z-index:50;"> </div>
<div style="grid-area: 1 / 2; z-index:50;"> </div>
<div style="grid-area: 1 / 3; z-index:50;"> </div>
<div style="grid-area: 2 / 1; z-index:50;"> </div>
<div style="grid-area: 2 / 3; z-index:50;"> </div>
<div style="grid-area: 3 / 1; z-index:50;"> </div>
<div style="grid-area: 3 / 2; z-index:50;"> </div>
<div style="grid-area: 3 / 3; z-index:50;"> </div>
<-- optional end -->
<div style="
width: 100%;
height: 100%;
background-color: red;
grid-area: 2 / 2;">
Hello
</div>
</div>
</body>
size of available window
window.innerWidth
window.innerHeight