CSS Introduction

What is CSS?

  • CSS stands for Cascading Style Sheets
  • CSS describes how HTML elements are to be displayed on screen, paper, or in other media
  • CSS saves a lot of work. It can control the layout of multiple web pages all at once
  • External stylesheets are stored in CSS files

Why Use CSS?

CSS is used to define styles for your web pages, including the design, layout and variations in display for different devices and screen sizes.

CSS Solved a Big Problem

HTML was NEVER intended to contain tags for formatting a web page!

HTML was created to describe the content of a web page, like:

<h1>This is a heading</h1>

<p>This is a paragraph.</p>

When tags like <font>, and color attributes were added to the HTML 3.2 specification, it started a nightmare for web developers. Development of large websites, where fonts and color information were added to every single page, became a long and expensive process.

To solve this problem, the World Wide Web Consortium (W3C) created CSS.

CSS removed the style formatting from the HTML page!

If you don't know what HTML is, we suggest that you read our HTML Tutorial.

CSS Saves a Lot of Work!

The style definitions are normally saved in external .css files.

With an external stylesheet file, you can change the look of an entire website by changing just one file!

The Difference Between Inline, External and Internal CSS Styles

There are three ways you can use to implement CSS: internal, external, and inline styles. Let’s break them down.

Internal CSS

Internal or embedded CSS requires you to add <style> tag in the <head> section of your HTML document.

This CSS style is an effective method of styling a single page. However, using this style for multiple pages is time-consuming as you need to put CSS rules to every page of your website.

Here’s how you can use internal CSS:

  1. Open your HTML page and locate <head> opening tag.
  2. Put the following code right after the <head> tag
<!DOCTYPE html>
<html>
    <head>
        <style>
            body {
                background-color: blue;
            }
            h1 {
                color: red;
                padding: 60px;
            } 
        </style>
    </head>
    <body>
        <h1>Learn Computer Academy Tutorials</h1>
        <p>This is our paragraph.</p>
    </body>
</html>

Advantages of Internal CSS:

  • You can use class and ID selectors in this style sheet. Here’s an example:
    • .class {
    property1 : value1; 
    property2 : value2; 
    property3 : value3; 
}
#id {
    property1 : value1; 
    property2 : value2; 
    property3 : value3; 
}
  • Since you’ll only add the code within the same HTML file, you don’t need to upload multiple files.

Disadvantages of Internal CSS:

  • Adding the code to the HTML document can increase the page’s size and loading time.

External CSS

With external CSS, you’ll link your web pages to an external .css file, which can be created by any text editor in your device (e.g., Notepad++).

This CSS type is a more efficient method, especially for styling a large website. By editing one .css file, you can change your entire site at once.

Follow these steps to use external CSS:

  1. Create a new .css file with the text editor, and add the style rules. For example:
    2. .xleftcol {
   float: left;
   width: 33%;
   background:#809900;
}
.xmiddlecol {
   float: left;
   width: 34%;
   background:#eff2df;
}
  2. In the <head> section of your HTML sheet, add a reference to your external .css file right after <title> tag:
<link rel="stylesheet" type="text/css" href="style.css" />

Note: Don’t forget to change style.css with the name of your .css file.

Advantages of External CSS:

  1. Since the CSS code is in a separate document, your HTML files will have a cleaner structure and are smaller in size.
  2. You can use the same .css file for multiple pages.

Disadvantages of External CSS:

  1. Your pages may not be rendered correctly until the external CSS is loaded.
  2. Uploading or linking to multiple CSS files can increase your site’s download time.

Inline CSS

Inline CSS is used to style a specific HTML element. For this CSS style, you’ll only need to add the style attribute to each HTML tag, without using selectors.

This CSS type is not really recommended, as each HTML tag needs to be styled individually. Managing your website may become too hard if you only use inline CSS.

However, inline CSS in HTML can be useful in some situations. For example, in cases where you don’t have access to CSS files or need to apply styles for a single element only.

Let’s take a look at an example. Here, we add an inline CSS to the <p> and <h1> tag:

<!DOCTYPE html>
<html>
<body style="background-color:black;">
    <h1 style="color:white;padding:30px;">Hostinger Tutorials</h1>
    <p style="color:white;">Something usefull here.</p>
</body>
</html>

Advantages of Inline CSS:

  1. You can easily and quickly insert CSS rules to an HTML page. That’s why this method is useful for testing or previewing the changes, and performing quick-fixes to your website.
  2. You don’t need to create and upload a separate document as in the external style.

Disadvantages of Inline CSS:

  1. Adding CSS rules to every HTML element is time-consuming and makes your HTML structure messy.
  2. Styling multiple elements can affect your page’s size and download time.

Conclusion

In this tutorial, you’ve learned the difference between the three types of CSS: internal, external, and inline. Here’s the recap:

  1. Internal or embedded ⁠— add <style> tag in the <head> section of HTML document
  2. External ⁠— link the HTML sheet to a separate .css file
  3. Inline ⁠— apply CSS rules for specific elements.
Previous Next