HTML & CSS user manual assembled by ThuyaCS
HTML Elements
Structural Elements
<html>: The root element of an HTML document.
<head>: Contains meta-information about the document.
<body>: Contains the content of the document.
<header>: Defines a header for a document or section.
<footer>: Defines a footer for a document or section.
<main>: Specifies the main content of the document.
<section>: Defines a section in a document.
<article>: Defines an independent, self-contained content.
<aside>: Defines content aside from the content it is placed in.
<nav>: Defines navigation links.
<div>: Defines a division or section.
Text Elements
<h1> to <h6>: Headings from largest (<h1>) to smallest (<h6>).
<p>: Paragraph.
<span>: Inline container for text.
<a>: Anchor/link.
<strong>: Strong importance.
<em>: Emphasized text.
<b>: Bold text.
<i>: Italic text.
<u>: Underlined text.
List Elements
<ul>: Unordered list.
<ol>: Ordered list.
<li>: List item.
Table Elements
<table>: Table.
<tr>: Table row.
<th>: Table header cell.
<td>: Table data cell.
<thead>: Table head.
<tbody>: Table body.
<tfoot>: Table footer.
Form Elements
<form>: Form.
<input>: Input field.
o Types: text, password, submit, reset, radio, checkbox, button, number, email,
file, hidden, etc.
<textarea>: Multi-line text input.
<button>: Button.
<select>: Drop-down list.
<option>: Options within a <select>.
<label>: Label for form elements.
<fieldset>: Group related elements in a form.
<legend>: Caption for a <fieldset>.
Multimedia Elements
<img>: Image.
<audio>: Audio content.
<video>: Video content.
<source>: Specifies multiple media resources.
<track>: Text tracks for <video> and <audio>.
Semantic Elements
<mark>: Marked/highlighted text.
<small>: Smaller text.
<del>: Deleted text.
<ins>: Inserted text.
<cite>: Citation.
<q>: Short inline quotation.
<blockquote>: Block quotation.
Scripting Elements
<script>: JavaScript code.
<noscript>: Content to display if scripts are not supported.
<canvas>: Drawing graphics via scripting.
Self-closing elements (voids)
<area>: Defines an area inside an image map.
<base>: Specifies the base URL for all relative URLs in a document.
<br>: Inserts a single line break.
<col>: Specifies column properties for each column within a <colgroup> element.
<embed>: Embeds external content, such as a plugin.
<hr>: Defines a thematic break or horizontal rule.
<img>: Embeds an image.
<input>: Defines an input field.
<link>: Defines the relationship between the document and an external resource,
typically used for linking to stylesheets.
<meta>: Provides metadata about the HTML document.
<param>: Defines a parameter for an object element.
<source>: Specifies multiple media resources for media elements (<audio> and
<video>).
<track>: Specifies text tracks for media elements (<audio> and <video>).
<wbr>: Specifies a line break opportunity.
<command>: Defines a command that the user can invoke (Note: this element is now
obsolete).
CSS Properties
Text Properties
color: Text color.
font-family: Font family.
font-size: Font size.
font-weight: Font weight.
font-style: Font style.
text-align: Horizontal alignment of text.
text-decoration: Text decoration (e.g., underline, overline).
text-transform: Transform text case (uppercase, lowercase).
line-height: Line height.
Box Model Properties
width: Width of an element.
height: Height of an element.
padding: Space inside the border of an element.
o padding-top
o padding-right
o padding-bottom
o padding-left
margin: Space outside the border of an element.
o margin-top
o margin-right
o margin-bottom
o margin-left
border: Border around an element.
o border-width
o border-style
o border-color
box-sizing: Defines how the width and height of an element are calculated.
Background Properties
background-color: Background color.
background-image: Background image.
background-repeat: How background image repeats.
background-position: Position of background image.
background-size: Size of background image.
Layout Properties
display: Display type (e.g., block, inline, flex).
position: Positioning method (e.g., static, relative, absolute, fixed, sticky).
top, right, bottom, left: Offsets for positioned elements.
float: Float an element to the left or right.
clear: Control behavior of floating elements.
z-index: Stacking order of elements.
Flexbox Properties
display: flex: Defines a flex container.
flex-direction: Direction of flex items (row, column).
justify-content: Alignment along the main axis.
align-items: Alignment along the cross axis.
flex-wrap: Whether flex items should wrap.
flex-grow: How much a flex item will grow relative to the rest.
flex-shrink: How much a flex item will shrink relative to the rest.
flex-basis: Initial main size of a flex item.
Grid Properties
display: grid: Defines a grid container.
grid-template-columns: Defines the columns of the grid.
grid-template-rows: Defines the rows of the grid.
grid-column-gap: Gap between columns.
grid-row-gap: Gap between rows.
grid-template-areas: Defines grid template areas.
grid-area: Assigns an item to a named grid area.
Animation Properties
animation-name: Name of the animation.
animation-duration: Duration of the animation.
animation-timing-function: Timing function of the animation.
animation-delay: Delay before the animation starts.
animation-iteration-count: Number of times the animation should play.
animation-direction: Direction of the animation (normal, reverse, alternate).
Transition Properties
transition-property: Property to transition.
transition-duration: Duration of the transition.
transition-timing-function: Timing function of the transition.
transition-delay: Delay before the transition starts.
Pseudo-classes and Pseudo-elements
Pseudo-classes
:hover: Style when an element is hovered over.
:focus: Style when an element has focus.
:active: Style when an element is activated.
:nth-child(n): Style the nth child of a parent.
:first-child: Style the first child of a parent.
:last-child: Style the last child of a parent.
Pseudo-elements
::before: Insert content before an element.
::after: Insert content after an element.
::first-letter: Style the first letter of an element.
::first-line: Style the first line of an element.
CSS Properties for Precise Element Positioning and Styling
Margin: margin-top, margin-bottom, margin-left, margin-right
Padding: padding-top, padding-bottom, padding-left, padding-right
Border width: border-top-width, border-bottom-width, border-left-width,
border-right-width
Border color: border-top-color, border-bottom-color, border-left-color,
border-right-color
Border style: border-top-style, border-bottom-style, border-left-style,
border-right-style
Outline width: outline-width
Outline color: outline-color
Outline style: outline-style
Position: top, bottom, left, right
