<h1 class="main-title">HTML + CSS Cheatsheet & Customizations</h1>
<p>Before we start, you need an editor. <s>i tried to make the deredere code editor bearable but</s> i still
recommend using your own editor (for browsers: <a href="https://phcode.dev/">phoenixcode</a> is the most
like <a href="https://code.visualstudio.com/">vscode</a>, which if you have
space to download i recommend with these <a href="/vscodextensions">extensions</a>) instead. </p>
<p>More straightforward: <a href="/rentry-to-deremoe">turn your rentry into HTML</a></p>
<table class="cheatsheet-table">
<thead>
<tr>
<th>The Code</th>
<th>The Result</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<pre><code><h1>Header 1</h1>
<h2>Header 2</h2>
<h3>Header 3</h3></code></pre>
<p>Headings range from h1 to h6.</p>
</td>
<td>
<h1 style="margin:0;font-size:20px;">Header 1</h1>
<h2 style="margin:0;font-size:16px;">Header 2</h2>
<h3 style="margin:0;font-size:14px;">Header 3</h3>
</td>
</tr>
<tr>
<td>
<pre><code><div class="container">
<!-- Content goes here -->
</div>
<section class="main-content">
<!-- Semantic container -->
</section></code></pre>
<p>Containers group elements together. The div class name can be anything
(<code>.container</code>, <code>.box</code>, <code>.wrapper</code>, etc.) the browser
does not care what the name is. Classes are just labels you create to target elements
with CSS.</p>
<p style="margin-top: 6px;">Semantic HTML is good for screen readers; the standard
<code><div></code> has no inherent meaning to screen readers and acts purely as a
styling container.
</p>
</td>
<td>
<div style="border: 1px dashed #ccc; padding: 10px; background: #fafafa;">
<p>Container element grouping content layout together.</p>
</div>
</td>
</tr>
<tr>
<td>
<pre><code><p>This is <span class="pink">colored text</span>.</p></code></pre>
<p><span> is an inline container for text.</p>
</td>
<td>
<p>This is <span class="pink">colored text</span>.</p>
</td>
</tr>
<tr>
<td>
<pre><code><strong>Bold</strong>
<em>Italic</em>
<s>Strikeout</s>
<mark>Highlight</mark></code></pre>
</td>
<td>
<strong>Bold</strong><br>
<em>Italic</em><br>
<s>Strikeout</s><br>
<mark>Highlight</mark>
</td>
</tr>
<tr>
<td>
<pre><code>strong {
color: #hex;
}</code></pre>
<p>You can change the styling in bold, italic, strikeout, and highlight above.</p>
</td>
<td>
<p>Custom styling applied via CSS selectors.</p>
</td>
</tr>
<tr>
<td>
<pre><code><a href="https://example.com">Visit</a></code></pre>
</td>
<td>
<a href="#">Visit Website</a>
</td>
</tr>
<tr>
<td>
<pre><code><img src="image.png" width="80" height="80" alt=""></code></pre>
</td>
<td>
<img src="https://placehold.co/80x80" width="80" height="80" alt="example">
</td>
</tr>
<tr>
<td>
<pre><code>text-decoration: underline solid;
text-decoration: underline double;
text-decoration: underline dotted;
text-decoration: underline dashed;
text-decoration: underline wavy;
text-decoration: underline 3px;</code></pre>
</td>
<td>
<span class="underline-solid">Solid underline</span><br>
<span class="underline-double">Double underline</span><br>
<span class="underline-dotted">Dotted underline</span><br>
<span class="underline-dashed">Dashed underline</span><br>
<span class="underline-wavy">Wavy underline</span><br>
<span class="underline-thick">Thick underline</span>
</td>
</tr>
<tr>
<td>
<pre><code>border: 2px solid #333;
border: 2px dotted #333;
border: 2px dashed #333;
border: 4px double #333;</code></pre>
<p>1px to 100px but the higher the px is the more likely it could break/look weird.</p>
</td>
<td>
<div class="border-solid">Solid border container</div>
<div class="border-dotted">Dotted border container</div>
<div class="border-dashed">Dashed border container</div>
<div class="border-double">Double border container</div>
</td>
</tr>
<tr>
<td>
<pre><code><div class="Container">Custom Container</div>
.Container {
border: 1px solid black;
padding: 8px;
background: #808080;
color: white;
border-radius: 6px;
}</code></pre>
<p>Customize your container class with borders, padding, colors, and border-radius.</p>
</td>
<td>
<div class="Container">Custom Container</div>
</td>
</tr>
<tr>
<td>
<pre><code><div class="bg-image-box">Image Background</div>
.bg-image-box {
border: 1px solid black;
padding: 12px;
background-image: url('image.jpg');
background-size: cover;
background-position: top center;
color: white;
}</code></pre>
<p>Add a background image using <code>background-image: url(...)</code> along with cover and
position properties.</p>
</td>
<td>
<div class="bg-image-box">
<p style="color:white;">The height is 100px & the positioning is 'top center' if you
wanted to know. I just increased it to show off this cute wallpaper.</p>
</div>
</td>
</tr>
<tr>
<td>
<pre><code>.spoiler {
background: #222;
color: transparent;
transition: 0.3s;
}
.spoiler:hover {
color: white;
}</code></pre>
</td>
<td>
<span class="spoiler">Hover to reveal secret text!</span>
</td>
</tr>
<tr>
<td>
<pre><code>.gradient-text {
background: linear-gradient(45deg, pink, hotpink);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}</code></pre>
</td>
<td>
<span class="gradient-text">Gradient Text</span>
</td>
</tr>
<tr>
<td>
<pre><code><!-- HTML comment -->
/* CSS comment */</code></pre>
</td>
<td>
<p>Comments are hidden notes, nobody will see this unless they peek at your code.</p>
</td>
</tr>
<tr>
<td>
<pre><code><blockquote>Quote here</blockquote></code></pre>
</td>
<td>
<blockquote>This is a quote.</blockquote>
</td>
</tr>
</tbody>
</table>
<p>more resources: <a href="https://www.w3schools.com/">w3schools</a>
<a href="https://htmlcheatsheet.com/css/">interactive CSS</a> <a href="https://htmlcheatsheet.com/">interactive
HTML</a>
<a href="https://loveberry.nekoweb.org/">loveberry.neocities.org</a> <a
href="https://scripted.neocities.org/">scripted.neocities.org</a>
<!-- <a href="#">deredere resources</a> -->
</p>
</div>
.main-title {
text-align: center;
font-size: 24px;
margin-bottom: 20px;
margin-top: 0;
}
.cheatsheet-table {
width: 100%;
border-collapse: collapse;
}
.cheatsheet-table th {
padding: 8px;
border-bottom: 2px solid #ddd;
font-size: 13px;
}
.cheatsheet-table td {
padding: 10px;
vertical-align: top;
border-bottom: 1px solid #eee;
width: 50%;
}
.cheatsheet-table td:first-child {
border-right: 1px solid #eee;
}
pre {
background: #f6f8fa;
padding: 8px;
margin: 0 0 6px 0;
overflow-x: auto;
border-radius: 6px;
}
code {
font-family: monospace;
font-size: 12px;
}
p {
margin: 0;
}
.pink {
color: #ff69b4;
}
.mark {
background: yellow;
}
.spoiler {
background: #222;
padding: 2px 5px;
border-radius: 2px;
color: transparent;
transition: 0.3s;
}
.spoiler:hover {
color: white;
}
.underline-solid {
text-decoration: underline solid;
}
.underline-double {
text-decoration: underline double;
}
.underline-dotted {
text-decoration: underline dotted;
}
.underline-dashed {
text-decoration: underline dashed;
}
.underline-wavy {
text-decoration: underline wavy;
}
.underline-thick {
text-decoration: underline 3px;
}
.border-solid {
border: 2px solid #333;
padding: 8px;
margin-bottom: 6px;
}
.border-dotted {
border: 2px dotted #333;
padding: 8px;
margin-bottom: 6px;
}
.border-dashed {
border: 2px dashed #333;
padding: 8px;
margin-bottom: 6px;
}
.border-double {
border: 4px double #333;
padding: 8px;
margin-bottom: 6px;
}
.glow {
text-shadow: 0 0 8px #ff00de;
}
.neon {
color: #fff;
text-shadow: 0 0 5px #00f, 0 0 10px #00f, 0 0 20px #00f;
background: #111;
padding: 2px 6px;
border-radius: 4px;
}
.gradient-text {
background: linear-gradient(45deg, pink, hotpink);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-weight: bold;
}
.Container {
border: 1px solid black;
padding: 8px;
background: #808080;
color: white;
border-radius: 6px;
margin-bottom: 6px;
}
.bg-image-box {
border: 1px solid black;
padding: 12px;
background-image: url('https://file.garden/ad6N8KJMmVnp7wKU/web/wp7981854.jpg');
background-size: cover;
background-position: top center;
color: #222;
border-radius: 6px;
margin-bottom: 6px;
height: 100px;
}