Is 123 Toolbox free to use?

Yes. Every tool on 123 Toolbox is free and runs directly in your browser — no account or payment required.

Are my files uploaded to a server?

No. Files and text are processed locally in your browser and are not uploaded by 123 Toolbox, except for a few tools that clearly depend on an external resource.

What kinds of tools are available?

123 Toolbox includes hundreds of tools for PDFs, images, developers, designers, Khmer language, geospatial data, security, math, and everyday work.

Which languages does 123 Toolbox support?

The interface supports English, Khmer, and a bilingual English–Khmer mode.

How do I use HTML & CSS Cheat Sheet?

Browse the HTML5 and CSS reference groups Click copy on any snippet Paste it into your code

Is HTML & CSS Cheat Sheet free to use?

Yes. HTML & CSS Cheat Sheet on 123 Toolbox is free and runs directly in your browser — no account or payment required.

Do I need to install anything to use HTML & CSS Cheat Sheet?

No installation is required. It runs in a modern web browser and processes your input locally on your device.

Is HTML & CSS Cheat Sheet available in Khmer?

Yes. The 123 Toolbox interface supports English, Khmer, and a bilingual English–Khmer mode.

All tools / ឧបករណ៍ទាំងអស់HTML & CSS Cheat Sheet — សន្លឹកយោង HTML និង CSS

HTML & CSS Cheat Sheet

សន្លឹកយោង HTML និង CSS

Quick reference for core HTML5 tags, attributes, and semantic elements, plus CSS selectors, the box model, flexbox, grid, and common properties — each with a copyable example. / ឯកសារយោងរហ័សសម្រាប់ស្លាក HTML5 មូលដ្ឋាន គុណលក្ខណៈ និងធាតុ semantic ព្រមទាំងអ្នកជ្រើសរើស CSS គំរូប្រអប់ flexbox grid និងលក្ខណៈទូទៅ — នីមួយៗមានឧទាហរណ៍ដែលអាចចម្លងបាន។

HTML5 core tags / ស្លាក HTML5 មូលដ្ឋាន

Document skeleton / គ្រោងឯកសារ

<!DOCTYPE html>
<html>
<head>
  <title>Page title</title>
</head>
<body>
  Content
</body>
</html>

Meta charset / Meta តួអក្សរ

<meta charset="UTF-8">

Link a stylesheet / ភ្ជាប់សន្លឹករចនាប័ទ្ម

<link rel="stylesheet" href="style.css">

Link a script / ភ្ជាប់ស្គ្រីប

<script src="app.js"></script>

Headings / ចំណងជើង

<h1>Largest</h1>
<h2>Section</h2>
<h3>Subsection</h3>

Paragraph / កថាខណ្ឌ

<p>Text paragraph.</p>

Link / តំណ

<a href="https://example.com">Link text</a>

Image / រូបភាព

<img src="photo.jpg" alt="Description">

Lists / បញ្ជី

<ul>
  <li>Item</li>
</ul>
<ol>
  <li>First</li>
</ol>

Table / តារាង

<table>
  <tr>
    <th>Name</th>
  </tr>
  <tr>
    <td>Value</td>
  </tr>
</table>

Form controls / ធាតុបញ្ចូលក្នុងទម្រង់

<form action="/submit">
  <input type="text" name="name">
  <button type="submit">Send</button>
</form>

Generic blocks & inline / ធាតុទូទៅ block និង inline

<div>Block container</div>
<span>Inline text</span>

Attributes / គុណលក្ខណៈ (Attributes)

id — unique identifier / id — លេខសម្គាល់តែមួយ

<div id="header">…</div>

class — style hook / class — សម្រាប់រចនាប័ទ្ម

<p class="note">…</p>

Inline style / រចនាប័ទ្មក្នុងបន្ទាត់

<p style="color: red;">…</p>

lang — language / lang — ភាសា

<html lang="km">

data-* custom attributes / data-* គុណលក្ខណៈផ្ទាល់ខ្លួន

<button data-id="42">…</button>

Open link in new tab / បើកតំណក្នុងផ្ទាំងថ្មី

<a href="…" target="_blank" rel="noopener">…</a>

Semantic tags / ស្លាកអត្ថន័យ (Semantic)

Page layout skeleton / គ្រោងប្លង់ទំព័រ

<header>Logo & nav</header>
<nav>Menu</nav>
<main>
  <article>Content</article>
  <aside>Sidebar</aside>
</main>
<footer>Copyright</footer>

Figure with caption / រូបភាពជាមួយចំណងជើង

<figure>
  <img src="…" alt="…">
  <figcaption>Caption</figcaption>
</figure>

Time & highlight / ពេលវេលា និងបន្លិច

<time datetime="2025-01-01">Jan 1</time>
<mark>highlighted</mark>

Section with heading / ផ្នែកជាមួយចំណងជើង

<section>
  <h2>Heading</h2>
  <p>Body text.</p>
</section>

CSS selectors / អ្នកជ្រើសរើស CSS

Element, class, id / ធាតុ class និង id

p { }
.note { }
#header { }

Descendant & child / កូនចៅ (descendant) និងកូន (child)

div p { }       /* any <p> inside <div> */
div > p { }      /* direct child only */

Adjacent sibling / បងប្អូនជាប់គ្នា

h2 + p { }      /* <p> right after <h2> */

Attribute selector / អ្នកជ្រើសរើសតាមគុណលក្ខណៈ

input[type="text"] { }

Pseudo-classes / Pseudo-class

a:hover { }
li:first-child { }
li:nth-child(2n) { }

Pseudo-elements / Pseudo-element

p::before { content: "→ "; }
p::after { content: " ←"; }

Box model / គំរូប្រអប់ (Box model)

The box / ប្រអប់

.box {
  margin: 10px;      /* space outside */
  border: 1px solid #ccc;
  padding: 12px;      /* space inside */
  width: 200px;
}

Border-box sizing / កំណត់ទំហំតាម border-box

* {
  box-sizing: border-box;
}

Flexbox

Basic flex row / Flex បន្ទាត់មូលដ្ឋាន

.row {
  display: flex;
  justify-content: space-between; /* main axis */
  align-items: center;            /* cross axis */
  gap: 8px;
}

Column direction & wrap / ទិសដៅជួរឈរ និងរុំបន្ទាត់

.col {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}

Grow or shrink an item / ពង្រីក ឬបង្រួមធាតុ

.item {
  flex: 1;            /* grow equally */
  flex: 0 0 auto;     /* keep natural size */
}

CSS Grid

Basic grid / Grid មូលដ្ឋាន

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 12px;
}

Named tracks & spans / ជួរឈរឈ្មោះ និងការលាត

.grid {
  grid-template-columns: 200px 1fr;
}
.sidebar { grid-column: 1; }
.content  { grid-column: 2; }

Centering with place-items / ដាក់កណ្ដាលជាមួយ place-items

.center {
  display: grid;
  place-items: center;
}

Common properties / លក្ខណៈទូទៅ

Text styling / រចនាប័ទ្មអក្សរ

p {
  color: #222;
  font-size: 16px;
  font-family: system-ui, sans-serif;
  line-height: 1.6;
  text-align: justify;
}

Positioning / ការកំណត់ទីតាំង

.fixed {
  position: fixed;
  top: 0;
  z-index: 10;
}
.relative { position: relative; }
.absolute { position: absolute; }

Rounded corners & shadow / ជ្រុងមូល និងស្រមោល

.card {
  border-radius: 8px;
  box-shadow: 0 2px 6px rgb(0 0 0 / 0.15);
  overflow: hidden;
}

Hover transition / ការផ្លាស់ប្ដូរពេល hover

button {
  transition: background 0.2s ease;
}
button:hover {
  background: #e0b400;
}

Responsive media query / Media query ឆ្លើយតប

@media (max-width: 600px) {
  .grid { grid-template-columns: 1fr; }
}

Hide / show overflow / លាក់ ឬបង្ហាញ overflow

.hidden { display: none; }
.scroll { overflow-x: auto; }

Curated reference — always check the official HTML and CSS specifications for details. / ជាសន្លឹកយោងដកស្រង់ — សូមពិនិត្យលក្ខណៈបច្ចេកទេសផ្លូវការរបស់ HTML និង CSS សម្រាប់ព័ត៌មានលម្អិត។

Loading…

Frequently asked questions / សំណួរដែលសួរញឹកញាប់

A practical HTML5 and CSS reference with tags, attributes, selectors, flexbox, grid, and examples. / ឯកសារយោង HTML5 និង CSS អនុវត្តជាក់ស្តែង ជាមួយ tags, attributes, selectors, flexbox, grid និងឧទាហរណ៍។

Next recommended tools / ឧបករណ៍ណែនាំបន្ទាប់

Git Cheat Sheet — សន្លឹកយោង GitShares a category or workflow / មានប្រភេទ ឬលំហូរការងារដូចគ្នា Linux Command Cheat Sheet — សន្លឹកយោង LinuxShares a category or workflow / មានប្រភេទ ឬលំហូរការងារដូចគ្នា SQL Cheat Sheet — សន្លឹកយោង SQLShares a category or workflow / មានប្រភេទ ឬលំហូរការងារដូចគ្នា Markdown Cheat Sheet — សន្លឹកយោង MarkdownShares a category or workflow / មានប្រភេទ ឬលំហូរការងារដូចគ្នា Country Dialing Codes — លេខកូដទូរស័ព្ទអន្តរជាតិShares a category or workflow / មានប្រភេទ ឬលំហូរការងារដូចគ្នា Currency Codes (ISO 4217) — លេខកូដរូបិយប័ណ្ណShares a category or workflow / មានប្រភេទ ឬលំហូរការងារដូចគ្នា