Skip to content

Instantly share code, notes, and snippets.

@mikedamage

mikedamage/snip.html

Created February 17, 2015 14:26
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save mikedamage/b941496386799e6a40c5 to your computer and use it in GitHub Desktop.
Save mikedamage/b941496386799e6a40c5 to your computer and use it in GitHub Desktop.
Download ZIP
Inline styles vs. classes and external stylesheets
Raw
snip.html
<!-- This is bad for business: -->
<p style="margin: 15px;">
<strong style="color: #f00;">This is important!</strong>
<span style="color #ccc;">This isn't.</span>
</p>
<!-- Instead, define a class with a semantic, descriptive name, and style it in an external stylesheet: -->
<!-- in <head>: -->
<link rel="stylesheet" href="style.css">
<!-- in <body>: -->
<p class="indent">
<strong class="important">This is important!</strong>
<span class="unimportant">This isn't.</span>
</p>
Raw
style.css
.indent {
margin: 15px;
}
.important {
color: #f00;
}
.unimportant {
color: #ccc;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment