External CSS

Use this HTML to point to an external css file. This goes in the head section of your HTML page and is the most widely used method to get CSS on the page.

<link href="/css/styles.css" rel="stylesheet" type="text/css">

Internal CSS

This goes in the head section. This is more powerful than external styles (meaning if this style is competing with external css to style the same element, this one will win).

<style type="text/css">
    td {
        padding: 5px;
    }
</style>

Inline CSS

This goes in the HTML elements. This is more powerful than external and internal CSS, but is considered poor practice in most cases (because its tedious to update).

<p style="color: red; font-size: 24px;">Here is a sentance.</p>

Most Powerful CSS

This trumps all other styles. To be used sparingly. If your CSS is full of !important tags, then something is wrong.

p {
    color: red !important;
}

CSS Comments

Comments are great to organize your stylesheet. They are also great for adding little notes or instructions about your css. Also they can be used to disable a style (but not delete it).

/* Main Section
================================================================ */
body {
    color: black;
    background-color: white; /* dont change this */
    /* padding: 10px; */
}