Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
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 colour 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. The syntax is as follows:
<element_name style="CSS property: attribute_value">
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>
<div style="border:2px solid blue; width:230px; padding:5px">
<p style="background-color:lightblue; color:navy; font-weight:bold">This is a paragraph styled using inline CSS</p>
</div>
</body>
</html>
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. 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.
<!DOCTYPE html>
<html>
<head>
<style>
CSS selector {
CSS property_name: attribute_value;
}
</style>
</head>
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 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;
}
div{
width:300px;
background-color:sienna;
margin:10px;
padding:10px;
border:5px solid wheat;
}
p{
text-align:justify;
color:white;
font-size:18px;
}
</style>
</head>
<body>
<div>
<p>All the HTML elements including this paragraph have been styled using internal CSS.</p>
</div>
</body>
</html>
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.
<link rel="stylesheet" href="path_to_css-file">
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.
mystyle.css
body{
background-color:linen;
}
div{
width:480px;
background-color:powderblue;
border:3px dashed midnightblue;
padding:5px;
margin:20px;
}
p{
color:white;
font-size:18px;
font-weight:bold;
}
index.html
<!DOCTYPE html>
<html>
<head>
<title>An example of external CSS</title>
<style>
body{
background-color:linen;
}
div{
width:480px;
background-color:powderblue;
border:3px dashed midnightblue;
padding:5px;
margin:20px;
}
p{
color:white;
font-size:18px;
font-weight:bold;
}
</style>
</head>
<body>
<div>
<p>External CSS has been used for styling this HTML document.</p>
</div>
</body>
</html>
198 Views
