Using Fonts and Colors - HTML

HTML 

HTML is like the skeleton of a human—without it, a website is just a pile of CSS flesh and JavaScript muscles flopping around shapelessly!

Typography and colors play a crucial role in web design. They can make text readable, stylish, and visually appealing. In HTML, fonts and colors are controlled using CSS properties like font-family, color, background-color, and more.

Changing Fonts with font-family

The font-family property allows you to set a specific font for text.

<p style="font-family: Arial, sans-serif;">This text is in Arial.</p>

Run Code on FunProgramming

Font Stack Strategy

Always use multiple font names (fallback fonts) to ensure compatibility across devices.

<p style="font-family: 'Times New Roman', Times, serif;">This text uses a font stack.</p>

Adjusting Font Size with font-size

You can set text size using different units like px, em, rem, or %.

<p style="font-size: 20px;">This is 20px text.</p>
<p style="font-size: 1.5em;">This is 1.5em text.</p>

Run Code on FunProgramming

Fun Fact

• em and rem are relative units and scale better for responsive designs!

Styling Text with font-style and font-weight

<p style="font-style: italic;">This text is italic.</p>
<p style="font-weight: bold;">This text is bold.</p>

Setting Text Color with color

Change text color using color names, HEX codes, RGB, or HSL.

<p style="color: red;">This is red text.</p>
<p style="color: #00ff00;">This is green text.</p>
<p style="color: rgb(0, 0, 255);">This is blue text.</p>

Run Code on FunProgramming

SEO Tip

Use high contrast between text and background for readability and accessibility.

Background Colors with background-color

Change the background color of text.

<p style="background-color: yellow;">Highlighted text.</p>

Run Code on FunProgramming

Combining Font and Color Styling

<p style="font-family: 'Courier New', monospace; font-size: 18px; color: purple; background-color: lightgray;">Styled text with font and color.</p>

Run Code on FunProgramming

Fun Facts About Fonts and Colors

1. Some fonts are web-safe (like Arial, Times New Roman, and Courier New), while others need to be loaded from Google Fonts.
2. The most readable color contrast is black text on a white background.
3. Comic Sans is... controversial. 

Conclusion

Using fonts and colors effectively enhances web design and user experience. Experiment with different styles to find the perfect look for your website!