• +91-9142290450

  • Hajipur, Bihar, 844101

☰
❮
❯

HTML Styles

← Previous Next →

🔹 What are HTML Styles?

HTML styles are used to add formatting and visual appearance (like color, font, size, background) to HTML elements. The most common way to apply styles is using the style attribute directly inside an HTML tag.

👉 Syntax:
<tagname style="property: value;">Content</tagname>
Example:
<p style="color: red;">This is red text.</p>

🔹 Common Style Properties

Property Description Example Value
color Text color red, blue, #ff0000
font-size Size of the text 14px, 1.2em
background-color Background color yellow, #f0f0f0
text-align Text alignment left, center, right
font-family Font type Arial, "Times New Roman"
border Adds a border 1px solid black

🔹 Examples

1. Text Color
<p style="color: green;">This text is green.</p>
2. Font Size
<p style="font-size: 20px;">This is larger text.</p>
3. Background Color
<p style="background-color: lightblue;">This has a background color.</p>
4. Text Alignment
<p style="text-align: center;">This text is centered.</p>
5. Multiple Styles

You can apply multiple styles by separating them with semicolons:

<p style="color: blue; font-size: 18px; text-align: right;">
  Styled paragraph.
</p>
🔹 Inline Style vs CSS

  • Inline style: style="..." inside an HTML tag

  • CSS (better for large projects) is written in <style> or external .css files

Inline style is quick, but not preferred for big projects.

Practice Questions

Q1. Write a paragraph with text color set to red using the style attribute.

Q2. Display a heading with font size 30px.

Q3. Add a background color of yellow to a <div>.

Q4. Center-align a paragraph using inline styles.

Q5. Use font-family to change paragraph text to Arial.

Q6. Add a border to a heading using inline style.

Q7. Write a paragraph with multiple styles: color blue, font-size 18px, and text-align right.

Q8. Create three differently styled paragraphs using style attribute.

Q9. Add background color and text color to a single line of text.

Q10. Make a <p> tag appear with green color, 20px size, and bold text.

← Previous Next →

HTML

online coding class codepractice

HTML5 Basics

HTML Styling and Design

HTML Links and Media

HTML Layout and Structure

HTML Forms

HTML Graphics

HTML APIs

HTML Advanced Topics

codepractice logo
Login
Go Back Top