HTML 5 Tutorial #8 - HTML Styles

in #steemit6 years ago

The HTML Style Attribute

You can change the styling of an element by using the style attribute. Below is the syntax for declaring the style attribute.

<tagname style="property:value;">

The property is a CSS property. The value is a CSS value. CSS is a language we used for designing the HTML. You will learn more about CSS in this tutorial so don't worry.

To be more specific, tagname is the name of element and we add style attribute to change the style of the element. The property is what we want to change in that element. For example the color of the text, background color, size, etc. The value is the output of that property we want to change.

HTML Background Color

If you want to change the background color of an HTML element, we can use the background-color property. The example below will display a powder blue background color.

example.png

HTML Text Color

If you want to change the text color of an HTML element, we can use color property.

example.png

HTML Fonts

Use font-family property for changing the text font.

example.png

HTML Text Size

Use font-size property for changing the size of the text. Font-size value can be in percentage or pixel.

example.png

HTML Text Alignment

Some of the texts need alignment and the property for it is text-align property.

example.png

These are just some of the CSS property often used in designing HTML element. There's so much more to learn in here so stay tuned for my next tutorial.


HTML 5 Tutorials:

HTML 5 Tutorial #1 - Introduction
HTML 5 Tutorial #2 - HTML Editors
HTML 5 Tutorial #3 - HTML Basic
HTML 5 Tutorial #4 - HTML Elements
HTML 5 Tutorial #5 - HTML Attributes
HTML 5 Tutorial #6 - HTML Headings
HTML 5 Tutorial #7 - HTML Paragraphs

Sort:  

Good job! Thanks to @anonteamph00001 you have planted 0.05 tree to save Abongphen Highland Forest in Cameroon. Help me to plant 1,000,000 trees and share my Steem Power to the others. Selfvoting is prohibited, but that should be the reason to spread the world to protect our precious environment. Check out profile of our conservation association @kedjom-keku and the founder/coordinator @martin.mikes to get more information about our conservation program. My current SP is 18470.19. Help me to plant more trees with your delegated SP.

Thanks a lot,
your @treeplanter
www.kedjom-keku.com

You got a 0.73% upvote from @postpromoter courtesy of @cj23!

Want to promote your posts too? Check out the Steem Bot Tracker website for more info. If you would like to support the development of @postpromoter and the bot tracker please vote for @yabapmatt for witness!

This post has received a 0.68 % upvote from @booster thanks to: @cj23.

This post has received a 1.84% upvote from @lovejuice thanks to @cj23. They love you, so does Aggroed. Please be sure to vote for Witnesses at https://steemit.com/~witnesses.

This post has received gratitude of 0.75 % from @appreciator thanks to: @cj23.

This wonderful post has received a @cj23 3.79% upvote from @hellowhale. Discord Channel: https://discord.gg/WVJW7AC Please vote with the link below if you support our project. https://goo.gl/1zYDKh

This post has received a 1.42 % upvote from @boomerang thanks to: @cj23