Home » HTML » HTML Style

HTML Styles

The HTML style is used to change or add some style on HTML element. Giving style by ourself will overwrite the default style of the elements.

Some basic css properties are - color, background-color, text-align, font-size etc.

Syntax:

Style="property:value;"

Adding Styles to HTML Elements

These are the three methods of implementing styling information to the HTML document.

Inline styles: By giving the style attribute in the HTML tag itself.
Embedded style: By writing css within the <style> tag inside the <head> section of the document.
External style sheet: Using the <link> tag, to add an external CSS file in the webpage.

Inline Styles

Inline CSS style is applied directly within the tag itself by using the style attribute. The style attribute is applied in the opening tag of the paired tags, and anything b/w opening-closing tag will get the specified style.

The style attribute gives multiple pairs of property: value separated by a semicolon (;) in a single line.

Example Try this code »

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> Inline Styles </title>
</head>
<body>
<h4 style="color:green"> This is Green Color </h4>
<h4 style="color:blue"> This is Blue Color </h4>
</body>
</html>

Output

Inline Style

This is Green Color

This is Blue Color

Embedded Style Sheets

Embedded or internal style sheets only works on the webpage they are embedded in.
It can be defined anywhere in the webpage within <html> tags, but usually are defined in the <head> section of an HTML document using the <style> tag. Try the example below-

Example Try this code »

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> Embedded Style Sheets </title>
<style>
body{ background-color:seagreen;}
</style>
</head>
<body>
<h2>This is a heading.</h2>
<p>This is a paragraph.</p>
</body>
</html>

Output

Embedded Style Sheets

This is a heading.

This is a paragraph.

External Style Sheets

An external style sheet is used when we have to apply the same css style to different webpages. An external style sheet holds all the style rules in a separate document that you can link to any HTML file. This way only one file can be used multiple times, and only a simple change in that file can make changes in all the pages it is linked to.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> External Style Sheets </title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1 style="font-family: “Georgia”, serif;">This is a heading.</h1>
<p style="font-family:courier;">This is a Paragraph.</p>
</body>
</html>

Output

External Style Sheets

This is a heading.

This is a Paragraph.

HTML Font-Size Style

The font-size property defines the different font size to be used for an HTML element

Example Try this code »

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> HTML styles font-size </title>
</head>
<body>
<h1 style="font-size:200%;"> This is a Heading. </h1>
<p style="font-size:100%;"> This is a Paragraph. </p>
</body>
</html>

Output

HTML styles font-size

This is a Heading.

This is a Paragraph.

Recommended :

1 . Html Form Attributes
2 . How to Insert Images in HTML Pages
3 . What is the use of the <title> element in HTML?
4 . HTML Ordered List

5 . HTML to add Audio in HTML
6 . Add Style in HTML
7 . Photography Snippets using HTML and CSS
8 . Create Simple Login Form

Web Developement Courses
BootStrap Snippets
JS Keywords
Form Events
CSS Navbar
JS Objects
Cookies
Forms
Icons
Buttons
Progress
Footer
Errors