In HTML, the word “Style” means how your webpage looks and feels. HTML styles are used to change the appearance of web elements such as color, font, background, spacing, and alignment.
By using styles, you can make your webpage more attractive, readable, and professional.
HTML styles are mostly defined using the style attribute or through CSS (Cascading Style Sheets).
The style attribute is used inside any HTML tag to apply CSS properties directly to that element.
Example:
<p style="color:blue;">This is a blue paragraph.</p>- style – Attribute name
- color:blue; – CSS property and its value
Why Use Styles in HTML?
Without styles, your web pages look plain and boring. Styles make your webpage look beautiful, consistent, and modern.
You can control:
- Text color and font
- Background color
- Size and spacing
- Borders and alignment
- Layout and positioning
Types of HTML Styles
HTML supports three main ways to apply styles:
1. Inline CSS
You can add styles directly inside an HTML tag using the style attribute. This is called inline styling.
Example:
<p style="color:red; font-size:18px;">This is an inline styled paragraph.</p>- Used for quick styling or small design changes.
- Not recommended for large projects because it’s hard to maintain.
2. Internal CSS
You can write CSS code inside the <style> tag within the <head> section of your HTML document. This method applies styles to multiple elements on the same page.
Example:
<!DOCTYPE html>
<html>
<head>
<style>
p {
color: green;
font-size: 18px;
}
</style>
</head>
<body>
<p>This is an internally styled paragraph.</p>
<p>This paragraph will also be green.</p>
</body>
</html>- Good for single-page styling.
- Not suitable when your website has many pages.
3. External CSS
This is the most powerful and professional way to apply styles. You create a separate .css file and link it to your HTML page using the <link> tag.
Example:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<p>This paragraph is styled using an external CSS file.</p>
</body>
</html>style.css
p {
color: purple;
font-size: 20px;
}- Easy to maintain and apply same style across multiple pages.
- Best for large and professional websites.
Example – Inline Style with Multiple Properties
You can add multiple CSS properties inside one style attribute by separating them with semicolons ;.
<p style="color:blue; font-size:18px; text-align:center; background-color:#f0f0f0;">
This paragraph has multiple styles applied.
</p>A centered paragraph with blue text, gray background, and larger font.
Example – Using Styles for Headings and Paragraphs
<!DOCTYPE html>
<html>
<head>
<title>HTML Styles Example</title>
</head>
<body>
<h1 style="color:tomato;">This is a Red Heading</h1>
<p style="color:gray; font-size:18px;">
HTML styles help make your webpage look more attractive and easy to read.
</p>
<p style="background-color:lightyellow; padding:10px;">
You can change text color, background, font, and spacing easily using the style attribute.
</p>
</body>
</html>Styling the Body (Global Style)
You can apply styles to the entire webpage by styling the <body> tag.
<body style="background-color:beige; font-family:Arial; color:#333;">
<h2>Welcome to My Styled Webpage</h2>
<p>This page uses body-level styling to apply colors and fonts globally.</p>
</body>The background, font, and color will apply to the entire page content.