Style Element in HTML

HTML Style

In This Tutorial We Will Discus The HTML Style Sheet. In HTML Style Sheet Is Use To Define Formatting of You Web Page Contents.

There are three kinds of ways to attach style rules:

  • Inline Style Attribute

  • In-page Style Tags (Internal Style Sheet)

  • External Style Sheet

Inline Styles

In Inline style you have to define the style each time when you use a element. Its means that instead of defining the style once in whole document you define the style of each element again and again when you use an element. For example if you define the style one time for paragraph element then its apply on all the paragraph which you use in you document in the same way. But in Inline style you must define the style of every and each Paragraph tag. The main reason of inline style is that you can apply the different formation option with different way on each element. For example on one paragraph tag font size is 16px and on other paragraph tag 20px.

The example below shows how to change the background color of a paragraph with inline style (you can use all the property of CSS in style element as attribute).


<html>
<body>
<p> This is simple paragraph </p>
<p style="background-color : yellow ;"> This paragraph contain yellow back ground color </p>
</body>
</html>

Internal Style Sheet (In-page Style Tags)

If you want to define a style for all the same type of element. for example for H1 heading element, font color is Red then you can define Internal or In-page style. In this type you can define style once and it apply on the whole page. Internal styles are defined in the <head> section of an HTML page.

Now we take an example .

in previous example you noticed that we have tow paragraph but only the color of one paragraph is changed in which we use style attribute. and other remain simple this is inline style. Now we declare the in-Page style for example:


<html>
<head>
<head>
<style>

p 
{
background-color : yellow ;
}
</style>
</head>
<body>
<p> This is first paragraph</p><p> This is second paragraph</p></body></html>

In this example you specify style once in the head section and then it will be apply each instance of that style.

Attributes of Internal Style Sheet (In-page Style Tags)

This element includes the global attributes.

Type: This attribute defines the styling language. The language 'text/css' is assumed if this attribute is not present absent.
Media : Select the media on which this style is applied. For example for graphical displays, screens, print etc.).
Scoped :If we used scoped attribute then the style applies only to its parent element. if we don't use this attribute style applies to the whole document.
Title : Specifies alternative style sheet sets.


External Style Sheet

When you want to apply a style on many pages in your website then you create an external style sheet. With the help of external style sheet you can change the look of entire website by changing in a single file which is called external Style Sheet. The external style sheet separately save with CSS extension. Each page of your website linked to the style sheet using the <link> tag. The <link> must be written in Head Section of each page.

For example:


<head>
<link rel="stylesheet" type="text/css" href="pagestyle.css">
</head>

Where pagestyle.css is external style sheet.

Example of External style sheet:

Open any text editor for example Notepad in windows and write the following code for external style sheet and save it as pafestyle.css.


body
{
 background-color: gray;
} 
p
 {
color: blue;
font-size=18px;
 } 
h1
{
 color: white;
 }
Now link this file in your HTML file in the head section.
<HTML>
<head>
<Title> Learning hints </Title>
<link rel="stylesheet" type="text/css" href="pagestyle.css">
</head>
<body>
<p> This is paragraph of you web page formatted by external style sheet.</p>
<h1> This heading also formatted by external style sheet</h1>
</body>
</html>

Related topics
View and Download More Tutorials !

HTML Forms

HTML DECIMAL Color Code and HEX Color Code

HTML Nested Lists

Elements and Tags In HTML

4 Primary Tags In HTML

Create Your First Web Page in HTML

Attributes in HTML Tags

HTML DOCTYPE Declaration

HEAD Tag in HTML

Meta Tags in HTML

Body Tag in HTML

H1 to H6 HTML Elements

Basic HTML Elements

HTML Table Element

Basefont HTML Element

Formatting Element in HTML

Font Element In HTML

Style Element in HTML

CSS Properties

DIV in HTML Document

List in HTML

Creating Menus With HTML list

Creating Horizontal Menu With HTML list

HTML Image Tag

Hyperlinks In HTML