Jobs Hub

HTML Styles

This article was written and published to provide a brief description of the styling of HTML elements or the content of an HTML-created web page. So, without further ado, here is the list of topics covered in this article:

However, I already described all the things regarding the styling of a web page and its content with the help of a CSS tutorial, which I think you might like to visit. Therefore, you will learn everything about changing the look and feel of the web page or website.

For the time being, let's start with the topics that I believe the majority of HTML learners want to learn.

The first two topics, which are "HTML style attribute" and "HTML style tag," are already described in separate articles. Therefore, the two links will take you to different articles, whereas the other three topics are going to be described in this article starting from the next paragraph.

HTML Styles: Change the background color of the content or page

To change the background color of the content or page, you need to either add the style attribute or tag to the BODY tag or to the element. For example, to change the background color of the page using the STYLE tag, it should be coded in this way:

<!DOCTYPE html>
<html>
   <head>
      <style>
         body{background-color: #ccc;}
      </style>
   </head>
   <body>
      
      <div>
         <h3>HTML Style to change the background color</h3>
         <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit.</p>
         <p>Lorem ipsum dolor sit amet.</p>
      </div>

   </body>
</html>

The output should exactly be as shown in the snapshot given below:

html styles change background color example one

And to change the background color of any particular HTML element using the STYLE tag, you need to do a similar job as done in the example above or in the previous example. You need to make only one change, which is to use that particular element instead of the body element, for which you need to change the background color. For example:

<!DOCTYPE html>
<html>
   <head>
      <style>
         div{background-color: #ccc;}
      </style>
   </head>
   <body>
      
      <div>
         <h3>HTML Style to change the background color of element</h3>
         <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit.</p>
         <p>Lorem ipsum dolor sit amet.</p>
      </div>

   </body>
</html>

Now, the output should look like this:

html styles example two

Let me give one last example. In this example, I'm going to do the same job as the previous one, but using the "style" attribute instead of the tag.

<!DOCTYPE html>
<html>
   <body>
      
      <div style="background-color: #ccc;">
         <h3>HTML Style to change the background color of element</h3>
         <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit.</p>
         <p>Lorem ipsum dolor sit amet.</p>
      </div>

   </body>
</html>

The above HTML code will produce the exact same output as the previous example's output.

The detailed version of the "background color" is available in its own separate tutorial. You can learn about it there.

HTML Styles: Change the color of the content

To change the color of the content, you need to use the "color" property. For example:

HTML Code
<!DOCTYPE html>
<html>
   <body>
      
      <div style="color: purple;">
         <h3>HTML Style to change the color of text</h3>
         <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit.</p>
         <p>Lorem ipsum dolor sit amet.</p>
      </div>

   </body>
</html>
Output

HTML Style to change the color of text

Lorem, ipsum dolor sit amet consectetur adipisicing elit.

Lorem ipsum dolor sit amet.

The detailed version of the "color" is available in its own separate tutorial. You can learn about it there.

HTML Styles: Change the alignment of the text

To change the alignment of the text, use "text-align." For example, to align the text to the center of the page, use "text-align: center" as shown in the example given below:

HTML Code
<!DOCTYPE html>
<html>
   <body>
      
      <p style="text-align: center;">Lorem ipsum dolor.</p>

   </body>
</html>
Output

Lorem ipsum dolor.

Again, the detailed version of "text-align" is in its own separate article.

HTML Online Test

« Previous Tutorial Next Tutorial »