Applying Inline Styles

Inline styles can be applied directly to elements in the HTML code using the style attribute. However, inline styles should be avoided wherever possible because the styles are added to the HTML markup. This defeats the main purpose of CSS, which is to apply the same styles to as many pages as possible across your website using external style sheets. Styles that are applied inline can cause additional maintenance across a website because multiple pages might need changing rather than one CSS file.

An example of an inline style is shown in Listing 4.2.

Listing 4.2. HTML Code Containing an Inline Style for the `<p>` Element

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"          "http://www.w3.org/TR/html4/strict.dtd"> <html lang="en"> <head>     <meta http-equiv="content-type" content="text/html;     charset=utf-8">     <title>Lesson 4</title> </head> <body> <p style="font-family: arial, helvetica, sans-serif; margin:  1em;padding: 1em; background-color: gray; width: 10em;">     Lorem ipsum dolor sit amet, consectetuer adipiscing     elit... </p> </body> </html>

Listing 4.2. HTML Code Containing an Inline Style for the <p> Element

Listing 4.2. HTML Code Containing an Inline Style for the `<p>` Element