Home Tutorials Videos Q&A MCQ Exercises Appointment Login
Lesson 14 of 21 – HTML Styles
67%

HTML Styles

HTML styles are used to change the appearance of HTML elements. Using styles, you can control colors, fonts, sizes, alignment, spacing, and much more.

Definition: The style attribute is used to add CSS styles directly to an HTML element.

The HTML Style Attribute

The style attribute allows you to apply CSS properties directly inside an HTML tag.

Example 
<p style="color:red;">
Welcome to Soopro Pathshala
</p>

Background Color

The CSS background-color property defines the background color of an HTML element.

Example 
<body style="background-color:skyblue;">
<h1>This is Heading</h1>
</body>

Text Color

The CSS color property changes the text color.

Example 
<h2 style="color:red;">
Welcome to Soopro Pathshala
</h2>

Fonts

The CSS font-family property specifies the font style of text.

Example 
<p style="font-family:Verdana;">
This is my paragraph
</p>

Text Size

The CSS font-size property defines the size of text.

Example 
<p style="font-size:160%;">
This is a paragraph.
</p>

Text Alignment

The CSS text-align property controls horizontal alignment.

Example 
<h1 style="text-align:center;">
Centered Heading
</h1>

Key Points About HTML Styles

  • Inline CSS: Style applied directly using the style attribute.
  • Internal CSS: Defined inside the <style> tag.
  • External CSS: Stored in a separate CSS file.
  • Selectors: Element, class and ID selectors.
  • Box Model: Content, padding, border and margin.
  • Responsive Design: Makes websites mobile friendly.
  • Flexbox & Grid: Modern layout systems.
  • Typography: Controls fonts and readability.
  • Colors & Backgrounds: Improve appearance.
  • Animations: Add visual effects.

🧠 Quiz

Which attribute is used for inline CSS?



← Previous Next →