2. Organizing CSS declarations

CSS can be defined several ways:

1. Inline as part of an HTML tag
2. In an html file within <style> tag
3. External

2.1. Inline

This means specifying styles within an HTML tag. It is a quick and dirty way to edit just one DOM element. This approach is not recommended for large scale applications because it's difficult to maintain.

<p class="myClass">
  <a href="http://www.sci.brooklyn.cuny.edu/cis" style="background-color: yellow;">
    CIS Department
  </a>
</p>

Instead, it's best to use classnames with DOM element tags and declare styles with classnames.

2.2. Style Block {#style-block}

When you have several tags reusing the same styles, it can be helpful to include a block in your HTML head section. For example, if we wanted to style all links with a yellow background, you can use the following style declaration a { background-color: yellow; } instead of defining the style in each <a> tag.

<style>
a {
  background-color: yellow;
}
p.myClass {
  color: #AAAAAA;
  font-family: monospace;
  line-height: 1em;
}
</style>

2.3. Linking external style sheets

A common best practice with style sheets is to use a separate CSS file.

<link rel="stylesheet" href="css/style.css"`>

One of the advantages with this approach(with select text editor settings) is the ability to have dual pane view (html file and css file side by side), or to have syntax highlighting turned specific to CSS grammar.