HTML CSS Book
HTML
Text Marking Up
Tag | Meaning |
---|---|
<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
Tag | Meaning |
---|---|
<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
Tag | Meaning |
---|---|
<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
Tag | Meaning |
---|---|
<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,rowspan | Column span, Row span |
header | header attribute |
Form
Tag | Meaning |
---|---|
<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 |
Embedding Content
Tag | Meaning |
---|---|
<img> | Embedding an Image |
<map> | Image map |
<iframe> | Internal embeded |
<embed> | Embed |
<object> | Embeded object |
Value element
Tag | Meaning |
---|---|
<progress> | progress(HTML5) |
<meter> | Showing a Ranged Value(HTML5) |
Multimedia
Canvas
- Canvas Basics(HTML5)
- Canvas Context
- Drawing States
- Shape
- Shadows
- Text
- Image
- Video
- Stroke
- Gradients
- Patterns
- Transparency
HTML5 Global Attributes
- accesskey
- class
- contenteditable
- contextmenu
- draggable
- hidden
- id
- lang
- spellcheck
- style
- tabindex
- title
CSS
- Introduction
- Element classification
- Three ways to adding styles to HTML
- !important
- Prefixes for the most popular browsers
- CSS values
- Colors
- Lengths
- Absolute units of measurement
- Relative units of measurement
- Unit Calculations
- Angles
- Times
- Box Model
- Selectors
- Universal Selector
- Type Selector
- Class Selector
- ID Selector
- Attribute Selector
- Simple Attribute Selector
- Exact Attribute Value Selector
- Partial Attribute Value Selector
- Hyphen-separated Attribute Value Selector
- Combined selectors
- Selector Unions
- Descendant Selector
- Child Selector
- Immediate Sibling Selector
- General Sibling Selector
- Pseudo-Element Selectors
- :first-line Selector
- :first-letter Selector
- :before Selector
- :after Selector
- Counter
- :root
- :first-child
- :last-child
- :only-child
- :only-of-type
- :nth-child(n)
- :nth-last-child(n)
- :nth-of-type(n)
- :nth-last-of-type(n)
- :enabled
- :disabled
- :checked
- :default
- :invalid
- :valid
- :in-range
- :out-of-range
- :required
- :optional
- :link
- :visited
- :hover
- :active
- :focus
- not Selector
- :empty
- :lang
- :target
- Border
- border-width
- border-style
- border-color
- border for single side
- border shorthand properties
- Rounded borders
- Image borders
- Background
- Foreground Color and Opacity
- Shadow
- Outlines
- Padding
- Margin
- Size
- Overflow
- Visibility
- Display type
- Floating Boxes
- clear
- Position
- Multicolumn Layouts
- Table Layouts
- Table Style
- List Style
- Cursor
- Aligning and Justifying Text
- Whitespace
- Text Direction
- Space Between Words, Letters, and Lines
- Word wrap
- Indenting
- Decorating and Transforming Text
- Text Shadows
- Fonts
- Transitions
- Animations
- Transforms
Property | Description |
---|---|
position | Sets the positioning method. |
left | Sets left offset values for positioned elements(<length> <%> auto). |
right | Sets right offset values for positioned elements(<length> <%> auto). |
top | Sets top offset values for positioned elements(<length> <%> auto). |
bottom | Sets bottom offset values for positioned elements(<length> <%> auto). |
z-index | Sets the front-to-back ordering of elements. |
HTML reference
- <a>
- <acronym>
- <address>
- <area>
- <article> (HTML5)
- <aside> (HTML5)
- <audio> (HTML5)
- <b>
- <base>
- <bdi> (HTML5)
- <bdo>
- <blockquote>
- <body>
- <br>
- <button>
- <canvas> (HTML5)
- <caption>
- <cite>
- <code>
- <col>
- <colgroup>
- <dd>
- <del>
- <details> (HTML5)
- <dfn>
- <div>
- <dl>
- <!DOCTYPE>
- <dt>
- <em>
- <embed>
- <fieldset>
- <figure> (HTML5)
- <footer> (HTML5)
- <form>
- <frame>
- <frameset>
- <head>
- <header> (HTML5)
- <hgroup> (HTML5)
- <hN>
- <hr>
- <html>
- <i>
- <iframe>
- <img>
- <input>
- <ins>
- <kbd>
- <label>
- <legend>
- <LI>
- <link>
- <keygen> (HTML5)
- <mark> (HTML5)
- <map>
- <meta>
- <meter> (HTML5)
- <nav> (HTML5)
- <noscript>
- <object>
- <ol>
- <optgroup>
- <option>
- <output> (HTML5)
- <p>
- <param>
- <pre>
- <progress> (HTML5)
- <q>
- <rp> (HTML5)
- <rt>
- <ruby>
- <samp>
- <script>
- <section> (HTML5)
- <select>
- <span>
- <strong>
- <style>
- <sub>
- <sup>
- <table>
- <tbody>
- <td>
- <textarea>
- <tfoot>
- <th>
- <time> (HTML5)
- <thead>
- <title>
- <tr>
- <ul>
- <var>
- <video> (HTML5)
HTML5 Global Attributes
- accesskey
- class
- contenteditable
- contextmenu
- draggable
- hidden
- id
- lang
- spellcheck
- style
- tabindex
- title
CSS Reference
CSS Property List
Name | Description |
---|---|
@font-face | a web font(CSS3) |
@keyframes | one or more key frames for an animation (CSS3) |
animation | Shorthand property for animations (CSS3) |
animation-delay | a delay before an animation starts (CSS3) |
animation-direction | how alternate repeats of an animation are performed (CSS3) |
animation-duration | the duration of an animation (CSS3) |
animation-iterationcount | the number of times an animation will be repeated (CSS3) |
animation-name | the name for an animation (CSS3) |
animation-play-state | playing or is paused (CSS3) |
animation-timingfunction | the function to calculate values between key frames(CSS3) |
background | all background values. |
background-attachment | background attachment, useful for scrolling regions. |
background-clip | Sets the area where the background color and image are visible. (CSS3) |
background-color | background color. |
background-image | the image for the background. |
Sets the point for the background image. (CSS3) | |
background-position | Positions the image. |
background-repeat | the repeat style for the background image. |
background-size | the size for the background image. (CSS3) |
border | all border values for all edges. |
border-bottom | all border values for the bottom border. |
border-bottom-color | the color for the bottom border. |
border-bottom-leftradius | the corner radius for curved borders. (CSS3) |
border-bottom-rightradius | the corner radius for curved borders. (CSS3) |
border-bottom-style | style for the bottom border. |
border-bottom-width | width for the bottom border. |
border-collapse | the display style for borders on adjacent table cells |
border-color | the border color for all edges. |
border-image | for image-based borders. (CSS3) |
border-image-outset | the area outside the border box used for displaying the image. (CSS3) |
border-image-repeat | the repeat style for the border image. (CSS3) |
border-image-slice | the offsets for the image slices. (CSS3) |
border-image-source | the source for the border image. (CSS3) |
border-image-width | the width of the image border. (CSS3) |
border-left | left border shorthand. |
border-left-color | the color for left border. |
border-left-style | the style for the left border. |
border-left-width | the width for the left border. |
border-radius | Shorthand for curved border. (CSS3) |
border-right | Shorthand for the right border. |
border-right-color | the color for the right border. |
border-right-style | the style for the right border. |
border-right-width | the width of the right border. |
border-spacing | the spacing between table cell borders |
border-style | the style shorthand for all borders. |
border-top | Shorthand for the top border. |
border-top-color | the color of the top border. |
border-top-left-radius | the radius for a corner for curved borders. (CSS3) |
border-top-right-radius | the radius for a corner used for curved borders. (CSS3) |
border-top-style | the style for the top border. |
border-top-width | the width for the top border. |
border-width | the width for all borders. |
bottom | the bottom-edge offset for a positioned element. |
box-shadow | one or more drop shadows. (CSS3) |
box-sizing | the box size-related properties (CSS3) |
caption-side | the position of a table caption |
clear | Clears one or both edges for a floating element |
color | the foreground color |
column-count | the number of columns in a multicolumn layout. (CSS3) |
column-fill | how content should be distributed between columns. (CSS3) |
column-gap | the distance between columns. (CSS3) |
column-rule | Shorthand to define the rule between columns. (CSS3) |
column-rule-color | the color of the rule. (CSS3) |
column-rule-style | the style of the rule. (CSS3) |
column-rule-width | the width of the rule. (CSS3) |
column-span | how many columns an element should span. (CSS3) |
column-width | the width of columns. (CSS3) |
columns | Shorthand for setting the column-span and column-width. (CSS3) |
cursor | the cursor style |
direction | the text directionality |
display | how the element is displayed. |
display | the type of an element's box |
empty-cells | how borders are drawn on empty table cells |
flex-align | for flexible box layout. (CSS3) |
flex-direction | for flexible box layout. (CSS3) |
flex-order | for flexible box layout. (CSS3) |
flex-pack | for flexible box layout. (CSS3) |
float | Shifts an element to the left or right edge |
font | the font details in a single declaration |
font-family | the list of font families in order of preference |
font-size | the size of the font |
font-style | normal, italic... |
font-variant | if the font should be displayed in small caps form |
font-weight | the boldness |
height | the height |
left | the left-edge offset for a positioned element. |
letter-spacing | the space between letters |
line-height | the height of a line |
list-style | a list style |
list-style-image | an image as a list marker |
list-style-position | the list marker position relative to a list item |
list-style-type | the marker type for a list |
margin | Shorthand property for the margin in all four directions |
margin-bottom | the margin for the bottom |
margin-left | the margin for the left edge |
margin-right | the margin for the right edge |
margin-top | the margin for the top edge |
max-height | Sets the maximum height for the element |
max-width | the maximum width |
min-height | the minimum height |
min-width | the minimum width |
opacity | the transparency (CSS3) |
outline | Shorthand property for the outline in a single declaration. |
outline-color | outline color . |
outline-offset | the offset of the outline. |
outline-style | the style of the outline. |
outline-width | the width of the outline. |
overflow | Shorthand for the overflow style |
overflow-x | overflowing content on the x-axis (CSS3) |
overflow-y | overflowing content on the y-axis (CSS3) |
padding | Shorthand for the padding in all four directions |
padding-bottom | the padding for the bottom |
padding-left | the padding for the left |
padding-right | the padding for the right |
padding-top | the padding for the top |
position | the positioning method. |
right | the right-edge offset. |
table-layout | how the size of a table is determined |
text-align | the alignment of text |
text-decoration | the decoration of text |
text-indent | the indentation of text |
text-justify | the justification of text |
text-shadow | a drop shadow for text (CSS3) |
text-transform | transformation to text |
top | the top-edge offset. |
transform | a transform to apply(CSS3) |
transform-origin | an origin of a transform(CSS3) |
transition | Shorthand property for transitions (CSS3) |
transition-delay | a delay before the transition starts (CSS3) |
transition-duration | the duration of a transition (CSS3) |
transition-property | properties to be transitioned (CSS3) |
transition-timingfunction | the function to calculate intermediate values during the transition (CSS3) |
visibility | the visibility for an element |
width | the width |
word-spacing | the spacing between words |
z-index | the front-to-back order. |
CSS Selector
Selector | Select |
---|---|
* | 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-line | the first line of text. |
::first-letter | the first letter of text. |
:before | Inserts content before. |
:after | Inserts content after. |
:root | Selects the root element. (CSS3) |
:first-child | Selects the first children. |
:last-child | the last children. (CSS3) |
:only-child | the sole element from the containing element. (CSS3) |
:only-of-type | Selects 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) |
:enabled | elements in their enabled state. CSS3) |
:disabled | elements in their disabled state. CSS3) |
:checked | elements in a checked state. CSS3) |
:default | Selects default elements. CSS3) |
:valid | Selects input elements that are valid based on input validation. (CSS3) |
:invalid | Selects input elements that are invalid based on input validation. (CSS3) |
:in-range | Selects constrained input elements that are within the specified range. (CSS3) |
:out-of-range | Selects constrained input elements that are outside the specified range. (CSS3) |
:required | Selects input elements based on the presence of the required attribute. (CSS3) |
:optional | Selects input elements based on the presence of the required attribute. (CSS3) |
:link | Selects link elements. |
:visited | Selects link elements the user has visited. |
:hover | elements under the mouse pointer. |
:active | elements under the pointer when the mouse button is pressed. |
:focus | focused element |
:not(<selector>) | Negates a selection.(CSS3) |
:empty | Selects elements that contain no child elements. (CSS3) |
:lang(<language>) | Selects elements based on the value of the lang attribute. |
:target | Selects the element referred to by the URL fragment identifier. (CSS3) |
Counter | Counter |