HTML Styles



HTML Styles

Last Updated Jul 21, 2015, 12:00:06 PM

HTML documents can be styles or designed to overright the default HTML style on the document using the style attribute

It is like painting a default white color wall with different colors for different elements and corners. Just like the above statement, we can also style the HTML elements like below to change its default behavior

Examples
Default HTML Style
Try It Now

Syntax

After applying the Styles
Watch GIF Try It Now

The background-color property in CSS applies solid colors as background on an element.

There are other ways to use the background-color property to apply the styles to the html elements

HTML Styles with RGB


Try It Now

HTML Styles with hsla


Try It Now

Unlike hex codes, these values allow for transparency (alpha), which can be super useful

Just like styling the background-color we can also style the text color of html elements, we can style the paragraphs, headings, etc...

HTML Text Color


Try It Now

As we styled the HTML text, we can also style the HTML text size by changing its default text size to more or less

HTML Text Size


Watch GIF Try It Now

Finally, we can also change the behavior of where to display the text. As I say, we can display the text either in center, left, right. That is how we can align the HTML text on the document

HTML Text Alignment


Watch GIF Try It Now

As we see different styles we applied to the HTML elements we can also combine two more styles to make the HTML documents more efficient for the user

Combining Two HTML Styles

HTML Text Alignment

We can combine or join two or more styles in the same line seperated with(;) semicolon like this text-align:center;color:red;

Keep all the styles in same quotes


Try It Now



Browser Support
Property
styles (Yes) (Yes) (Yes) (Yes) (Yes) (Yes) (Yes)


Practice with Our Interactive Live Code Editor and Take your HTML Skills to the next level

Exercise 1 Exercise 2 Exercise 3 Exercise 4 Exercise 5

Sources and Credits

The source of the content has been referred and updated with Mozilla Foundation and w3C

Last Updated Jul 21, 2015, 12:00:06 PM