HTML5 Tutorial - HTML Styles

Posted by Ridwan Fadilah on Jul 06, 2020 - 01:51 pm

HTML Styles

Learn HTML Styles. Fonts, Text Size, Text Color, Background Color, Alignment, and more.

Today, a website is not only showing a black text with a white background. Many webs today have a colorful user interface. A combination of several colors composition can make a website looks good. A modern website can also have a different text size and text color in their pages.

In HTML5, you can set the web appearances by using the 'style' attribute and the CSS property. By using it, you can set the text size, text color, fonts, and more.

Example:

<tagname style="property:value;">

In this tutorial, you'll learn about the HTML 'style' attribute to change the appearances of your HTML elements. You'll learn more about the CSS in another tutorial.

HTML Style Attribute

The HTML 'style' attribute is used to change the appearances of your HTML elements such as a text color, text size, fonts, color, background color, and more.

You can also use the <style> element that place in the <head> element. However, you will not learn about that for now.

The 'style' attribute is always followed by the CSS property.

Example:

<h1 style="color:red;">Hello World!</h1>

The example above will display by the browser like this:

Style Example

The 'h1' is the element.

The 'style' is the attribute.

The 'color' is the CSS property. The 'color' is used to set the text color.

The 'red' is the CSS value.

Background Color

In HTML5, you can change the background color of their elements. You can change the background of the body element, headings, paragraphs, div, etc.

If you want to change the color of the background, you only need to use the CSS background-color property.

Example:

<h1 style="background-color:grey;">Hello World!</h1>

The example above will display by the browser like this:

HTML5 Background Color

Fonts

You can change the font type as do you want.

You can change the font type by using the font-family property.

Example:

<h1 style="font-family: sans-serif;">Hello World!</h1>

The example above will display by the browser like this:

HTML5 Fonts

If you want to use the same font type to all elements in the HTML document, you can set the font-family in the <body> element.

Example:

<body style="font-family: sans-serif;">

<h1>Hello World!</h1>
<p>Lorem Ipsum Dolor</p>
<p>Lorem Ipsum Dolor</p>

</body>

The example above will display by the browser like this:

HTML5 Body element Font

Now, all the elements inside the <body> element will use the same font.

Text Size

If you want to change the text size in the HTML5 document, you can use the CSS font-size property to do it.

Example:

<body style="font-family: sans-serif;">

<h1>Hello World!</h1>
<p style="font-size: 22px;">Lorem Ipsum Dolor</p>
<p>Lorem Ipsum Dolor</p>

</body>

The example above will display by the browser like this:

HTML5 Font Size

Text Alignment

The last is the text alignment.

You can set the horizontal text alignment for an HTML5 element by using the CSS text-align property.

Example:

<body style="font-family: sans-serif;">

<h1 style="text-align: center;>Hello World!</h1>
<p style="text-align: right;">Lorem Ipsum Dolor</p>
<p>Lorem Ipsum Dolor</p>

</body>

The example above will display by the browser like this:

HTML5 Text Alignment

Okay, that's the basic tutorial about the HTML5 Styles. Find another tutorial of HTML5 on the related article below.

You can also find another tutorial on our YouTube Channel.

Thanks for reading, see you in the next article.


Related Articles