How to Add CSS in HTML - Scientech Easy

In this tutorial, we will learn how to add or link CSS in the HTML document or webpage with the help of examples.

Although, we mainly use HTML to make changes to the structure and content of a webpage. HTML defines what elements are on the page, such as headings, paragraphs, links, images, and other multimedia.

However, HTML alone does not have abilities to extensively style or format these elements on the webpage. Here is where we use CSS styles to position and format elements on a webpage.

CSS (which stands for Cascading Style Sheets) is a style sheet language used to format the layout of a HTML webpage. It saves a lot of work of developer. It has the ability to control the layout and styling of more than one webpage all at once by sharing the same styling through an external style sheet.

In CSS, a style is a rule that defines the appearance of an element on a webpage. In other words, the CSS style rule defines how elements within an HTML document should be displayed. We can add or include CSS styles in a head section of an HTML document or in a separate file.

The set of CSS style rules is called a style sheet. It provides a means to separate style from content, such as text, images, videos, and other multimedia. This is ideal for you as a web designer because it gives you the flexibility to easily redesign or rebrand a website.

Ways to Add CSS in HTML

CSS provides extensive control over the presentation of a document written in HTML or XML. With CSS, we can control over the color, background, font, text size, spacing between elements, positioning and layout, background images are to be used, different displays for different devices and screen sizes, and much more!

There are mainly three ways by which we can add CSS in HTML. Each method is suitable for different scenarios and can be chosen based on the specific needs of your project. They are as:

Inline – by using the style attribute inside the opening HTML tags.
Internal – by using a <style> element in the <head> section of an HTML document.
External – by linking an external CSS file using <link> element placed inside <head> section of the HTML document.

However, the most common way to add CSS in HTML code is to keep the styles in external CSS files. Let’s understand all the three ways to add CSS in the HTML one by one.

Adding Inline CSS Style in HTML

In general, we use an inline CSS to provide a unique style to a single HTML element using ‘style’ attribute. This is quick and easy method to apply style to a single element but is generally not recommended for larger projects as it makes the HTML code messy and styles harder to manage.

Steps to Apply Inline CSS Style in HTML:

(1) First, identify the HTML element you want to style.

(2) Add the “style” attribute to the opening tag of an HTML element, such as a heading, paragraph, etc.

(3) Write the CSS property and value within the attribute.

The general syntax to include or add inline CSS style to an HTML element is as follows:

<tagname style="property1: value; property2: value . . . . ">Content</tagname>

In the above syntax,

<tagname>: This is the name of HTML tag where you want to apply an inline style using style attribute. Examples of HTML tag are <div>, <p>, <h1>, <p>, etc.
style: This is the attribute you add to the opening of the HTML tag to define CSS styles directly within your HTML.
property1: value; property2: value . . . . : This is the list of CSS properties inside the quotation marks you want to apply on a single element. A semicolon separates each property with its value.

Let’s take an example in which we will set the text color of the <h1> element to blue, and the text color of the <p> element to red.

Example 1:

<!DOCTYPE html>
<html>
<body>
    <!--Applying an inline style in h1 and p elements using style attribute-->
    <h1 style="color:green;">A Green Heading</h1>
    <p style="color:blue;">A blue paragraph.</p>
</body>
</html>

Output:

Example 2:

<p style="color: blue; font-size: 16px;">This is a blue paragraph.</p>

In this example, we have styled the <p> element directly with two CSS properties: color and font-size. This paragraph will appear in blue text and have a font size of 16 pixels. As you can understand that this method is straightforward for adding CSS styles to individual elements without affecting other elements in the HTML document.

Advantages of Inline Styles:

Quick and easy to implement.
No need to manage separate style sheets.

Disadvantages of Inline Styles:

Clutters the HTML document.
Not useful for styling large website with many pages.
Not useful for repeating styles across multiple elements.

Adding Internal CSS

An internal style sheet, also called an embedded style sheet, defines an internal CSS style for a single HTML webpage. We define internal CSS within a <style> element that is placed inside the <head> section of an HTML document or page.

If you want to create styles for a single webpage that differs from the rest of the website, then use an internal style sheet. An internal CSS style takes precedence over an external style sheet.

Steps to Apply Internal CSS in HTML:

(1) Write CSS style rules between the opening <style> and closing </style> tags.

(2) Place the <style> tag inside the <head> section of the HTML document.

The general syntax to define internal style rules in the CSS is as:

<style>
selector {
    property: value;
    property2: value2;
   /* Add more properties as needed */
}
</style>

In the above syntax, selector defines the type of selectors, such as body, h1, p, div, class selectors (e.g., .classname), and id selector (e.g., #idname).

Let’s take an example in which we will set the text color of all the <h1> elements to red, and the text color of all the <p> elements to blue of the webpage. Furthermore, we will display the page of a “powderblue” background color.

Example 2:

<!DOCTYPE html>
<html>
<head>
<!--Applying internal CSS-->
<style>
    body { background-color: powderblue;}
    h1 { color: red;}
    p { color: blue;}
</style>
</head>
<body>
    <h1>This is a red heading</h1>
    <p>This is a blue paragraph.</p>
</body>
</html>

Output:

Advantages of Internal CSS:

We can keep CSS separate from HTML elements.
With internal CSS, we can control the styles of a single HTML document with ease.
Internal CSS is especially useful when styles are unique to a single page of a website.
It takes precedence over external style sheets and browser defaults. However, an inline style can override it.
Easy maintenance.

Disadvantages of Internal CSS:

Internal CSS is not reusable across multiple webpages of a website.
It can make the HTML file larger.
It can also slow down the page load speed.

Linking External CSS

External CSS is an external style sheet or CSS file that contains all the styles you want to apply to multiple pages in the website. This style sheet is a text file with the .css file extension. We can write external style sheet in any text editor.

Steps to Link External CSS:

(1) Create a separate .css file and write your CSS rules in this file.

(2) Link or attach this file to your HTML document through the <link> tag placed inside the head section of the webpage.

Here is the general syntax for linking an external CSS file:

<link rel="stylesheet" type="text/css" href="path_to_stylesheet.css">

In the above syntax,

rel=”stylesheet”: This is an attribute-value pair that specifies the relationship between the current document and the linked file. In this case, the linked file is a style sheet.
type=”text/css”: This attribute specifies the MIME type of the linked document. We often include it for clarity. However, it is not strictly necessary in HTML5 as CSS is the default style language.
href=”path_to_stylesheet.css”: The href attribute specifies the path to the external stylesheet file. This path can be an absolute URL or a relative path to a file.

Using this syntax, you can easily link any external CSS file to your HTML document.

Let’s take an example in which we will link an external CSS style sheet to an HTML document. We have created a CSS file named styles.css located in a folder named css within the same directory as your HTML file.

Example 3:

CSS File: ‘styles.css’

body {
   margin: 0;
   padding: 0;
   font-family: Arial, sans-serif;
   background-color: #f4f4f4;
}
/* Header styles */
h1 {
  color: #333;
  text-align: center;
  margin-top: 20px;
}
/* Paragraph styles */
p {
  color: #666;
  font-size: 16px;
  text-align: justify;
  margin: 20px 40px;
}
/* Link styles */
a {
  color: #0056b3;
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}

HTML Code:

<!DOCTYPE html>
<html>
<head>
    <!-- Link to External CSS File -->
    <link rel="stylesheet" type="text/css" href="css/styles.css">
</head>
<body>
    <h1>This is a h1 heading</h1>
    <p>This is a paragraph.</p>
</body>
</html>

In this example, we have placed the <link> tag inside the head section of the HTML document that points to the styles.css file located in the css folder. The href attribute inside the <link> tag specifies the relative path to the external CSS file. This tells the browser where to find the CSS file to apply the styles defined in it to the HTML elements.

By linking to the external CSS file in this way, we can apply all the styles defined in styles.css to all the elements of the HTML document. This method keeps HTML and CSS files separate that makes maintenance easier, especially for larger sites having multiple pages.

Advantages of linking External CSS:

Keeps HTML and CSS files clean and separate.
You can reuse CSS file across multiple HTML documents by linking.
Any changes to the CSS file automatically reflect across all linked HTML documents.

Disadvantages of linking External CSS:

Requires managing another file.
If the CSS file fails to load, the HTML elements on the webpage will not be style.

Each method has its own place in web development. Inline CSS is excellent for quick tests or overrides, while internal CSS is useful for specific pages with a unique design. External CSS, on the other hand, is ideal for comprehensive styling across large sites having multiple webpages.

Depending on your specific needs, you can choose any of these methods to add CSS to your an HTML document. We hope you will have understood all the methods of adding CSS in HTML code.