HTML Cheat Sheet: Font
Color, Font Size, Background Color, and Font Type
1. Font Color
Change text color using the color property in the style attribute:
<p style="color: red;">This is red text.</p>
<p style="color: #00FF00;">This is green text.</p>
You can use color names, HEX codes, or RGB values[1][2][3][4].
2. Font Size
Set the font size using the font-size property:
<p style="font-size: 24px;">This is 24px text.</p>
<p style="font-size: 150%;">This is 150% sized text.</p>
Font sizes can be in px, pt, em, rem, or percentage values [1][3][4].
3. Background Color
Change the background color of the whole page or a specific element:
<body style="background-color: lightblue;">
<h1>This is a heading</h1>
</body>
<p style="background-color: yellow;">This paragraph has a yellow background.</p>
You can use color names, HEX codes, or RGB values[5][2].
4. Font Type (Font Family)
Set the font type using the font-family property. Always provide a generic fallback:
<p style="font-family: Arial, sans-serif;">This is Arial font.</p>
<p style="font-family: 'Times New Roman', serif;">This is Times New Roman font.</p>
<p style="font-family: 'Courier New', monospace;">This is Courier New font.</p>
If the font name has spaces, use quotes[6][5][3][7].
5. Combined Example
All properties together in a single HTML file:
<!DOCTYPE html>
<html>
<head>
<title>HTML Style Cheat Sheet</title>
</head>
<body style="background-color: #f0f8ff;">
<h1 style="color: #ff4500; font-size: 300%; font-family: Arial, sans-serif;">
Big Orange Arial Heading
</h1>
<p style="color: blue; font-size: 120%; font-family: 'Times New Roman', serif;">
This is a blue paragraph in Times New Roman with larger text.
</p>
<p style="background-color: yellow; font-family: 'Courier New', monospace;">
This paragraph has a yellow background and Courier New font.
</p>
</body>
</html>
This example demonstrates how to combine font color, size, background color, and font type using only
HTML and inline styles[1][3][4].
Quick Reference Table
Task HTML Example
Font Color <p style="color: red;">Text</p>
Font Size <p style="font-size: 20px;">Text</p>
Background Color <body style="background-color: pink;">...</body>
Font Type <p style="font-family: Arial, sans-serif;">Text</p>
Tips
Avoid deprecated tags like <font> for modern web development[8].
Use the style attribute for quick, inline styling.
Always include a generic font family as a fallback for best browser compatibility
can you please generate a cheat sheet for me for
Basic HTML code.No CSS or javascript.only HTML
code
Certainly! Here's a clean and simple Basic HTML Code Cheat Sheet for quick reference. It
includes essential HTML tags and their usage - no CSS or JavaScript - perfect for your studies
or quick copy-paste into a PDF.
Basic HTML Code Cheat Sheet
HTML Document Structure
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Page Title</title>
</head>
<body>
<!-- Your content goes here -->
</body>
</html>
Common HTML Tags
Tag Description Example
<html> Root element of an HTML document <html> ... </html>
<head> Contains meta information and title <head> ... </head>
<title> Sets the title of the page (shown in browser tab) <title>My Page</title>
<meta> Metadata (charset, author, viewport, etc.) <meta charset="UTF-8">
<body> Contains the visible content <body> ... </body>
Text Formatting Tags
Tag Description Example
<h1> to <h6> Headings (h1 = largest, h6 = smallest) <h1>Main Heading</h1>
<p> Paragraph <p>This is a paragraph.</p>
<br> Line break (no closing tag) Line 1<br>Line 2
<hr> Horizontal rule (line) (no closing tag) <hr>
<strong> Important text (bold) <strong>Bold Text</strong>
<em> Emphasized text (italic) <em>Italic Text</em>
<u> Underlined text <u>Underlined Text</u>
<small> Smaller text size <small>Small Text</small>
<mark> Highlighted text <mark>Highlighted Text</mark>
Lists
Ordered List (numbered):
<ol>
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ol>
Unordered List (bulleted):
<ul>
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ul>
Definition List:
<dl>
<dt>Term</dt>
<dd>Definition of the term.</dd>
</dl>
Links and Images
Tag Description Example
<a> Hyperlink <a href="https://example.com">Link</a>
<img> Image (self-closing) <img src="image.jpg" alt="Description">
Tables
<table>
<thead>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>Row 1, Cell 1</td>
<td>Row 1, Cell 2</td>
</tr>
<tr>
<td>Row 2, Cell 1</td>
<td>Row 2, Cell 2</td>
</tr>
</tbody>
</table>
Forms (Basic)
<form action="/submit" method="post">
<label for="name">Name:</label>
<input type="text" id="name" name="name" required>
<label for="email">Email:</label>
<input type="email" id="email" name="email">
<input type="submit" value="Submit">
</form>
Semantic Elements
Tag Description Example
<header> Introductory content or navigation <header><h1>Site Title</h1></header>
<nav> Navigation links <nav><a href="#">Home</a></nav>
Tag Description Example
<main> Main content of the document <main><p>Main content here</p></main>
<section><h2>Section Title</h2>
<section> Thematic grouping of content
</section>
<article><h2>Article Title</h2>
<article> Independent, self-contained content
</article>
Content aside from main content
<aside> <aside><p>Sidebar info</p></aside>
(sidebar)
<footer><p>© 2025 My Website</p>
<footer> Footer content
</footer>
Special Characters (Entities)
Character Entity Code Example
& & & → &
< < < → <
> > > → >
" (double quote) " " → "
' (apostrophe) ' ' → '
Non-breaking space → (space)
Comments
<!-- This is a comment and will not be displayed in the browser -->
Feel free to copy-paste this cheat sheet into your PDF or notes. Let me know if you want me to
include more advanced HTML tags or examples!
