1. Introduction to HTML Styles

HTML Styles plays an important role in the designing of HTML markup. As yo browse websites over the internet, you may see stylish websites, that have beautifully arranged contents. All this is possible due to styling of cascading style sheets. That is to say the importance of styles in the HTML document. HTML styles has following syntax:

<tagname style=”property-name: property-value;”>content</tagname>

Tutorial Contents:

  1. What are HTML Styles?
  2. How to Use HTML Styling in a Document?
  3. An Advanced way to Utilize HTML Styling

2. Uses Of HTML Styles

Importantly, it is to note that the style attribute is added in the starting tag only. It has property name, then a separator “colon(:)”, propery value and then “semi-colon(;)”. The property name and value are related to cascading style sheets. Lets explain it with an example.

Output

HTML Headings in blue color

Another Heading in red color

Yet another heading in green color

A paragrpah in yellow color and green background.

A paragrpah in yellow color and green background and bigger font size.

As you can see in above example, HTML headings in different colors. Also HTML paragraphs in different colors, background and sizes. All this is possible due to HTML styles. See the source code below to understand the usage of HTML styles.

Example

<h4 style=”color: blue;”>HTML Headings in blue color</h4>
<h4 style=”color: red;”>Another Heading in red color</h4>
<h4 style=”color: green;”>Yet another heading in green color</h4>
<p style=”color: yellow; background: green;”>A paragraph in yellow color and green background.</p>
<p style=”color: yellow; background: green; font-size: 17px;”>A paragraph in yellow color and green background and bigger font size.</p>

Try in CodeLab

The above mentioned source code clearly depicts each styling property alongwith its value. Also this type of styling method is called inline styling. This type of style can be used anywhere and mostly it come in handy when we need onspot styling only.

3. Advanced HTML Styles

When we need to repeat the styles for different HTML elements like headings paragraphs or tables, we use separate styles in the head section or in a separate file. To understand this method, look at the following example.

Example

<!Doctype HTML>
<html>
<head>
<title>Tuts Insider</title>
<style>
.docs-p{
	color: white;
	font-size: 12px;
	background: red;
	font-weight: 300;
}
.docs-h3{
	color: white;
	background: red;
	font-weight: 600;
	font-size: 20px;
}
</style>
</head>
<body>
<h3 class=”docs-h3″>Heading</h3>
<h3>HTML Styles</h3>
<p class=”docs-p”>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don’t look even slightly believable.</p>
<p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don’t look even slightly believable.</p>
</body>
</html>

Try in CodeLab

As you can see, in the head of the document, another style element is added that have css styles in the form of classes. If you don’t know about classes, visit our CSS tutorial. Both classes have different style properties. After that in the body section, two same headings has the same content but one heading has the class attribute with a name of class above created. Likewise one paragraph with the class and one without the class. After this styling , the following result is obtained.

Output

HTML Styles

HTML Styles

There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don’t look even slightly believable.

There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don’t look even slightly believable.

As you can see the results, the mentioned classes changed the display of heading with the class attribute and the paragraph with the class attribute. Both of the remaining heading and paragraph remained the same.

Give Us Your Feedback
OR
If You Need Any Help!
Contact Us