In this HTML lesson, we demonstrate various methods for using styles in HTML. The subject of styles is beyond the scope of this HTML lesson, and this lesson is not meant to teach CSS styling. Rather it is meant to show how styles can be used so that style code can be recognized when it is seen. To this end, we demonstrate the three basic methods for incorporating styles in HTML: inline with a style attribute, embedded with a style element, and externally with a link element or import.
This is our unstyled HTML document. It consists of several paragraphs from the beginning of the novel Pride and Prejudice by Jane Austen. By default, the text is black, and all of our styling will consist of changing the color of the text in these paragraphs to tan.
<!DOCTYPE html> <html> <head> <title>XoaX.net HTML</title> </head> <body> <p>It is a truth universally acknowledged, that a single man in possession of a good fortune, must be in want of a wife.</p> <p>However little known the feelings or views of such a man may be on his first entering a neighbourhood, this truth is so well fixed in the minds of the surrounding families, that he is considered the rightful property of some one or other of their daughters.</p> <p><q>My dear Mr. Bennet,</q> said his lady to him one day, <q>have you heard that Netherfield Park is let at last?</q></p> <p>Mr. Bennet replied that he had not.</p> <p><q>But it is,</q> returned she; <q>for Mrs. Long has just been here, and she told me all about it.</q></p> <p>Mr. Bennet made no answer.</p> <p><q>Do you not want to know who has taken it?</q> cried his wife impatiently.</p> <p><q>You want to tell me, and I have no objection to hearing it.</q></p> <p>This was invitation enough.</p> </body> </html>
Our first styling example uses the global attribute style to set the style on the first paragraph to have a tan text color. This is how inline styles work. We set the style attribute on an element to change its style. As we see below, this changes the color of the first paragraph.
<!DOCTYPE html> <html> <head> <title>XoaX.net HTML</title> </head> <body> <p style="color: tan;">It is a truth universally acknowledged, that a single man in possession of a good fortune, must be in want of a wife.</p> <p>However little known the feelings or views of such a man may be on his first entering a neighbourhood, this truth is so well fixed in the minds of the surrounding families, that he is considered the rightful property of some one or other of their daughters.</p> <p><q>My dear Mr. Bennet,</q> said his lady to him one day, <q>have you heard that Netherfield Park is let at last?</q></p> <p>Mr. Bennet replied that he had not.</p> <p><q>But it is,</q> returned she; <q>for Mrs. Long has just been here, and she told me all about it.</q></p> <p>Mr. Bennet made no answer.</p> <p><q>Do you not want to know who has taken it?</q> cried his wife impatiently.</p> <p><q>You want to tell me, and I have no objection to hearing it.</q></p> <p>This was invitation enough.</p> </body> </html>
In this example, we show how to change the style on all of the paragraphs so that they all have tan colored text. This becomes tedious as the number of paragraphs grows and can be handled more easily, as we will see, with embedded styles.
<!DOCTYPE html> <html> <head> <title>XoaX.net HTML</title> </head> <body> <p style="color: tan;">It is a truth universally acknowledged, that a single man in possession of a good fortune, must be in want of a wife.</p> <p style="color: tan;">However little known the feelings or views of such a man may be on his first entering a neighbourhood, this truth is so well fixed in the minds of the surrounding families, that he is considered the rightful property of some one or other of their daughters.</p> <p style="color: tan;"><q>My dear Mr. Bennet,</q> said his lady to him one day, <q>have you heard that Netherfield Park is let at last?</q></p> <p style="color: tan;">Mr. Bennet replied that he had not.</p> <p style="color: tan;"><q>But it is,</q> returned she; <q>for Mrs. Long has just been here, and she told me all about it.</q></p> <p style="color: tan;">Mr. Bennet made no answer.</p> <p style="color: tan;"><q>Do you not want to know who has taken it?</q> cried his wife impatiently.</p> <p style="color: tan;"><q>You want to tell me, and I have no objection to hearing it.</q></p> <p style="color: tan;">This was invitation enough.</p> </body> </html>
In this example, we use an embedded style sheet to set the style on all of the paragraphs with a single command. To do this, we put code for a selector inside a style element, which is in the head element. This selector changes the color of the text for all paragraphs to tan, as we see below.
<!DOCTYPE html> <html> <head> <title>XoaX.net HTML</title> <style> p { color: tan; } </style> </head> <body> <p>It is a truth universally acknowledged, that a single man in possession of a good fortune, must be in want of a wife.</p> <p>However little known the feelings or views of such a man may be on his first entering a neighbourhood, this truth is so well fixed in the minds of the surrounding families, that he is considered the rightful property of some one or other of their daughters.</p> <p><q>My dear Mr. Bennet,</q> said his lady to him one day, <q>have you heard that Netherfield Park is let at last?</q></p> <p>Mr. Bennet replied that he had not.</p> <p><q>But it is,</q> returned she; <q>for Mrs. Long has just been here, and she told me all about it.</q></p> <p>Mr. Bennet made no answer.</p> <p><q>Do you not want to know who has taken it?</q> cried his wife impatiently.</p> <p><q>You want to tell me, and I have no objection to hearing it.</q></p> <p>This was invitation enough.</p> </body> </html>
While embedded style sheets allow us to change a set of elements, they can also be used to change a single element. To do this, we need to set the global id attribute of the element and create an id selector for it as we show below. With this selector, we can change the style of a single element, as we see below.
<!DOCTYPE html> <html> <head> <title>XoaX.net HTML</title> <style> #idFirst { color: tan; } </style> </head> <body> <p id="idFirst">It is a truth universally acknowledged, that a single man in possession of a good fortune, must be in want of a wife.</p> <p>However little known the feelings or views of such a man may be on his first entering a neighbourhood, this truth is so well fixed in the minds of the surrounding families, that he is considered the rightful property of some one or other of their daughters.</p> <p><q>My dear Mr. Bennet,</q> said his lady to him one day, <q>have you heard that Netherfield Park is let at last?</q></p> <p>Mr. Bennet replied that he had not.</p> <p><q>But it is,</q> returned she; <q>for Mrs. Long has just been here, and she told me all about it.</q></p> <p>Mr. Bennet made no answer.</p> <p><q>Do you not want to know who has taken it?</q> cried his wife impatiently.</p> <p><q>You want to tell me, and I have no objection to hearing it.</q></p> <p>This was invitation enough.</p> </body> </html>
Along with embedded style sheets, we can put our style sheet code in a separate file so that it can be shared by multiple HTML documents. Here, we have put the prior style code for selecting the first paragraph in a separate file that we saved as "PrideAndPrejudice.css" in the same folder. To use this file and its styles, we include a reference in a link element inside the head element. Note that the .css extension is used to designate a file as a cascading style sheet.
<!DOCTYPE html> <html> <head> <title>XoaX.net HTML</title> <link rel="stylesheet" type="text/css" href="PrideAndPrejudice.css" /> </head> <body> <p id="idFirst">It is a truth universally acknowledged, that a single man in possession of a good fortune, must be in want of a wife.</p> <p>However little known the feelings or views of such a man may be on his first entering a neighbourhood, this truth is so well fixed in the minds of the surrounding families, that he is considered the rightful property of some one or other of their daughters.</p> <p><q>My dear Mr. Bennet,</q> said his lady to him one day, <q>have you heard that Netherfield Park is let at last?</q></p> <p>Mr. Bennet replied that he had not.</p> <p><q>But it is,</q> returned she; <q>for Mrs. Long has just been here, and she told me all about it.</q></p> <p>Mr. Bennet made no answer.</p> <p><q>Do you not want to know who has taken it?</q> cried his wife impatiently.</p> <p><q>You want to tell me, and I have no objection to hearing it.</q></p> <p>This was invitation enough.</p> </body> </html>
#idFirst { color: tan; }
With an external style sheet file, we can apply it by using the link element as shown above or using an import inside of the style element, as we do here. Either one works just as well for the style sheet file, as this code demonstrates.
<!DOCTYPE html> <html> <head> <title>XoaX.net HTML</title> <style> @import url("PrideAndPrejudice.css"); </style> </head> <body> <p id="idFirst">It is a truth universally acknowledged, that a single man in possession of a good fortune, must be in want of a wife.</p> <p>However little known the feelings or views of such a man may be on his first entering a neighbourhood, this truth is so well fixed in the minds of the surrounding families, that he is considered the rightful property of some one or other of their daughters.</p> <p><q>My dear Mr. Bennet,</q> said his lady to him one day, <q>have you heard that Netherfield Park is let at last?</q></p> <p>Mr. Bennet replied that he had not.</p> <p><q>But it is,</q> returned she; <q>for Mrs. Long has just been here, and she told me all about it.</q></p> <p>Mr. Bennet made no answer.</p> <p><q>Do you not want to know who has taken it?</q> cried his wife impatiently.</p> <p><q>You want to tell me, and I have no objection to hearing it.</q></p> <p>This was invitation enough.</p> </body> </html>
#idFirst { color: tan; }
© 20072025 XoaX.net LLC. All rights reserved.