Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How Many Ways Can You Insert CSS in HTML?
CSS is an abbreviation for Cascading Style Sheets. It specifies how HTML elements should appear on screen, paper, or in other media. It can control the layout of multiple web pages at once, saving time and effort. It can be used for a variety of stylistic purposes, such as changing the color of a page's text and background, removing underline from links, and animating images, text, and other HTML elements.
CSS can be added to HTML in three ways. To style a single HTML element on the page, we can use inline CSS in a style attribute. We can include an internal stylesheet in your HTML document by including CSS in the head section. We can also link to an external stylesheet that contains all of your CSS apart from your HTML.
Inline CSS: The style attribute must be placed within an HTML element.
Internal CSS: Requires the
<style>element to be placed within an HTML file's head section.External CSS: Requires the use of the
<link>element within the head section of an HTML file.
In this article we shall discuss in detail about these three ways of inserting CSS in HTML.
Inline CSS
Inline CSS allows us to include CSS "in" HTML. To include inline CSS, we must use a style attribute inside the opening tag of an HTML element.
Syntax
Following is the syntax for inline CSS
<element_name style="CSS property: attribute_value">Content</element_name>
Inline CSS, also known as the "embedded stylesheet," takes precedence over any other CSS targeting the same elements. However, using inline styles is not recommended because it results in a lot of repetition because the styles cannot be reused elsewhere. Nevertheless, they are sometimes the best (or only) option, such as when targeting a single element with distinct style properties.
Example
In this example we will style HTML elements using inline CSS
<!DOCTYPE html>
<html>
<head>
<title>An example of inline CSS</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 10px;">
<div style="border:2px solid blue; width:300px; padding:10px; margin:10px;">
<p style="background-color:lightblue; color:navy; font-weight:bold; padding:5px; margin:0;">This is a paragraph styled using inline CSS</p>
</div>
</body>
</html>
The output of the above code is
This is a paragraph styled using inline CSS (navy text on light blue background, inside a blue bordered box)
Internal CSS
Internal CSS is one of the most commonly used CSS forms for changing, styling, and modifying a single web page's unique styles. Internal CSS can be used by incorporating the <style> element in the <head> section of an HTML web page. A CSS property and value are still set, but instead of being placed directly inside a style attribute, they are enclosed in brackets and defined by a CSS selector.
Syntax
Following is the syntax for internal CSS
<!DOCTYPE html>
<html>
<head>
<style>
CSS_selector {
CSS_property: attribute_value;
}
</style>
</head>
<body>
<!-- HTML content -->
</body>
</html>
Internal CSS is considered a better practice than inline CSS because it allows us to style groups of elements at once, rather than having to add the same style attributes to elements repeatedly. It can be applied to an entire web page but not to multiple web pages, and we can style multiple web pages with the same code on each page.
It is also ideal for one-page websites because it separates the CSS and HTML into different sections while keeping them in the same document. If we have a multi-page site and want to make changes across the board, we must open each HTML file representing those pages and add or change the internal CSS in each head section.
Example
In this example we will style HTML elements using internal CSS
<!DOCTYPE html>
<html>
<head>
<title>An example of internal CSS</title>
<style>
body {
background-color: lemonchiffon;
font-family: Arial, sans-serif;
}
div {
width: 350px;
background-color: sienna;
margin: 10px;
padding: 15px;
border: 3px solid wheat;
border-radius: 5px;
}
p {
text-align: justify;
color: white;
font-size: 18px;
margin: 0;
}
</style>
</head>
<body>
<div>
<p>All the HTML elements including this paragraph have been styled using internal CSS.</p>
</div>
</body>
</html>
The output of the above code is
All the HTML elements including this paragraph have been styled using internal CSS. (white text on sienna background with wheat border, on lemon chiffon page background)
External CSS
External stylesheets are widely regarded as the most effective way to style the HTML code. They are formatted similarly to internal CSS, but they are not enclosed in <style> tags or placed in the HTML file's head section. Instead, they are completely separate from the HTML and must be placed in a CSS file (with the .css extension). We must simply include a link to this external stylesheet in the head section to be able to use it in our HTML code.
Syntax
Following is the syntax for linking external CSS
<link rel="stylesheet" href="path_to_css_file.css">
There are multiple advantages of external CSS over inline and internal stylesheets
When the style sheet is changed, it affects all linked pages.
We can create style classes that can then be applied to a variety of HTML elements.
It has a unified look and feel across all of its web pages.
Because the CSS file is downloaded once and applied to each relevant page as needed, load times are reduced.
Example
In this example we will style HTML elements using external CSS. First, let's create the CSS file
mystyle.css
body {
background-color: linen;
font-family: Arial, sans-serif;
}
div {
width: 400px;
background-color: powderblue;
border: 3px dashed midnightblue;
padding: 15px;
margin: 20px;
border-radius: 8px;
}
p {
color: midnightblue;
font-size: 18px;
font-weight: bold;
margin: 0;
}
index.html
<!DOCTYPE html>
<html>
<head>
<title>An example of external CSS</title>
<style>
body {
background-color: linen;
font-family: Arial, sans-serif;
}
div {
width: 400px;
background-color: powderblue;
border: 3px dashed midnightblue;
padding: 15px;
margin: 20px;
border-radius: 8px;
}
p {
color: midnightblue;
font-size: 18px;
font-weight: bold;
margin: 0;
}
</style>
</head>
<body>
<div>
<p>External CSS has been used for styling this HTML document.</p>
</div>
</body>
</html>
The output of the above code is
External CSS has been used for styling this HTML document. (midnight blue text on powder blue background with dashed border, on linen page background)
CSS Priority Order
When multiple CSS styles target the same element, the browser follows a specific priority order
Inline CSS Highest priority (overrides internal and external CSS)
Internal CSS Medium priority (overrides external CSS)
External CSS Lowest priority (applied first, can be overridden)
Example CSS Priority Demonstration
<!DOCTYPE html>
<html>
<head>
<title>CSS Priority Example</title>
<style>
p {
color: blue;
font-size: 16px;
}
</style>
</head>
<body style="font-family: Arial, sans-serif; padding: 10px;">
<p>This paragraph uses internal CSS (blue color).</p>
& 
1K+ Views
