HTML Styles

HTML by default is not very visually appealing. Styles help make content more attractive – allowing you to apply colors, sizes, fonts, and layout to elements.

Using inline styles

Inline styles are applied directly to a HTML element using the style attribute. This is a quick solution for individual elements but not recommended for larger projects.

Code Details

<p style="color: red;">This text is red.</p>

<h1 style="font-size: 40px;">Large Heading</h1>

Preview

This text is red.

Adding styles using the <style> tag

A <style> block inside the <head> section of an HTML document allows you to define internal CSS rules. This is useful when you want page-wide rules without creating a separate file.

Using external CSS files

The best practice is to organize styles in a separate file and load it with a <link> tag in the <head>. This makes your code cleaner and more reusable.

Commonly used CSS properties

The most commonly used CSS properties include text color (color), font size (font-size), font family (font-family), and text alignment (text-align). Mastering these basics allows for significant visual improvements.

Common mistakes when using styles

Don't use too many different styling methods on the same page. Remember that inline styles override external CSS, making maintenance harder. Always strive for simplicity and consistency.

When to use each method?

Use inline styles only for quick testing or in exceptional cases.
The <style> block is good when working with a single HTML file, for example for learning.
For serious projects, always use external CSS files.
Avoid mixed styling approaches – aim for consistency across the project.

Summary

Styles define how a webpage looks. Basic HTML elements can be styled inline, through embedded style blocks, or via external CSS files. Choosing the right method results in cleaner, more maintainable code.