HTML Styles

HTML, CSS, JS

What are HTML Styles?

HTML styles are simple rules which describe the style of the HTML Document or Webpage.

The style attribute of HTML tags is used to add styles to an element.

We can add text color, font size, font family, and much more.

Syntax of the style attribute is:

Style Attribute:

<tagname style="property:value;">

where the property is any CSS property and value is the value of that particular property.

Let's learn with some examples.


Background Color

The CSS background-color property defines the background color for an HTML element.

<body style="background-color: aliceblue;">
<h1>Background color of body is now aliceblue.</h1>
<body>

Font Size

The CSS font-size property defines the font size for an HTML element:

<h1 style="font-size: 17px;">Font size of heading is now 17px.</h1>

Text Color

The CSS color property defines the text color for an HTML element:

<h1 style="color: red;">Text color of heading is now red.</h1>

Various other CSS properties are also available using which we can design our webpage.

How do you write styles in HTML Document? 

OR 

What are the 3 types of CSS?

  1. Inline Styles: Use the HTML Style attribute for inline styling.
  2. <style> Element: Use the <style> element to define the internal CSS.
  3. <link> Element: Use the <link> element to attach the external CSS file.

We will learn about them at a later stage.

All the above examples use the inline-css method.

Image credits: undraw