Scribd
Upload
31 views7 pages

HTML & CSS Quick Reference Guide

The document provides a comprehensive HTML cheat sheet covering font color, size, background color, and font type, along with examples of each. It also includes a basic HTML code structure, common HTML tags, text formatting tags, lists, links, images, tables, forms, semantic elements, special characters, and comments. This cheat sheet serves as a quick reference for essential HTML coding without CSS or JavaScript.

Uploaded by

nhlamulosihlangu72
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
31 views7 pages

HTML & CSS Quick Reference Guide

The document provides a comprehensive HTML cheat sheet covering font color, size, background color, and font type, along with examples of each. It also includes a basic HTML code structure, common HTML tags, text formatting tags, lists, links, images, tables, forms, semantic elements, special characters, and comments. This cheat sheet serves as a quick reference for essential HTML coding without CSS or JavaScript.

Uploaded by

nhlamulosihlangu72
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd

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 [Link] CSS or [Link] 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="[Link]

<img> Image (self-closing) <img src="[Link]" 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

& &amp; &amp; → &

< &lt; &lt; → <

> &gt; &gt; → >

" (double quote) &quot; &quot; → "

' (apostrophe) &apos; &apos; → '

Non-breaking space &nbsp; &nbsp; → (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!

Common questions

Powered by AI

Using color names in HTML styling can simplify the design process, as they are easier to remember and type for common colors like 'red' or 'blue'. However, HEX codes offer greater precision and a broader range of possibilities, as they allow designers to specify exact color shades. This precision is crucial for branding and visual consistency in professional designs . Color names may suffice for simpler projects with less emphasis on exact hues.

Using inline styles in HTML documents can lead to poorer readability and maintainability. This is because having styles directly in the HTML tags can make the code bulkier and harder to read, especially for larger projects. Inline styles also violate the principle of separating content from presentation. By contrast, external CSS files centralize style management, allowing for easier updates and consistency across multiple pages .

Improper use of HTML forms, like failing to validate inputs or not protecting data, can lead to vulnerabilities such as SQL injection and cross-site scripting (XSS). Mitigation involves using input validation, HTML escaping, and secure transmission protocols (HTTPS). Server-side validation complements client-side methods to provide an additional layer of protection . Additionally, using attributes like 'novalidate' should be avoided for forms requiring critical data handling.

Fallback font families ensure that if a preferred font is unavailable on a user's device, a substitute font from the same family type can be used. This practice maintains the intended design appearance and readability across different devices and browsers, enhancing user experience. Fallbacks are crucial for providing compatibility and avoiding reliance on specific fonts that may not be universally supported .

Using percentage values for font-size is more advantageous in responsive design where text size needs to scale proportionally with its container or viewport size. This approach ensures better adaptability across different devices and screen sizes, maintaining readability and consistency in design . Pixel values, being absolute, do not offer this flexibility, potentially causing layout issues on varying screen dimensions.

HTML semantic elements, such as <header>, <footer>, <article>, and <section>, provide clearer structure and meaning to a webpage, improving accessibility and SEO because search engines better understand the content . However, reliance on semantic elements may require additional CSS for stylistic customization, and legacy browsers may not fully support all semantic tags without polyfills, potentially increasing development complexity.

Self-closing tags like <img> streamline HTML code by eliminating the need for a closing tag, which aligns with clean code practices and HTML5 standards. Their use allows the inclusion of images without wrapping unnecessary content, enhancing code efficiency and readability. However, developers must ensure accurate attribute specifications to prevent display issues . This practice supports decluttered and syntax-correct development environments.

Comments in HTML documents play a vital role in collaborative development by providing explanations or notes that are invisible to end users but informative for developers. This practice aids readability, reduces misunderstandings, and facilitates onboarding of new team members. However, excessive comments can clutter code, so it's important to balance clarity and brevity . Effective comments contribute to more manageable and maintainable code bases.

Providing multiple methods for text formatting, like <strong> for bold and <em> for italics, allows for rich text presentation catering to varying emphases and stylistic preferences. These options support semantic emphasis, enhance readability, and deliver diverse visual hierarchy, elevating both aesthetic and functional attributes of content . Diverse text formatting ensures that content aligns with both design intents and content importance.

Semantic elements, such as <article> and <aside>, enhance web accessibility by providing meaningful structure that assistive technologies like screen readers can easily interpret. They help users understand the logical setup of content, such as distinguishing sections, articles, and navigational components, which improves navigation and usability for visually impaired users . As a result, using semantic elements fosters an inclusive internet experience.

You might also like