What Are HTML Styles? #
HTML styles are rules you apply to change the appearance of your webpage elements—such as colors, fonts, borders, and layouts.
To style HTML, you use CSS (Cascading Style Sheets), either inside the HTML file or in a separate stylesheet.
Different Ways to Use Styles in HTML #
You can add CSS styling to HTML in three main ways:
- Inline CSS: Directly in the HTML tag using the
styleattribute (for single elements). - Internal CSS: Inside a
<style>tag, within the<head>section (for the whole page). - External CSS: In a separate
.cssfile, linked with the<link>tag (best for multiple pages).
In this guide, we’ll focus on inline styles for quick, practical understanding.
Inline CSS (Style Attribute) with Examples #
Inline CSS uses the style attribute to apply design directly to a single HTML element.
The syntax is:
<tag style="property: value; property2: value2;">Content</tag>
- The property is what you want to style (like
color,font-size, orbackground-color). - The value is how you want it to look (like
red,18px, oryellow).
Example 1: Coloring Text #
<p style="color: blue; font-size: 20px;">This is a blue, large paragraph.</p>
This paragraph will show up in blue and be larger in size.
Example 2: Styling Headings #
<h1 style="text-align: center; color: green;">Centered Green Heading</h1>
Example 3: Adding Borders and Backgrounds #
<div style="background-color: #f0f0f0; border: 2px solid black; padding: 10px;">
This box has a grey background and a border.
</div>
You can use multiple properties inside one style attribute—just separate them with semicolons.
Internal and External CSS (Overview) #
Internal CSS is written inside <style> tags in the <head> section and applies to the whole page.
External CSS is saved in a .css file and linked to many HTML pages. This is better for big websites.
Best Practices for Styling #
Use Inline CSS only for quick, unique changes (not for the whole page).
Prefer external CSS files for larger projects—this keeps your code clean and easy to update.
Inline styles have higher specificity and will override styles from external stylesheets unless !important is used.
Accessibility tip: Always keep styles readable, with good color contrast.
Practical Examples of HTML Styles #
Changing Font Family
<p style="font-family: Arial, Helvetica, sans-serif;">This text uses Arial font.</p>
Adding a Tooltip
<p style="color: orange;" title="Important Note">Mouse over this text to see the tooltip.</p>
Making a Button Stand Out
<button style="background-color: green; color: white; padding: 8px 16px;">
Click Me
</button>
Centering Text
<div style="text-align: center;">Centered Content</div>
This centers your content within the element.
Summary #
- HTML styles let you control the look and feel of your web pages.
- The
styleattribute is a fast way to apply CSS directly to an element for one-off styling. - For bigger projects, internal or external CSS is best for flexibility and easier updates.
- Practice by changing colors, fonts, and layouts with the
styleattribute in your own HTML pages.
