Inline Styling

syntax summary

Of the three forms of injecting CSS, inline styling is the most direct, because you're applying the style as an attribute of the element. This has the benefit of being precise, but the detriment of being tedious. Imagine cleaning a carpet by cleaning each strand of fabric individually instead of just vacuuming the carpet would lose your damn mind.

I mostly use inline styling for testing purposes in the authoring stages to see how something might look...if I like the look of it, then I'll add it to the external stylesheet.

how we do...

Okay, the first thing you need is an element to style, let's start off with a paragraph element.

<p>Raindrop (drip), drop top (drop top)</p>

Okay, if we were to look at that line of code in a browser, it would look like this...

Raindrop (drip), drop top (drop top)

Okay, but you know what...these lyrics are fire, we need to highlight them, we can do that with inline CSS. Let's go...

<p style="background-color: #722332; color: white;">Raindrop (drip), drop top (drop top)</p>

This yields this result...

Raindrop (drip), drop top (drop top)

See how quick and easy that was. With CSS3, you can do much more than just change the color of text, but we'll touch on that later.

The last thing, let me reiterate this one more time...use inline styling for testing purposes only. The way CSS works with a cascading method you're just asking for trouble with using this styling, if you're going to code a website project that consists of thousands of pages, inline styling is a lesson in futility more than being efficient.