• Hajipur, Bihar, 844101

☰
❮
❯

HTML

HTML5 Basics

HTML Styling and Design

HTML Links and Media

HTML Layout and Structure

HTML Forms

HTML Graphics

HTML APIs

HTML Advanced Topics

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.

HTML Styles Quiz

Q1: Which attribute is used to add inline styles in HTML?

A. css
B. style
C. format
D. design

Q2: What will this code '<p style="color: red;">Text</p>' do?

A. It makes the paragraph red
B. Adds a red background
C. Makes text italic
D. Does nothing

Q3: How do you set the background color using inline style?

A. background: yellow;
B. bgcolor="yellow"
C. background-color: yellow;
D. color="background: yellow;"

Q4: Which is correct to center-align a paragraph text?

A. text-style: center;
B. align: center;
C. text-align: center;
D. center-text: true;

Q5: What is the correct format for multiple styles?

A. style="color:blue font-size:18px"
B. style="color=blue; font-size=18px"
C. style="color: blue; font-size: 18px;"
D. style="blue, 18px"

Q6: Which property sets the text font in HTML inline style?

A. text-font
B. font-type
C. font-family
D. font-style

Q7: What unit is used for font-size in inline style?

A. px
B. cm
C. inches
D. degrees

Q8: Which color value is valid in HTML style?

A. #ff0000
B. red
C. rgb(255,0,0)
D. All of the above

Q9: Inline styling is best used for:

A. Entire website
B. Quick test or demo
C. Styling JavaScript
D. Adding links

Q10: What happens if you write style without quotes?

A. It won’t work correctly
B. Browser auto-corrects it
C. No impact
D. It works faster
← Previous Next →
Login
Go Back Top