Get DevWP - WordPress Development Theme

CSS Basics

In this tutorial I will show you 3 different ways you can include CSS into your HTML Documents and give you some basic code to play with.

Before you move forward, it’s important that you have a solid understanding of HTML since CSS works in conjunction with it. If you need a refresher, then checkout my HTML Tutorials.

Including CSS in your HTML Documents

These are the three ways to include CSS:

  1. Inline Styles – using the style attribute in the HTML start tag.
  2. Embedded Styles – using the opening and closing style element in the head section of your HTML Document.
  3. External Style Sheets – using the <link> element in the head section of your HTML document that points to the location of the CSS file. This is the
    preferred method since it’s easier to maintain styles that should be global.

Inline Styles

Inline styles are used to add a unique style to an HTML element by putting the CSS rules into the HTML start tag with the style attribute.

The style attribute uses property and value pairs separated by a semi colon.



<h2 style="color:blue; font-size:40px;">This is a heading</h2>
<p style="color:red; font-size:30px;">This is a paragraph.</p>

You should only use inline styles as a last resort to provide some custom styling that won’t generally be found elsewhere on your website. The reason for this is maintaining inline styles can become extremely time consuming as your website grows.

Embedded Style Sheets

Embedded Style Sheets aka Internal Style Sheets only affect the HTML Document they are placed in. You define your Embedded CSS Styles in the head section of your document using the style element.


<head>
    <title>Embedded CSS</title>
    <style>
        body {
            background-color: white;
        }

        p {
            color: black;
        }
    </style>
</head>

External Style Sheets

External Style Sheets are the preferred way to include your CSS since it’s easier to maintain and reduces potential errors in your styling if you forget to change how an element is styled.

You create a file with the file extension .css and you link to that file in the head section of your website.


body {
    background: black;
    font: 24px;
}
h1 {
    color: #eee;
}

Linking to External Style Sheets


<head>
    <title>External Style Sheet</title>
    <link rel="stylesheet" href="css/style.css">
</head>


View Our Themes