CSS, or Cascading Style Sheets, is a critical component of web design and development. It allows developers to add styling and layout to HTML documents, making web pages visually appealing and engaging. There are three ways of inserting a style sheet in HTML documents, which are External CSS, Internal CSS, and Inline CSS. In this tutorial, we will discuss each of these three methods in detail and explain how to use them effectively.
- External CSS
External CSS is the most commonly used method of adding styles to HTML documents. This method involves creating a separate CSS file that contains all the necessary styles and linking it to the HTML document. By separating the CSS code from the HTML code, developers can easily update the styles without touching the HTML code. This method is also beneficial for creating consistent styles across multiple web pages.
To use External CSS, follow these steps:
Step 1: Create a new CSS file and save it with a .css extension.
Step 2: Add the necessary styles to the CSS file.
Step 3: In the HTML document, add a link to the CSS file inside the head section.
|
1 2 3 4 5 |
<head> <link rel="stylesheet" type="text/css" href="styles.css"> </head> |
In this example, the CSS file is named “styles.css.” The href attribute in the link tag specifies the location of the CSS file.
- Internal CSS
Internal CSS involves adding the styles directly to the head section of the HTML document. This method is useful when you only need to add styles to a specific web page, and it is not necessary to reuse the same styles across multiple pages.
To use Internal CSS, follow these steps:
Step 1: Inside the head section of the HTML document, add a style tag.
|
1 2 3 4 5 6 7 |
<head> <style> /* Add styles here */ </style> </head> |
Step 2: Add the necessary styles inside the style tag.
|
1 2 3 4 5 6 7 8 |
<style> body { font-family: Arial, sans-serif; background-color: #ebebeb; } </style> |
In this example, we added styles to the body element to set the font-family and background-color properties.
- Inline CSS
Inline CSS involves adding the styles directly to an HTML element using the style attribute. This method is useful when you need to add styles to a specific element and override any existing styles.
To use Inline CSS, follow these steps:
Step 1: Inside the HTML element, add a style attribute.
|
1 2 3 |
<p style="color: red;">This text is red.</p> |
Step 2: Add the necessary styles to the style attribute.
|
1 2 3 |
<p style="color: red; font-size: 20px;">This red text is 20px.</p> |
In this example, we added a style attribute to the p element and set the color and font-size properties.
Inserting CSS Summary
There are three ways of inserting a style sheet in HTML documents: External CSS, Internal CSS, and Inline CSS. Each method has its own benefits and drawbacks, and the choice of method depends on the specific requirements of the project. External CSS is the most commonly used method and is useful for creating consistent styles across multiple web pages. Internal CSS is useful for adding styles to a specific web page, and Inline CSS is useful for adding styles to a specific HTML element. By using these three methods effectively, developers can create visually appealing and engaging web pages.