Inline styles make use of the style attribute applied to specific tags within the document,
where the actual style value is declared using the form name:value, or property:value, if you
want to use the correct terminology. There is a more detailed explanation of correct CSS syntax
later in the “Effective CSS Syntax” section.
1. Open inline.html in your text editor.
2. Find the first opening paragraph tag <p>.
3. Replace the <p> with <p style="color: #F00"> and save the template. This very simple
declaration will ensure that the paragraph text will be red.
Notice now that the text contained within that paragraph will be red. Only that paragraph
is affected, and the second paragraph defaults to black. This method can be applied to any
(X)HTML element within the <body> of the page.
Pros of Inline Styles
There are times when this method is useful, but these times are few and far between. You’ve
just learned how to make a paragraph red using CSS—that was useful, right? This method
might also be useful for testing out simple CSS examples within this book. However, I think it
best to skip to the “Cons of Inline Styles” paragraph rather than seek poor justification for
inline CSS—as you’ll soon find out when you have a bit more experience, it’s not a good idea
generally.
Cons of Inline Styles
Your (X)HTML should always be as presentation-free as possible. Peppering your code with
inline styles is going to weigh the page down significantly. As if that were not reason enough,
imagine having to declare the styles for every paragraph, every link, every header, and so on. To
further scare you off, consider redesigning a site containing hundreds of pages where inline styles
litter the markup. You’d have to go into every page and change each CSS property individually—
not good.
No comments:
Post a Comment