HTML CSS Book

HTML

Text Marking Up

TagMeaning
<a>Hyperlinks
<b>Keywords
<em>Emphasis
<i>Italic
<s>Corrections
<strong>Important
<u>Underlining Text
<small>disclaimers and clarifications
<sup>Superscripts
<sub>Subscripts
<br>Line break
<wbr>Safe Line Break (HTML5)
<code>Computer source code
<var>A variable
<samp>Output from computer
<kbd>User input
<abbr>Abbreviations
<dfn>Defining Terms
<q>Quotations
<cite>Citations
<ruby><rt><rp>Ruby characters(HTML5)
<bdo>Explicit text direction
<bdi>Non-Explicit text direction(HTML5)
<span>Span of Content
<mark>Highlighting Text(HTML5)
<ins>Added Content
<del>Deleted content
<time>time and date(HTML5)

Grouping Content

TagMeaning
<p>Paragraphs
<div>create structure
<pre>Preformatted Content
<blockquote>larger amounts of quoted content
<hr>A line
<ol>ordered list
<ul>unordered lists
<li>an item in a list
<dl><dt><dd>Definition Lists
<figure>Figures(HTML5)

Sections

TagMeaning
<h1><h2><h3><h4><h5><h6>heading
<hgroup>Headings group(HTML5)
<section>Sections(HTML5)
<header>Headers(HTML5)
<footer>Footers(HTML5)
<nav>Navigation Blocks(HTML5)
<article>Articles(HTML5)
<aside>Sidebars(HTML5)
<address>Contact Information
<details>for Details Section(HTML5)

Table Elements

TagMeaning
<table>,<tr>,<td>Table
<th>Headers Cells
<tbody>Table Body
<thead>Table Headings
<tfoot>Table Footer
<colgroup>Column Group
<col>columns in a column group
<caption>Caption
colspan,rowspanColumn span, Row span
headerheader attribute

Form

TagMeaning
<form>Form
<fieldset>Group elements
<legend>Descriptive Label
<input>input text fields
<input type='reset|submit|button'>input buttons
<input type='password'>input password fields
<input type='data validation'>input data validation
<input type='Restricted type'>Restricted Data type Values(HTML5)
<textarea>Multiple Lines of Text
<select>Option selecting
<optgroup>Options in group
<datalist>Auto-complete(HTML5)
<output>Calculation output(HTML5)
<keygen>Key generator(HTML5)
<dataList>data list

Using Input Validation

Embedding Content

TagMeaning
<img>Embedding an Image
<map>Image map
<iframe>Internal embeded
<embed>Embed
<object>Embeded object

Value element

TagMeaning
<progress>progress(HTML5)
<meter>Showing a Ranged Value(HTML5)

Multimedia

Canvas

HTML5 Global Attributes

CSS

HTML reference

HTML5 Global Attributes

CSS Reference

CSS Property List

NameDescription
@font-facea web font(CSS3)
@keyframesone or more key frames for an animation (CSS3)
animationShorthand property for animations (CSS3)
animation-delaya delay before an animation starts (CSS3)
animation-directionhow alternate repeats of an animation are performed (CSS3)
animation-durationthe duration of an animation (CSS3)
animation-iterationcountthe number of times an animation will be repeated (CSS3)
animation-namethe name for an animation (CSS3)
animation-play-stateplaying or is paused (CSS3)
animation-timingfunctionthe function to calculate values between key frames(CSS3)
backgroundall background values.
background-attachmentbackground attachment, useful for scrolling regions.
background-clipSets the area where the background color and image are visible. (CSS3)
background-colorbackground color.
background-imagethe image for the background.
Sets the point for the background image. (CSS3)
background-positionPositions the image.
background-repeatthe repeat style for the background image.
background-sizethe size for the background image. (CSS3)
borderall border values for all edges.
border-bottomall border values for the bottom border.
border-bottom-colorthe color for the bottom border.
border-bottom-leftradiusthe corner radius for curved borders. (CSS3)
border-bottom-rightradiusthe corner radius for curved borders. (CSS3)
border-bottom-stylestyle for the bottom border.
border-bottom-widthwidth for the bottom border.
border-collapsethe display style for borders on adjacent table cells
border-colorthe border color for all edges.
border-imagefor image-based borders. (CSS3)
border-image-outsetthe area outside the border box used for displaying the image. (CSS3)
border-image-repeatthe repeat style for the border image. (CSS3)
border-image-slicethe offsets for the image slices. (CSS3)
border-image-sourcethe source for the border image. (CSS3)
border-image-widththe width of the image border. (CSS3)
border-leftleft border shorthand.
border-left-colorthe color for left border.
border-left-stylethe style for the left border.
border-left-widththe width for the left border.
border-radiusShorthand for curved border. (CSS3)
border-rightShorthand for the right border.
border-right-colorthe color for the right border.
border-right-stylethe style for the right border.
border-right-widththe width of the right border.
border-spacingthe spacing between table cell borders
border-stylethe style shorthand for all borders.
border-topShorthand for the top border.
border-top-colorthe color of the top border.
border-top-left-radiusthe radius for a corner for curved borders. (CSS3)
border-top-right-radiusthe radius for a corner used for curved borders. (CSS3)
border-top-stylethe style for the top border.
border-top-widththe width for the top border.
border-widththe width for all borders.
bottomthe bottom-edge offset for a positioned element.
box-shadowone or more drop shadows. (CSS3)
box-sizingthe box size-related properties (CSS3)
caption-sidethe position of a table caption
clearClears one or both edges for a floating element
colorthe foreground color
column-countthe number of columns in a multicolumn layout. (CSS3)
column-fillhow content should be distributed between columns. (CSS3)
column-gapthe distance between columns. (CSS3)
column-ruleShorthand to define the rule between columns. (CSS3)
column-rule-colorthe color of the rule. (CSS3)
column-rule-stylethe style of the rule. (CSS3)
column-rule-widththe width of the rule. (CSS3)
column-spanhow many columns an element should span. (CSS3)
column-widththe width of columns. (CSS3)
columnsShorthand for setting the column-span and column-width. (CSS3)
cursorthe cursor style
directionthe text directionality
displayhow the element is displayed.
displaythe type of an element's box
empty-cellshow borders are drawn on empty table cells
flex-alignfor flexible box layout. (CSS3)
flex-directionfor flexible box layout. (CSS3)
flex-orderfor flexible box layout. (CSS3)
flex-packfor flexible box layout. (CSS3)
floatShifts an element to the left or right edge
fontthe font details in a single declaration
font-familythe list of font families in order of preference
font-sizethe size of the font
font-stylenormal, italic...
font-variantif the font should be displayed in small caps form
font-weightthe boldness
heightthe height
leftthe left-edge offset for a positioned element.
letter-spacingthe space between letters
line-heightthe height of a line
list-stylea list style
list-style-imagean image as a list marker
list-style-positionthe list marker position relative to a list item
list-style-typethe marker type for a list
marginShorthand property for the margin in all four directions
margin-bottomthe margin for the bottom
margin-leftthe margin for the left edge
margin-rightthe margin for the right edge
margin-topthe margin for the top edge
max-heightSets the maximum height for the element
max-widththe maximum width
min-heightthe minimum height
min-widththe minimum width
opacitythe transparency (CSS3)
outlineShorthand property for the outline in a single declaration.
outline-coloroutline color .
outline-offsetthe offset of the outline.
outline-stylethe style of the outline.
outline-widththe width of the outline.
overflowShorthand for the overflow style
overflow-xoverflowing content on the x-axis (CSS3)
overflow-yoverflowing content on the y-axis (CSS3)
paddingShorthand for the padding in all four directions
padding-bottomthe padding for the bottom
padding-leftthe padding for the left
padding-rightthe padding for the right
padding-topthe padding for the top
positionthe positioning method.
rightthe right-edge offset.
table-layouthow the size of a table is determined
text-alignthe alignment of text
text-decorationthe decoration of text
text-indentthe indentation of text
text-justifythe justification of text
text-shadowa drop shadow for text (CSS3)
text-transformtransformation to text
topthe top-edge offset.
transforma transform to apply(CSS3)
transform-originan origin of a transform(CSS3)
transitionShorthand property for transitions (CSS3)
transition-delaya delay before the transition starts (CSS3)
transition-durationthe duration of a transition (CSS3)
transition-propertyproperties to be transitioned (CSS3)
transition-timingfunctionthe function to calculate intermediate values during the transition (CSS3)
visibilitythe visibility for an element
widththe width
word-spacingthe spacing between words
z-indexthe front-to-back order.

CSS Selector

SelectorSelect
*all elements.
<type>elements of the specified type.
.<class>elements of the specified class.
#<id>elements for the id attribute.
[attr]elements that define the attribute attr, regardless the attribute's value.
[attr="val"]elements with attr whose is val.
[attr^="val"]elements with attr whose value starts with the string val. (CSS3)
[attr$="val"]elements with attr whose value ends with the string val. (CSS3)
[attr*="val"]elements with attr whose value contains the string val. (CSS3)
[attr~="val"]elements with attr whose value contains multiple values, onc of which is val.
[attr|="val"]elements with attr whose value is a hyphen-separated, the first is val.
<selector>, <selector>the union of the elements matched by each individual selector.
<selector><selector>Selects elements that match the second selector and that are arbitrary descendants of first selector.
<selector>><selector>Selects elements that match the second selector and that are immediate descendants of the first selector.
<selector> + <selector>Selects elements that match the second selector and that immediately follow the first selector.
<selector> ~ <selector>Selects elements that match the second selector and that follow an element that matches the first selector. (CSS3)
::first-linethe first line of text.
::first-letterthe first letter of text.
:beforeInserts content before.
:afterInserts content after.
:rootSelects the root element. (CSS3)
:first-childSelects the first children.
:last-childthe last children. (CSS3)
:only-childthe sole element from the containing element. (CSS3)
:only-of-typeSelects elements that are the sole element of their type defined by their containing element. (CSS3)
:nth-child(n)the nth child of their parent. (CSS3)
:nth-last-child(n)the nth from last child of their parent. (CSS3)
:nth-of-type(n)the nth child of their type defined by their parent. (CSS3)
:nth-last-of-type(n)the nth from last child of their type defined by their parent. (CSS3)
:enabledelements in their enabled state. CSS3)
:disabledelements in their disabled state. CSS3)
:checkedelements in a checked state. CSS3)
:defaultSelects default elements. CSS3)
:validSelects input elements that are valid based on input validation. (CSS3)
:invalidSelects input elements that are invalid based on input validation. (CSS3)
:in-rangeSelects constrained input elements that are within the specified range. (CSS3)
:out-of-rangeSelects constrained input elements that are outside the specified range. (CSS3)
:requiredSelects input elements based on the presence of the required attribute. (CSS3)
:optionalSelects input elements based on the presence of the required attribute. (CSS3)
:linkSelects link elements.
:visitedSelects link elements the user has visited.
:hoverelements under the mouse pointer.
:activeelements under the pointer when the mouse button is pressed.
:focusfocused element
:not(<selector>) Negates a selection.(CSS3)
:emptySelects elements that contain no child elements. (CSS3)
:lang(<language>) Selects elements based on the value of the lang attribute.
:targetSelects the element referred to by the URL fragment identifier. (CSS3)
CounterCounter

Appendix

Home » 
HTML CSS Book
  1. HTML
  2. CSS
  3. HTML reference
  4. CSS Reference
  5. Appendix