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>
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>
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>
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.