Spring.Into.HTML.and.CSS [Electronic resources] نسخه متنی

Adding Style Inline

Okay, enough with the theorylet's get down to work! Here you'll learn to apply inline style. You'll use inline style infrequently because it styles only the element to which it is applied. This defeats the management power of CSS.

What's more, inline style can be equated with presentational HTML because it goes right into the document instead of being separated from it, defeating the primary benefits of CSS. I use inline style mostly for situations in which a quick fix for a single element is called for, or in rare cases when it's the only style for one unique element in an entire site.

Consider the following element:

<h1>Welcome!</h1>

If this header were part of a complete HTML document and you viewed it in a browser, the results would be equivalent to Figure 7-1.

Say you don't like the default color and size. You can add CSS rules directly to the element using the style attribute:

<h1 style="color: gray; font-size: 24px;">Welcome!</h1>

Now you've got a gray header sized at 24 pixels (see Figure 7-2).