HTML Styles

HTML STYLES


The HTML <style> element contains style information for a document, or part of a document. By default, the style instructions written inside that element are expected to be CSS.

EXAMPLE


<!DOCTYPE html>
<html>
<body>

<p>I am normal</p>
<p style="color:green;">I am green</p>
<p style="color:darkorange;">I am orange</p>
<p style="font-size:36px;">I am big</p>

</body>
</html>

RESULT

I am normal
I am green
I am orange
I am big

The HTML Style Attribute

Setting the style of an HTML element, can be done with the  style attribute.
The HTML style attribute has the following syntax:
This element includes the global attributes

  1. Type
This attribute defines the styling language as a MIME type (charset should not be specified). This attribute is optional and default to text/css if it's missing.
2. Media
This attribute defines which media the style should apply to. It's value is a media query, which default to all if the attribute is missing.
3.Title
Specifies alternative style sheet sets.

<tagname style="Property:value;">

The Property is a CSS property. The value is a CSS value.
You will learn more about CSS later in this tutorial

HTML Background Color

The Background-Color property defines the background color for an HTML element.
This example sets the background color for a page to powderblue:

EXAMPLE

<!DOCTYPE html>
<html>
<body style="background-color:powderblue;">

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

RESULT

This is a heading

This is a paragraph.


HTML Text Color

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


EXAMPLE

<!DOCTYPE html>
<html>
<body>

<h1 style="color:orange;">This is a heading</h1>
<p style="color:red;">This is a paragraph.</p>

</body>
</html>

RESULT

This is a heading

This is a paragraph.

HTML Fonts

The font-family property defines the font to be used for an HTML element:

EXAMPLE

<!DOCTYPE html>
<html>
<body>

<h1 style="font-family:verdana;">This is a heading</h1>
<p style="font-family:courier;">This is a paragraph.</p>

</body>
</html>

RESULT

This is a heading

This is a paragraph.

HTML Text Size

The font-size property defines the text size for an HTML Element:

EXAMPLE

<!DOCTYPE html>
<html>
<body>

<h1 style="font-size:300%;">This is a heading</h1>
<p style="font-size:160%;">This is a paragraph.</p>

</body>
</html>

RESULT

This is a heading

This is a paragraph.

HTML Text Alignment

The text-align property defines the horizontal text alignment for an HTML element:

EXAMPLE

<!DOCTYPE html>
<html>
<body>

<h1 style="text-align:center;">Centered Heading</h1>
<p style="text-align:center;">Centered paragraph.</p>

</body>
</html>

RESULT


Comments

Post a Comment