HTML Styles
HTML styles are used to control the appearance of HTML elements. Styles define how text, colors, spacing, and layout look on a web page. In HTML, styling is commonly done using CSS (Cascading Style Sheets).
Inline Styles
Inline styles are written directly inside an HTML element using the
style attribute. Inline styles affect only the element
where they are applied.
This paragraph uses an inline style to change the text color.
This paragraph has both color and font size applied using inline styles.
Common CSS Style Properties
CSS is used to control the appearance of HTML elements. These properties help you change text color, size, background, alignment, and font style.
- color – Changes the text color
- background-color – Sets the background color
- font-size – Controls text size
- font-family – Changes the font style
- text-align – Aligns the text
Text Color
The color property is used to change the text color of an element.
<h1 style="color:red;">This is a heading</h1> <p style="color:green;">This is a paragraph</p>Try this code
Background Color
The background-color property sets the background color of an element.
<h1 style="background-color:powderblue;">This is a heading</h1> <p style="background-color:tomato;">This is a paragraph</p>Try this code
Font Size
The font-size property controls how large or small the text appears.
<h1 style="font-size:320%;">This is a heading</h1> <p style="font-size:150%;">This is a paragraph</p>Try this code
Font Family
The font-family property defines which font style is used to display the text.
<h1 style="font-family:fantasy;">This is a heading</h1> <p style="font-family:verdana;">This is a paragraph</p>Try this code
Text Alignment
The text-align property specifies how the text is aligned horizontally (left, center, right, or justify).
<h1 style="text-align:center;">This is a heading</h1> <p style="text-align:center;">This is a paragraph</p>Try this code
Using Multiple Styles
This paragraph uses multiple style properties together.
Why HTML Styles Are Important
- They improve the visual appearance of web pages
- They help create a better user experience
- They make content easier to read and understand
- They allow consistent design across pages
Best Practices for HTML Styles
- Use CSS instead of inline styles whenever possible
- Keep styles consistent across the website
- Use meaningful colors and readable font sizes
- Separate content (HTML) from design (CSS)
Common Mistakes with HTML Styles
- Using too many inline styles
- Choosing unreadable colors or fonts
- Applying styles directly instead of using CSS files
- Ignoring responsive design