Skip to content

Introduction to CSS

Now you know all the basics of HTML and we are now ready to move on to adding styles to your pages. Now we are getting into the fun part of the course.

CSS stands for Cascading Style Sheets and is the way to add color, style and create layouts for our pages. Again, HTML is what we use to describe our content. CSS is what we use to describe presentation of our content.

Creating Styles - 3 Ways

There are three ways to add CSS code for your website: inline styles, internal stylesheet and external stylesheet. The best from all of these is the external stylesheet.

Inline Styles

Inline styles are applied directly to a element in your HTML code. You can add the style attribute to any of your HTML elements and add all the css styles there, separated by semicolon ;. Inline styles are the slowest to render of all of these three ways and can make your HTML code harder to read thus it is recommended not to use them.

However, inline styles can be a great way to make fast experimentations with your site. One option for using inline styles is that once you are happy with your inline styles, then move your CSS code to external stylesheet.

Example:

HTML
<p style="color: red; font-weight: bold">This text is red and bold</p>

Internal Stylesheet

In your <head> section you can wrap your styles inside the <style> element, which contains your styles for this page. I recommend to use external stylesheets instead of this option always when possible. However, sometimes you have to use these internal stylesheets when external stylesheets cannot be used, for example in email templates.

Example:

HTML
<head>
  <style type="text/css">
    p {
      color: red;
      font-weight: bold;
    }
  </style>
</head>

External Stylesheet

External stylesheets are, like the name suggests, external files that contains your css code. External CSS stysheets have the extension css. For example: styles.css. External stylesheets are usually loaded in the <head> section of your page. External stylesheets are the most recommended way to load CSS onto your page.

index.html Example:

HTML
<head>
  <link rel="stylesheet" href="styles.css" />
</head>

styles.css Example:

CSS
p {
  color: red;
  font-weight: bold;
}

Which one to use?

I highly recommend to use the external stylesheet always when possible. This way your page will load the fastest, you can reuse the CSS code you write in other pages of your website and the code is clean as all your CSS code will be separated into it's own file.