Curriculum
Course: HTML Basic
Login

Curriculum

HTML Basic

HTML Introduction

0/1

HTML Editors

0/1

HTML Elements

0/1

HTML Attributes

0/1

HTML Headings

0/1

HTML Paragraphs

0/1

HTML Styles

0/1

HTML Formatting

0/1

HTML Quotation

0/1

HTML Comments

0/1

HTML Colors

0/1

HTML Favicon

0/1

HTML Page Title

0/1

HTML Block and Inline

0/1

HTML Iframes

0/1

HTML Java Script

0/1

HTML File Paths

0/1

HTML - The Head Element

0/1

HTML Style Guide

0/1

HTML Entities

0/1

HTML Symbols

0/1
Text lesson

HTML Styles

HTML Styling.

The style attribute in HTML is utilized for applying styling options to elements, including options for color, font, size, and more.

Example

  • Text colored red
  • Text colored blue
  • Text with increased size

 

Click to Learn

 

The HTML Style Attribute

The style of an HTML element can be modified using the style attribute.

The HTML style attribute uses the following syntax:

<tagname style=”property:value;>

Here, the property refers to a CSS property, and the value corresponds to the desired CSS value.

Further CSS details will be covered later in this tutorial.

Background Color

The background-color property in CSS is used to set the background color of an HTML element.

Example

1.Changing the background color of a page to powder blue:

<body style=”background-color:powderblue;”>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>

2.Applying different background colors to various elements:

<body>

<h1 style=”background-color:powderblue;”>This is a heading</h1>
<p style=”background-color:tomato;”>This is a paragraph.</p>

</body>

Text Color

Utilize the CSS color property to set the text color of an HTML element.

Example

<h1 style=”color:blue;”>This is a heading</h1>
<p style=”color:red;”>This is a paragraph.</p>

 

Click to Learn

 

Fonts

The font-family property in CSS determines the font used by an HTML element.

Example

<h1 style=”font-family:verdana;”>This is a heading</h1>
<p style=”font-family:courier;”>This is a paragraph.</p>

Click to Learn

 

Text Size

Adjust the text size of an HTML element with the CSS font-size property.

Example

<h1 style=”font-size:300%;”>This is a heading</h1>
<p style=”font-size:160%;”>This is a paragraph.</p>

Click to Learn

 

Text Alignment

The text-align property in CSS is used for aligning text horizontally within an HTML element.

Example

<h1 style=”text-align:center;”>Centered Heading</h1>
<p style=”text-align:center;”>Centered paragraph.</p>

 

Click to Learn

 

Chapter overview:

  • Apply styles to HTML elements using the style attribute.
  • For setting background colors, use background-color.
  • To change text colors, apply the color property.
  • Select fonts for text using font-family.
  • Adjust text sizes with font-size.
  • Align text horizontally with text-align.