Introduction

Just take a moment and imagine how a webpage will look without the beautiful styles, colors, patterns, animations, etc. This is just like saying "imagine a world without colors and our beautiful nature". This would probably make browsers be the least visited places as compared to libraries. In this article, we will learn the different ways in which we can include CSS into your HTML files.

What is CSS

Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation of a document ( that is the design, layout and variations in display for different devices and screen size ) written in a markup language like HTML. The name cascading determines which style rule applies if more than one rule matches a particular element.

Ways to apply CSS

There are three ways of including a style sheet

1. External

2. Internal

3. Inline

4. Import

External

The external style sheet is a file that is linked to the HTML document(s) which styles it according to the style rules you applied. The separation of HTML from CSS makes it easier to maintain sites, and share style sheets across pages, This is referred to as the separation of structure (or: content) from presentation. It is generally used when you want to make changes on multiple pages. You can link four HTML files to one external style sheet and do all the styling for the four HTML files on that one style sheet.

Steps

You can have multiple external style sheets for one HTML file and you can have one external style sheet for multiple HTML files. You might be asking How can the HTML file(s) know who the style sheet file is? well, don't be scared yet because we will help them find each other with the following steps.

1. Create a new file and save the file as style.css in the same directory as the HTML file. You can name the file anything but it must have the .css extension.
2. Link the CSS file to your HTML using the link element which you create after the title element in the head section.
3. You have now created and linked your file you can start styling.

Note: You can use class selector, id selectors, type selectors, pseudo selectors, etc in the external style sheet

Internal css

The internal or embedded style sheet is used to add a unique style for a single HTML page. It is defined in the head section of the HTML document.

Steps

1. You go to the head section after your title you create a style tag.
2. In the style tag, you've created you add your styles

Note: The internal CSS cannot control styles for multiple documents. The internal style sheet is applicable to the page in which it is included. You can only style the visited, hover, active, and the link color of an anchor tag alone.

a:hover{
   color: orange;
}

Inline

The inline style sheet is used to apply styles to a specific HTML element. Inline styles can be attached to an element using a style attribute.

Steps

1. You locate the element you want to style at the opening tag add a style attribute.
2. When you have added the style attribute you can now give it styles.

Note: Using inline styles is considered bad practice because style rules are fixed directly inside the selected HTML tag which makes the presentation become mixed with content of the document which makes updating and maintaining a website very difficult. It is impossible to style pseudo selectors with inline styles.

Import

Another way to add CSS to an HTML page is with the @import rule. This rule allows you to attach a new CSS file from within CSS itself. Here's how this looks:

       @import "responsive.css";

Make "responsive" the name of your CSS file and ensure to include the correct path to the file. The path is relative to the current CSS file that you are in.

Multiple stylesheets

If some properties have been defined for the same selector (element) in different style sheets, the styles from the last given style sheet will be used.

Assume that an external style sheet has the following style for the h1 element:

h1{
   color: green; 
   text-decoration: underline;
}

Then, assume that an internal style sheet also has styles for the h1 element:

h1 {
  color: orange;   
  text-decoration: underline;
}

If the internal stylesheet comes after the link to the external style sheet the h1 element will have the styles of the internal style sheet:

However, if the link to the external style sheet comes after the internal style sheet the h1 element will have the styles of the external style sheet:

Conclusion

Our webpages like Twitter, Hashnode, and all other webpages you use on a daily base look beautiful and fascinating because they have a cascading stylesheet linked to them which makes them appear the way they do.