3 Ways to Add CSS in Your Website

Cascading Style Sheets (CSS) is an easy way to define styles to any HTML element on your web page. Sometimes when you are viewing a page you might have wondered how the beautiful gradient color boxes or styled buttons are created on that page. You may also be interested in adding such elements on your own websites. Though you might have time to learn the whole CSS stuff, it is necessary for any site owner to understand the basic possibilities of adding CSS codes on a page. In this article, we discuss how you can add those CSS codes on your page.

Types of CSS Styles

There are three possibilities of adding CSS on a page based on your need.

Inline Style – Inline style is directly defined on a HTML element inside a web page affecting only that element.
Internal Style – Internal style is defined within <head> section of a HTML document affecting all particular elements on that page.
External Style – External style are defined in an external text file with an extension .css and linked to the HTML document using <link> tag within <head> section.

1. Inline Style

Most of us want to decorate or align one or two odd elements on page and inline style is the way to do it. For example, you can use the following CSS code to highlight a particular paragraph on a page.

<p style="font-size: 18px; color: green;">
Here is your paragraph content…
</p>

Inline style is defined directly within a HTML element on a page and affects only that element. Though inline style defeats the purpose of using external CSS, it is highly used if the need is to style only a few elements on a site. Content management systems like WordPress offers Custom HTML block for this purpose.

2. Internal Style

What about using a consistent heading style throughout a webpage? Assuming if the page has 10 headings, it is a cumbersome task to use inline styling on 10 different <h1> tags on the same page. Here comes the solution with internal styling.

Internal style is defined within a header portion <head> of the HTML document and affects all similar elements within that page. For example, the below code displays all H1 elements on a page to have left margin of 20 px with red color.

<head>
<title>Internal Style</title>
<style type="text/css">
h1 {margin-left: 20px; color: red;}
</style>
</head>

3. External Style

Now, what about using a consistent styling throughout a site? For example, all H1 elements in a site should be in green color. Here the required CSS styles are to be written on a separate text file and saved with .css extension. This file should be uploaded to a server and then linked to all required HTML pages on a site.

Save the below CSS code as “external-style.css” using a simple Notepad like text editor and upload the file on your server.

.h1 {
margin-left: 20px;
color: red;
}

Now, add the below code in your HTML page to link the external CSS file:

<head>
<link rel="stylesheet" type="text/css" href="external-style.css" />
</head>

Most webmasters modify the current CSS of the theme instead of adding new CSS file.

Which Method is Best?

The answer lies on your need and the hosting company / site builder platform you are using.

How many elements you want to change – a few or a few on few pages or an element style on entire site?
Does your hosting company allow you to edit the source CSS code of the theme?
Does your hosting company allow you to upload an external CSS file on a server?
Do you have an option to add custom HTML code in a page?
Do you have an option to add header codes to your page?
Do you have option to add header codes on your site to link external style sheet?

It is very difficult to choose a single theme for your site satisfying all your needs. Hence modifying existing CSS or adding new CSS is inevitable for webmasters to add additional functionalities and build a competitive site. This is one of the main reasons to avoid free site builder platforms offering free hosting without server access. After certain point of time, migrating the whole site to a new hosting company will become a hectic task.

Example of a CSS Widget

Move the cursor over the below image to see the horizontal flip effect with the text behind the image displayed and linked to another page. The CSS for this widget is only used on this page as an inline style.