Styles in HTML

The style attribute in HTML defines styling information for an HTML document like color, font, size, etc.

Syntax of HTML style attribute:

<tagname style="property:value;">

Styling of HTML elements is done by CSS properties which is totally a different topic to learn. (alert-passed)

Example: Background Color

The background-color is a CSS property that defines the background color of any HTML element.

<body style="background-color: grey">
    <h1 style="background-color: blueviolet">This is a h1 heading</h1>
    <p style="background-color: yellow">This a simple paragraph</p>
</body>

Output:

Example: Text Color and Font

The color property is used to define the text color of the HTML element.
The font-family property is used to define different fonts of the HTML element.

<h1 style="color: blueviolet">This is a h1 heading with color</h1>
<p style="font-family: sans-serif">This is an example of font family.</p>

Output:

Whatever example we have seen so far is known as inline CSS in which we have used style attribute inside HTML elements but it is not the recommended way of using CSS style properties.

Internal CSS Styles.

The <style> tag should be placed within the head section of the HTML document, and it can be used to apply CSS styles to specific elements in the document. It has two main attributes: type and media. The type attribute specifies the type of style sheet language being used, and it is typically set to "text/css".

Here is an example of how the style tag is used:

<!DOCTYPE html>
<html>
  <head>
    <style type="text/css">
      body {
        background-color: blue;
      }
      h1 {
        color: white;
      }
    </style>
  </head>
  <body>
    <h1>This is a h1 heading</h1>
    <p>This is a paragraph.</p>
  </body>
</html>

Output:

In this example, the <style> tag is used to set the background color of the <body> element to blue and the color of the <h1> element to white.

Styles in HTML

Internal CSS Styles.

No comments:

Post a Comment