HTML Styles

Styles in HTML are basically used to describe how a document will be presented in browser. There is a default style for every HTML element e.g. background color is white, text color is black etc.

There are different type of styles. They can be attached as a separate document or embedded in HTML document.

There are 3 types of styles in HTML:

1] Inline Style: In this type the style attribute is used inside the HTML start tag.

2] Embedded Style: In this type the style attributes is used inside the element of the document.

3] External Style Sheet: In this method the element is used to point to an external CSS file.

Inline Style:

In this style the attribute is used inside the start tag for example you need to change the text color you can do like this.

Example
<p style="color:red">This is red text</p>

Here style describes you are using inline style attribute, the value is also key value pair like color:red.

You must specify the key value in double or single quote.

You can specify multiple key value pair in inline style like:

Example
<p style="color:red;background:black">Red text with black background</p>

multiple attributes must separated by semicolon(;)

Embedded Style:

In this type the style attribute is used inside the tag.

Example
<html>
<head>
<title>This is Embedded Style Example</title>
<style>
p{
color:red;
background-color:black;
}
</style>
</head> 

Explanation:

You need to specify the style attributes inside the <style></style> tag in <head> section. To apply the css you need to select the selector.

Here p is the selector and inside the curly({}) bracket they are the CSS attributes.

External Style Sheet:

In this method the <link> tag is used to apply the styles on HTML elements.

Create the new file name as style.css and write the code in it like.

style.css
p{
text-color:red;
background-color:black;
}

Once you created the style.css file link the sheet in <head> section like.

style.css
<html>
<head>
<link href="style.css"/>
</head>
<body>
<p>External Style sheet applied</p>
</body>
</html>

Here href is the attribute which points to the style.css file. In href specify the path of style.css