Inline Styling
This is where the style is implemented within the HTML tag itself, as opposed to being in a style tag in the head tag of a page.
In code, it looks like this.
index.html
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p style="color: #FFAA00;">
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>
</head>
<body>
<p style="color: #FFAA00;">
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
It's really quick, and it overrides both External Style Sheets and Internal Style Sheets. When you want to be guaranteed that a style will be applied regardless of what other rules may have been implemented, this is your guy.Cons
When overused, it bloats the HTML, causing it to be hard to maintain and load slower.The example below shows multiple tags styled this way in one page. That's painful enough on its own. When you have to maintain multiple pages of this, the pain increases exponentially.
index_nightmare.html
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p style="color: #FFAA00;">
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>
<p style="color: #FFAA00;">
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>
<p style="color: #FFAA00;">
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>
</head>
<body>
<p style="color: #FFAA00;">
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>
<p style="color: #FFAA00;">
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>
<p style="color: #FFAA00;">
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>
Use Cases
Useful when you don't have access to the existing External Style Sheet.When the page you're writing is a quick, throwaway hack which you will never touch again or acknowledge in any way.
If you want things done quickly without thought to future maintenance, i.e, under some kind of insane deadline.
If you're some kind of masochist.
If you're not the poor bastard who is going to be maintaining these pages.
Final Notes
CSS is an indelible part of front-end web development today, and while its inclusion is something of a given, its implementation is the next most important factor. Properly implemented CSS will require a bit more effort up-front, but the maintenance benefits are worth it.It's also a valuable way to separate style from markup (unless for some inexplicable reason you insist on using Inline Styling) and in a tech world where Separation of Concerns is something of an industry standard, any developer would do well to take heed.
Signing off in style,
T___T
T___T
No comments:
Post a Comment