Basics

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.

XML

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.

Template Page

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>
Fonts

Size Units

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)
Literals

HTML Entity


<p>A spade character: &spades;</p>
<p>A forced whitespace: &nbsp;</p>
<p>An ampersand: &amp;</p>

Decimal


<p>A spade character: &#9824;</p>

Hexadecimal


<p>A spade character: &#x2660;</p>

Stylesheets

External

Html:

<head>
    <link rel="stylesheet" type="text/css" href="myStyles.css" />
</head>

myStyles.css:

body {
    font-size: 14pt;
}

Internal


<head>
    <style type="text/css">
        body {
            font-size: 14pt;
        }
    </style>
</head>

Inline


<head>
</head>
<body style="font-size: 14pt;">
</body>

Selectors

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
Styles

Order Of Precedence

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

CSS Selectors

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"]
Matches "Paperback Book" but not "Books" nor "My-Book"

Attribute value starts with whole-word

[data-category|="Book"]
Matches "Book" and "Book-On-Order" but not "Books"

Attribute value starts with

[data-category^="Book"]

Attribute value ends with

[data-category$="Book"]

Multiple attribute selectors

[data-category="Book"][name="Customer"]

Cursor

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;
    }
You can change the location of the cursor so it is centered over the hotspot correctly.

    body {
        //delta x=5 delta y=10
        cursor: url(images/myCursor.png) 5 10,auto;
    }

Show/Hide

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;
    }

Backgrounds


div {
    background-image: url(path/to/image.jpg);
    background-size: 325px;    /*resize the background image before tiling*/
    background-repeat: repeat; /*tiling*/
}
background images will fill the space, they will not alter the size of the space

Attributes

TabIndex

You can make any element focusable by adding a tabIndex attribute to it.

    <p tabIndex="4">...</p>

Title

Adding a title to a button or input will create a tooltip when you hover over it.

    <button title="Explanation Text">abc</button>
Layout

Explicitly Arrange Elements Within Parent

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*/
    }
Forms

todo: disabled, max, min, pattern, type
with css pseudo selectors :disabled :invalid :optional :required :valid

Validation

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

Transitions let you change property values smoothly, over a given period of time. You must specify the property and the duration.

Single Property

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;
}

Multiple Properties


div {
    transition: width 2s, height 4s;
}

All Properties


div {
    transition: all 1s;
}

Transition Delay

Specifies the number of seconds to delay the transition.

Transition Timing Function

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
    
Fade In/Out Loop


@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

Transform can rotate, scale, move, skew, etc.

Example


div {
    transition: width 2s, transform 3s;
    transform: rotate(45deg);
    -ms-transform: rotate(45deg); /*IE 9 */
    -webkit-transform: rotate(45deg); /* Chrome, Safari, Opera */
}

None

No transform

Initial

Return to the original value.

Inherit

Copy parent element.

Matrix

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

matrix3d(a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p)
(there are 16 arguments)

Translate

translate(x,y)
translate(x)

Shifts the element origin point (a,b) to (a+x, b+y).

Translate3d

translate3d(x,y,z)
translateX(x)
translateY(y)
translateZ(z)

Scale

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

scale3d(widthX, heightX, depthX)
scaleX(widthX)
scaleY(heightX)
scaleZ(depthX)

Rotate

Rotates the element clockwise around its center.

rotate(degrees)

Rotate3d

Rotates the shape around the specified axis.

rotate3d(x,y,z,degrees)
rotateX(degrees)
rotateY(degrees)
rotateZ(degrees)

Skew

skew(xDegrees, yDegrees)
skewX(degrees)
skewY(degrees)

Perspective

perspective(n)
Objects

PDF

Display PDF viewer within a web page

<object data='myFile.pdf#toolbar=1' 
type='application/pdf' 
width='700px' 
height='900px'></object>