HTML stands for Hyper-Text Markup Language. HTML describes the contents of a web page.
CSS stands for Cascading Style Sheet. CSS defines the appearance and layout of a web page.
CSS can be included in the HTML file, or in a separate CSS file.
HTML is a subset of XML. XML stands for Extensible Markup Language. HTML is an extension of this language. It's rules are more specific, but the basic structure is the same.
A basic HTML page template
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="description" content="description">
<meta name="keywords" content="word,word,word">
<meta name="author" content="author">
<title>Title Goes Here</title>
</head>
<body>
<p>This is my web page</p>
</body>
</html>
em = equal to the current font size (if font size is 12px then 1em = 12px), scales linearly
px = pixels are fixed-size units based on the physical computer screen
pt = points come from print media (1 pt = 1/72 inch), fixed size units
% = percent is in relation to the current font size (100% = current font size)
<p>A spade character: ♠</p>
<p>A forced whitespace: </p>
<p>An ampersand: &</p>
<p>A spade character: ♠</p>
<p>A spade character: ♠</p>
Html:
<head>
<link rel="stylesheet" type="text/css" href="myStyles.css" />
</head>
myStyles.css:
body {
font-size: 14pt;
}
<head>
<style type="text/css">
body {
font-size: 14pt;
}
</style>
</head>
<head>
</head>
<body style="font-size: 14pt;">
</body>
Selectors can be used in External and Internal stylesheets to specify which elements each style applies to.
Select by id
#id { ... }
Select by class
.class { ... }
Select by tag
table { ... }
Select direct children
table.class > tr { ... }
Select descendents
table.class td { ... }
A list of selectors
#id, table.class td, p { ... }
Modifiers
td:hover { ... } //when mouse hovers over element
button:focus { ... } //when element is in focus
a:link { ...} //unvisited links
a:visited { ... } //visited links
a:active { ... } //active link
a:hover { ... } //if using link or visited with hover, make sure hover is last or the style will be overwritten
From most important to least important:
1) Inline CSS
2) A Selector Rule Marked !important
3) More Specific Selectors override Less Specific Selectors
3a) Ids
3b) Classes
3c) Elements/Tags
4) Later Rules override Earlier Rules
Multiple selectors:
selecterA, selectorB { }
Element has tag name:
div { }
Element has id:
#myId { }
Element has class:
.myClass { }
Element has both classes:
.classA.classB { }
Direct descendants:
(any div tag that is a direct child of a "classA" tag)
.classA > div { }
Any descendants
(any div tag that is somewhere within a "classA" tag)
.classA div { }
Attribute exists
[data-category]
Attribute value equals
[data-category="Book"]
Attribute contains substring
[data-category*="Book"]
Attribute contains whole-word
[data-category~="Book"]
Attribute value starts with whole-word
[data-category|="Book"]
Attribute value starts with
[data-category^="Book"]
Attribute value ends with
[data-category$="Book"]
Multiple attribute selectors
[data-category="Book"][name="Customer"]
Change cursor to pointer icon when user hovers over a table cell.
td:hover {
cursor: pointer;
}
Display a custom cursor. The image be small; 16x16 pixels worked in testing.
body {
cursor: url(images/myCursor.png),auto;
}
body {
//delta x=5 delta y=10
cursor: url(images/myCursor.png) 5 10,auto;
}
Show element. Block means it acts like a div. Inline means it acts like a span.
div.a {
display: block;
}
div.b {
display: inline;
}
Hide element
div {
display: none;
}
div {
background-image: url(path/to/image.jpg);
background-size: 325px; /*resize the background image before tiling*/
background-repeat: repeat; /*tiling*/
}
You can make any element focusable by adding a tabIndex attribute to it.
<p tabIndex="4">...</p>
Adding a title to a button or input will create a tooltip when you hover over it.
<button title="Explanation Text">abc</button>
Position: Absolute means in reference to the parent element position, specifying Left, Right, Top, and/or Bottom.
You can nest Absolute elements, each will be relative to its own parent.
#container {
position: relative; /* or absolute */
}
#childA {
position: absolute;
left: 3em;
top: 1em;
}
#childB {
position: absolute;
left: 1em;
top: 1em;
}
If you want elements below "container" to show up below it, you need to set a width and height on the "container".
#container {
position: relative;
width: 400px;
height: 600px; /*enough height to container childA and childB*/
}
todo: disabled, max, min, pattern, type
with css pseudo selectors :disabled :invalid :optional :required :valid
Browsers will perform some form validation automatically.
Required fields will be validated by the browser
<form action="submitForm.php" method="post">
<input type="text" name="firstName" required />
<input type="submit" value="Submit" />
</form>
Transitions let you change property values smoothly, over a given period of time. You must specify the property and the duration.
This example causes the div width that change from 100px to 200px over a 2 second period.
div {
width: 100px;
transition: width 2s;
-webkit-transition: width 2s; /* for Safari */
}
div:hover {
width: 300px;
}
div {
transition: width 2s, height 4s;
}
div {
transition: all 1s;
}
Specifies the number of seconds to delay the transition.
The transition timing function specifies the curve of the speed of the transition.
div {
transition: width linear 2s 0s;
}
//or
div {
transition-property: width;
transition-duration: 2s;
transition-timing-function: linear;
transition-delay: 0s;
}
Options:
ease = slow, fast, slow (default)
linear = same speed throughout
ease-in = slow, fast, fast
ease-out = fast, fast, slow
ease-in-out = ??
cubic-bezier(a,b,c,d) = define your own bezier curve
@keyframes fadeLoop {
0% { opacity: 1; }
50% { opacity: 0; }
100% { opacity: 1; }
}
.animateFadeLoop {
opacity: 1;
animation: fadeLoop 1s infinite;
}
hold at end of animation
animation-fill-mode: forwards;
Transform can rotate, scale, move, skew, etc.
div {
transition: width 2s, transform 3s;
transform: rotate(45deg);
-ms-transform: rotate(45deg); /*IE 9 */
-webkit-transform: rotate(45deg); /* Chrome, Safari, Opera */
}
No transform
Return to the original value.
Copy parent element.
matrix(a,b,c,d,e,f)
For each corner (x,y) of the element, calculates the new point as (a*x + c*y + e, b*x + d*y + f).
Matrix Dot Product
[ a c e ] [ x ] [ a*x + c*y + e*1 ]
[ b d f ] * [ y ] = [ b*x + d*y + f*1 ]
[ 0 0 1 ] [ 1 ] [ 0*x + 0*y + 1*1 ]
matrix3d(a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p)
(there are 16 arguments)
translate(x,y)
translate(x)
Shifts the element origin point (a,b) to (a+x, b+y).
translate3d(x,y,z)
translateX(x)
translateY(y)
translateZ(z)
The center of the element remains static, while the width and height are multiplied by the values provided.
scale(widthX, heightX)
Element with dimensions WxH changes to W*widthX x H*heightX.
scale3d(widthX, heightX, depthX)
scaleX(widthX)
scaleY(heightX)
scaleZ(depthX)
Rotates the element clockwise around its center.
rotate(degrees)
Rotates the shape around the specified axis.
rotate3d(x,y,z,degrees)
rotateX(degrees)
rotateY(degrees)
rotateZ(degrees)
skew(xDegrees, yDegrees)
skewX(degrees)
skewY(degrees)
perspective(n)