HTML Style Guide | HTML Tutorial

HTML creates the skeleton of a website. To make it colorful and well-designed we use html style.

In this tutorial, we will learn how to use HTML style attribute to add CSS properties in a web page.


What is CSS?

CSS stands for Cascading Style Sheets. In a simple word, it brings life to a web page. HTML adds content and CSS controls the layout of that page.

You can design your website with colors, fonts, size, background using these CSS properties.

Not only that, you can easily add images, icons, videos etc. It will make your website user friendly and compatible for all devices.

Mobile friendliness is very important now a days. It has a great impact on Google ranking.

You can use CSS to create different layout for different devices e.g. laptop, tab, mobile for your website.


HTML Style Attribute

HTML Style Attribute basically describes how a document will be presented in a web browser.

This attribute is used to add CSS properties in a HTML document. This process of adding style is called inline CSS.

There are two more ways to add CSS properties for a web page e.g. Internal and External. We will discuss about them in detail in our next tutorial.

Each CSS property has two parts one is property name and other is property value. You need to add them inside this style attribute.

<tagname style="color:red;"></tagname>

For example, color: red here color is the property name and red is the property value.

Note: HTML style attribute is used in the opening tag of an HTML element.


HTML Background Color

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

Size of this background is equal to the size of that element.

<div style="background-color:powderblue;">
  <h1>Heading 1</h1>
  <p>This is a paragraph.</p>
</div>

The output shows in a web browser:

Heading 1

This is a paragraph.


HTML Text Color

The CSS color property specifies the text color of an HTML element.

You can set any color you want for the text using this property.

<h1 style="color:red;">Heading 1</h1>
<p style="color:blue;">This is a paragraph.</p>

The output shows in a web browser:

Heading 1

This is a paragraph.


HTML Fonts

The CSS font-family property specifies the font for an HTML element.

It gives you the flexibility to use different font style for your text inside a webpage.

<p style="font-family: Georgia;">
  This paragraph is using Georgia font.
</p>
<p style=" font-family: cursive;">
  This paragraph is using Cursive font.
</p>

The output shows in a web browser:

This paragraph is using Georgia font.

This paragraph is using Cursive font.


HTML Text Size

The CSS font-size property sets the size of the text in a webpage.

Usually the size of the text is defined in Pixels (px). There are many other units too in CSS to declare values e.g. em, rem, percent (%).

<p style="font-size:20px">This is a paragraph.</p>
<p style="font-size:30px">This is a paragraph.</p>

The output shows in a web browser:

This is a paragraph.

This is a paragraph.


HTML Width and Height

The CSS width property specifies the width of an HTML element.

You can create different section in different width/size using this property.

<div style="width: 400px; background-color: green;">
  <p style="color: #ffffff;">
    This element has and a width of 400 pixels.
  </p>
</div>

<div style="width: 500px; background-color: green;">
  <p style="color: #ffffff;">
    This element has and a width of 500 pixels.
  </p>
</div>

The output shows in a web browser:

This element has and a width of 400 pixels.

This element has and a width of 500 pixels.

The CSS height property specifies the height of an HTML element.

You can create different section with different height using this property.

<div style="height: 50px; background-color: green;">
  <p style="color: #ffffff;">
    This element has and a height of 50 pixels.
  </p>
</div>

<div style="height: 100px; background-color: green;">
  <p style="color: #ffffff;">
    This element has and a height of 100 pixels.
  </p>
</div>

The output shows in a web browser:

This element has and a height of 50 pixels.

This element has and a height of 100 pixels.


HTML Text Alignment

The CSS text-align property specifies the horizontal alignment of an inline-level content such as text and images.

There are total 4 values that you can use for this property i.e. left, right, center, and justify.

Property values

left – This is default value for web browsers. Content aligns to the left.

right – This value is used to move the content from left to right.

center – This value is used to make the content centered in a web browser.

justify – This value expands the lines from left to right so that each line takes equal width (like in newspapers).

<p style="text-align: right">
  This paragraph contains text-align right property in the source code.
</p>
<p style="text-align: center">
  This paragraph contains text-align center property.
</p>
<p style="text-align: justify">
  This paragraph contains text-align justify property in the source code. Each line will take equal width of the parent container.
</p>

The output shows in a web browser:

This paragraph contains text-align right property in the source code.

This paragraph contains text-align center property.

This paragraph contains text-align justify property in the source code. Each line will take equal width of the parent container.


HTML Text Decoration

The CSS text-decoration property specifies the decoration added to a text.

The property can add an underline, overline, line-through, or a combination of values to the selected text.

Property values

none – Default value for any browser. It will remove any existing decoration.

underline – Adds a 1px line below the text.

overline – Adds a 1px line above the text.

line-through – Adds a 1px line through the text.

Note: You can use multiple value in the same property. Use space between two values.

<p style="text-decoration: underline;">This is paragraph 1.</p>
<p style="text-decoration: overline;">This is paragraph 2.</p>
<p style="text-decoration: line-through;">This is paragraph 3.</p>
<p style="text-decoration: underline overline;">This is paragraph 4.</p>

The output shows in a web browser:

This is paragraph 1.

This is paragraph 2.

This is paragraph 3.

This is paragraph 4.


HTML Text Transformation

The CSS text-transform property controls text case and capitalization of an element.

The property can add an uppercase, lowercase, or capitalize value to the selected text.

Property values

none – The text renders as it is without any effect. This is default value.

uppercase – Transforms all characters in uppercase.

lowercase – Transforms all characters in lowercase.

capitalize – Transforms the first character of each word in uppercase and other characters remain as it is.

<p style="text-transform: uppercase;">
  This text will be transformed to uppercase.
</p>
<p style="text-transform: lowercase;">
  THIS WILL BE TRANSFORMED TO LOWERCASE.
</p>
<p style="text-transform: capitalize;">
  This will be transformed to capitalize.
</p>

The output shows in a web browser:

This text will be transformed to uppercase.

THIS WILL BE TRANSFORMED TO LOWERCASE.

This will be transformed to capitalize.


Time to practice

OUTPUT