HTML Tutorial

HTML Home
HTML Introduction
HTML Editors
HTML Basics
HTML Elements
HTML Attributes
HTML Headings
HTML Styling
HTML Text Formatting

HTML Styling with the Style Attribute

At HQLEduTech, we empower students to design visually appealing web pages using simple, yet powerful HTML styling techniques. The style attribute in HTML allows you to apply inline CSS (Cascading Style Sheets) to elements, helping you control the visual presentation of your content.

Syntax

<tagname style="property: value;">
  • property: Refers to a CSS property like color, font-size, etc.
  • value: Refers to the value you want to assign to that property.

You’ll explore more advanced styling techniques in the CSS modules, but for now, let’s master the basics of HTML inline styling.

Background Color

The background-color property sets the background color of an element.

Example 1: Entire Page Background

<body style="background-color:lightgrey;">
  <h1>Welcome to HQLEduTech</h1>
  <p>Learn web development the smart way.</p>
</body>

Example 2: Element-Specific Background

<h1 style="background-color:lightblue;">Course Catalog</h1>
<p style="background-color:beige;">Choose from our wide range of technology courses.</p>

Text Color

Use the color property to change the text color of elements.

Example:

<h1 style="color:darkblue;">Our Programs</h1>
<p style="color:crimson;">Get certified in Python, Java, Web Development, and more.</p>

Fonts

The font-family property allows you to customize the font style of your text.

Example:

<h1 style="font-family:Georgia, serif;">HQLEduTech Web Design</h1>
<p style="font-family:Arial, sans-serif;">Learn to create beautiful web pages.</p>

Text Size

Control the size of your text using the font-size property. You can use percentage, pixels (px), or em.

Example:

<h1 style="font-size:250%;">HTML & CSS Fundamentals</h1>
<p style="font-size:120%;">Start with basics, build real projects.</p>

Text Alignment

The text-align property defines horizontal alignment for text within an element.

Example:

<h1 style="text-align:center;">Welcome to HQLEduTech</h1>
<p style="text-align:right;">Join today and shape your future.</p>

Additional Styling Properties

Border

Add borders around elements with the border property.

<p style="border:2px solid black;">Enroll Now</p>

Padding

Create space inside the element between its content and border.

<div style="padding:20px;">Comfortable Learning Environment</div>

Margin

Set space outside the element to separate it from others.

<div style="margin:30px;">Interactive Courses</div>

Display

Control the layout behavior of an element.

<span style="display:block;">Learn at your own pace</span>

Chapter Summary

  • Use the style attribute to apply inline styles to HTML elements.
  • background-color sets the background color of elements.
  • color sets the text color.
  • font-family defines the typeface used for text.
  • font-size adjusts the size of the text.
  • text-align aligns text horizontally.
  • Additional useful properties include border, padding, margin, and display.

By understanding how to use inline styles in HTML, you take the first step toward creating personalized and visually rich web experiences. At HQLEduTech, we ensure you build a strong foundation before diving into advanced CSS and JavaScript.

Let’s continue building your web development journey, one tag at a time.

Scroll to Top