Embedded styles still have you working exclusively within the (X)HTML template, but this time
all styles are grouped together in the head of the document, as part of one element.
1. Open embedded.html in your text editor.
2. Within the <head> section of the template, just after the <title> element, paste the
following: <style type="text/css">p {color: #F00;}</style>. Again, you are using
a simple CSS declaration to render the text red.
3. Save the template, and open it in the web browser.
Notice now that the text contained within both paragraphs is red. This time around, all
paragraphs in the document are affected by the declaration, as the style is applied without
exception to all <p> tags within the page.
Pros of Embedded Styles
There are times when this method is useful, but again they are rare. Admittedly, this approach
is much better than inline CSS, as it allows you to make blanket changes to all instances of an
element rather than using duplicated inline styles. The idea of grouping all styles in one place
is much more sensible too, although as before, the actual (X)HTML document isn’t the best
place for this. Many seasoned developers will tell you that this method can be ideal during
initial testing.
Cons of Embedded Styles
Embedded styles are again loading presentational bloat into the document. Also, the styles
need to be downloaded again and again with every page load. Every page of your web site will
need its own embedded styles, and making sitewide style changes is going to be very labor
intensive (unless perhaps you pull the styles in as an include). Hey, that’s a good idea actually.
Let’s move on.
No comments:
Post a Comment