Let's say, for example, that we want to turn all paragraphs orange (actually no, I really can't think of a reason why you'd want to do that unless you're color-blind, but this is just an example.) and we're going to implement that in CSS.
External Style Sheets
This is the de facto standard; if in doubt as to whether you should use an external style sheet or not, just do it. You'll probably thank yourself later.In this implementation, your HTML and CSS are in two different files, separate and distinct. Your HTML contains a reference link to the CSS file, either over the web or in your own server.
In code, it looks like this.
styles.css
p
{
color: #FFAA00;
}
{
color: #FFAA00;
}
index.html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur posuere elementum ex. Duis id dolor ex. Praesent augue nulla, consectetur quis lectus eget, luctus pulvinar risus. Nunc ipsum lorem, gravida non purus ac, dapibus facilisis urna. Curabitur vel tempor erat. Maecenas egestas sapien nulla, a lobortis felis posuere ut. Ut ornare laoreet tristique.
</p>
</body>
</html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur posuere elementum ex. Duis id dolor ex. Praesent augue nulla, consectetur quis lectus eget, luctus pulvinar risus. Nunc ipsum lorem, gravida non purus ac, dapibus facilisis urna. Curabitur vel tempor erat. Maecenas egestas sapien nulla, a lobortis felis posuere ut. Ut ornare laoreet tristique.
</p>
</body>
</html>
Pros
Website expansion is easier. All you realistically have to do is add more pages with the same CSS reference link.Generally, the more pages you have using one stylesheet, the greater the benefit of the External Style Sheets implementation. If you wanted to turn the paragraphs to a less glaring deep grey, all you would have to do is amend one stylesheet, and all pages referencing that stylesheet would have their paragraphs turned grey.
Great for maintenance. Because the stylesheet is in a separate file from the HTML, it's less probable that you will need to edit the HTML file itself, which can be messy. Also, this lends itself to better collaboration. Imagine there's a team maintaining the site. One is the copywriter who needs to update the text, and the other is the designer. If the style and content are in separate files, the designer and the copywriter can edit the stylesheet and the HTML respectively, concurrently.
Due to caching, the CSS file only needs to be loaded once for it to work. The HTML pages, without CSS, will load faster on their own.
Cons
Could be overkill if you're definitely only going to make one small page or two.Use Cases
Using one stylesheet to style multiple pages. In fact, as long as you have multiple pages you want to maintain, chances are that even if you end up utilizing other CSS implementations, you will use External Style Sheets as a base implementation.
When either or both the styles and the HTML content are extremely long, it's also a good idea to keep them separate. Because the annoying thing about styles is that they can break if you miss out an opening or closing symbol. Same for HTML. You really don't want to risk screwing up your HTML or CSS due to constant (and unnecessary) edits. Sure, it's easily fixed. It's also a pain in the ass.
No comments:
Post a Comment