HTML
WEB API
- DOM
- Device APIs
- Communication APIs
- Data Management APIs
- Privileged APIs
- Certified APIs
DOCTYPE
<!DOCTYPE HTML>
<!DOCTYPE html>
<html lang="en">
<head>
<title>A tiny document</title>
</head>
<body>
<h1>Main heading in my document</h1>
<!-- Note that it is "h" + "1", not "h" + the letters "one" -->
<p>Look Ma, I am coding <abbr title="Hyper Text Markup Language">HTML</abbr>.</p>
</body>
</html>ATRRIBUTES
autocomplete, autofocus, checked, contenteditable, data-*, href, id, maxlength...
ELEMENTS
<a>, <abbr>, <acronym>, <address>, <applet>, <area>, <article>, <aside>
<audio>, <table>, <tbody>, <td>, <template>, <textarea>, <tfoot>, <th>, <thead>HTML5
- Semantics
- Connectivity
- Offline & Storage
- Multimedia
- Performance & Integration
- Device Access
-
Styling
MDN for HTML
CSS - Query Language
.a {
font-size: 12px;
}
SELECT a FROM dom WHERE classname = 'a'
Properties
:active
animation
animation-delay
animation-fill-mode
animation-iteration-count
animation-name
animation-play-state
animation-timing-function
attr()
autotop
touch-action
transform
transform-origin
height
width
transition-delay
transition-duration
transition-property
transition-timing-functionBox Model
.png)
Selectors
* {
margin: 0;
padding: 0;
}
#container * {
border: 1px solid black;
}
Selectors
x {
background-color: blue;
}
Selectors
#container {
border: 1px solid black;
}
Selectors
.error {
color: red;
}
Selectors
li a {
text-decoration: none;
}
Selectors
":<param>" - pseudo class elements
a:visited {
color: red;
}
a:link {
color: purple;
}
Selectors
select first `y` adjacent to `x`
ul + p {
color: red;
}
Selectors
select all `y` which are direct children to `x`
div#container > ul {
border: 1px solid black;
}
<div id="container">
<ul>
<li> List Item
<ul>
<li> Child </li>
</ul>
</li>
<li> List Item </li>
<li> List Item </li>
<li> List Item </li>
</ul>
</div>
Selectors
select all `y` adjacent to `x`
ul ~ p {
color: red;
}
Selectors
attribute selector: select all x which have attribute `title`
a[title] {
color: green;
}
Selectors
attribute selector: select all x which have attribute `attr` whose value is equal = z
a[href="www.google.com"] {
color: green;
}
// multiple attributes
a[href="www.google.com"][title="google"] {
color: green;
}
Selectors
attribute selector: select all anchor tags which have attribute `href` whose value contains the word `tuts`
a[href*="tuts"] {
color: green;
}
Selectors
attribute selector: select all anchor tags which have attribute `href` whose value start with the word `http`
a[href^="http"] {
color: green;
}
Selectors
attribute selector: select all anchor tags which have attribute `href` whose value end with the word `.jpg`
a[href$=".jpg"] {
color: green;
}
Selectors
Used of radio buttons and checkboxes.
input[type=radio]:checked {
border: 1px solid black;
}
Selectors
A special pseudo class which can add content
.clearfix:after {
content: "";
display: block;
clear: both;
visibility: hidden;
height: 0;
}
.clearfix {
display: inline-block;
}
Selectors
A special pseudo class which can add content
.clearfix:before {
content: "";
display: block;
clear: both;
visibility: hidden;
height: 0;
}
.clearfix {
display: inline-block;
}
Selectors
1 based indexing
li:nth-child(3) {
color: red;
}
li:nth-child(4n) {
color: red;
}
Selectors
1 based indexing. begins at end of the collection
li:nth-last-child(3) {
color: red;
}
li:nth-child(4n) {
color: red;
}
Selectors
ul li:first-child {
border-top: none;
}
Selectors
ul > li:last-child {
border-top: none;
}
CSS3
Modules and Snapshots
