HTML - Style Attribute

Understanding the HTML style attribute will provide you with a preview into the Cascading Style Sheet (CSS) world. In fact, the code we'll be using with style is indeed CSS code known as Internal CSS. CSS styling brings a whole new dimension to a website and offers endless customization of HTML elements and web page design.

When the style attribute was introduced into the HTML language along with CSS, a number of HTML attributes and tags became obsolete. Manipulation of the fonts and color of HTML elements is now accomplished through CSS styling, instead of stacking bulky formatting tags one inside the other.

HTML Style: Inline CSS:

<p id="contentParagraph" style="color: #0900C4;">
Here we've changed the font color of this paragraph to blue.
</p>

HTML Styling:

Here we've changed the font color of this paragraph to blue.

In the HTML Font lesson, we achieved similar results, but the code used to do so was cumbersome and inefficient.

HTML - Styling

As we mentioned, the values passed to the style attribute are actually CSS code. This means that we can go ahead and pass a series of values at once, changing several properties in one go. Simply separate each CSS attribute with a semicolon (;).

HTML Font Styling:

  <p id="contentParagraph" style="font-family: Georgia ; 

font-size: 12pt; color: #0900C4;">
Lorem ipsum dolor sit amet,

 consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et

 dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco

 laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in 

reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 

Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt

 mollit anim id est laborum.
</p>

HTML Font Styling:

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Inline CSS with the HTML style attribute offers a great way to improve the visual display of web elements and pages. With this new understanding of HTML and CSS, you're well on your way to mastering web design.

=================================