HTML Introduction: Part 5, Style Tag
Transcription/प्रतिलिपि
Hello and Welcome to another session on HTML series. We have
covered quite a lot in past four sessions which you may want to check out. In
the earlier sessions, we started from the beginning of, what is HTML, to
different tags, and associated attributes to tags in details like, IMG tag and
its attributes, for embedding images in HTML document. In this session, we will
consider another such attribute common in some tags, that is style attribute.
Please note that to have hands on experience, modify the code accordingly.
The HTML Style Attribute is for setting different styles of an
HTML element. To apply style on supported HTML element, write the HTML element
and define the style property as the syntax shown.
Syntax - ＜tagname style="property:value;"＞
The property defines, what style is to be set for the HTML
element. The property is something which is called CSS property or cascading
style sheet. CSS is used to define all the style properties of HTML document.
The value in style attribute is a CSS value.
Let’s learn more about the style attribute, properties and
values.
HTML Background Color
The background-color property defines the background color for
an HTML element.
The syntax is to define property background color as shown with
value as any color
Syntax - ＜tagname style="background-color:value;"＞
This example sets the background color for a page to powderblue:
Example
＜body
style="background-color:powderblue;"＞
HTML Text Color
The color property defines the text color for an HTML element
The syntax is to define property color as shown with value as
any color
Syntax - ＜tagname style="color:value;"＞
This example sets the color as blue for the header and
paragraph.
Example
＜h1
style="color: blue;"＞This is a heading＜/h1＞
＜p
style="color: red;"＞This is a paragraph. ＜/p＞
HTML Fonts
The font-family property defines the font to be used for an HTML
element.
The syntax is to define property font family as shown with value
as any color
Syntax - ＜tagname style="font-family:value;"＞
This example sets font as verdana and courier.
Example
＜h1
style="font-family:verdana;"＞This is a heading＜/h1＞
＜p
style="font-family:courier;"＞This is a paragraph.＜/p＞
HTML Text Size
The font-size property defines the text size for an HTML element.
The syntax is to define property font size as shown with value
as any color
The syntax is to define property font size as shown with value
as size
Syntax - ＜tagname style="font-size:value;"＞
This example sets the header font size to 3 times and paragraph
font size to 160 percent.
Example
＜h1
style="font-size:300%;"＞This is a heading＜/h1＞
＜p
style="font-size:160%;"＞This is a paragraph.＜/p＞
HTML Text Alignment
The text-align property defines the horizontal text alignment
for an HTML element.
The syntax is to define property text alignment as shown with
value as center, left, right
Syntax - ＜tagname style="text-align:value;"＞
This example sets the text alignment as center.
Example
＜h1
style="text-align:center;"＞Centered Heading＜/h1＞
＜p style="text-align:center;"＞Centered paragraph.＜/p＞
Well Done! You have learned to Use the style attribute for
styling HTML elements,
Use background-color for background color,
Use color for text colors,
Use font-family for text fonts,
Use font-size for text sizes,
and Use text-align for text. To find out more, visit links in
the description.
Which topic you want us to cover next. Share your thoughts in
the comment section.
Like and subscribe for more videos.
Source: https://www.w3schools.com/html/html_styles.asp
Code
------------------------------------
＜html＞
＜head＞
＜title＞HTML Introduction - Part 5 - Style Attribute＜/title＞
＜/head＞
＜body style="background-color:powderblue;"＞
＜h1 style="color:blue;"＞This heading is in color blue by style tag.＜/h1＞
＜p style="color:red;"＞This paragraph is in red color by style tag.＜/p＞
＜h1 style="font-family:verdana;"＞This heading's font is verdana＜/h1＞
＜p style="font-family:courier;"＞This paragraph font is courier.＜/p＞
＜h1 style="font-size:300%;"＞This heading font size is 3 times the normal heading.＜/h1＞
＜p style="font-size:160%;"＞This paragraph font size is 1.6 time the normal font size.＜/p＞
＜h1 style="text-align:center;"＞This Heading is in center ＜h1＞
＜p style="text-align:center;"＞This paragraph is in center.＜/p＞
＜/body＞
＜/html＞
Comments
Post a Comment