Back to: HTML Tutorials
CSS in HTML with Examples
In this article, I am going to discuss CSS in HTML with Examples. Please read our previous article where we discussed Styles in HTML with Examples. At the end of this article, you will learn everything about HTML CSS with Examples.
CSS in HTML
CSS is an abbreviation for Cascading Style Sheets. The term “cascading” refers to the fact that a style given to a parent element will be applied to all children elements inside that parent. CSS saves a lot of time. It can control the layout of various web pages at the same time.
What is CSS?
The layout of a web page is formatted using Cascading Style Sheets. It defines the overall appearance of the website. The term cascading refers to the fact that a style given to a parent element will also apply to all children elements inside the parent. So, if you set the color of the body text to “orange,” all text elements within the body will have the same color until you specify a different color.
To style a webpage, CSS includes several style properties such as background color, padding, margin, border color, and many more.CSS has a name-value pair for each property, and each property is separated by a semicolon (;)
Using CSS in HTML
There are three ways to include CSS in HTML documents:
- Inline – by using the style attribute inside HTML elements.
- Internal – by using a <style> element in the <head> section.
- External – by using a <link> element to link to an external CSS file.
The most common method of adding CSS is to keep the styles in separate CSS files.
Inline CSS in HTML
An inline CSS is used to give a single HTML element a unique look. The Html style attribute is used to apply inline styling to elements. We can apply multiple properties to a single element but each property should be separated by a semicolon (;). The example given below sets the text color of the <h1> element to tomato, and the text color of the <p> element to slate blue:
Example: Inline CSS
<!DOCTYPE html> <html> <body> <h1 style="color:tomato;">Hello</h1> <p style="color:slateblue;">Welcome to dot net tutorials</p> </body> </html>
When you run the above HTML code, you will get the following output in the browser.
Internal CSS in HTML
An internal CSS is used for formatting a single-page HTML document. An internal CSS is defined inside the <head> section of an HTML document using the <style> element. Class and Id attributes are used to apply internal CSS to the HTML element. Rules defined in the internal style sheet override the rules defined in an external CSS file. Because Internal stylings are given more priority than external stylings.
Inline styling is given more priority than internal and external styling. The example is given below sets the background color of body light blue, and the text color of the <h1> element to black, and the text color of the <p> element to purple:
Example: Internal CSS
<!DOCTYPE html>
<html>
<head>
<style>
body{
background-color:lightblue;
}
h1{
color:black;
}
p{
color:purple;
}
</style>
</head>
<body>
<h1>Hello</h1>
<p>Welcome to dot net tutorials</p>
</body>
</html>
When you run the above HTML code, you will get the following output in the browser.
External CSS in HTML
An external style sheet is used to define the style for multiple HTML pages. To use an external style sheet we need to link it using either the complete URL or a relative path to the current web page. If we have multiple HTML pages for an application then we can use external CSS. A cascading style sheet file is saved with an extension .css.
The example given below sets the background color of body light green, and the text color of the <h1> element to tomato, and the text color of the <p> element to slate blue
Example: External CSS
Styles.css
body{
background-color:lightgreen;
}
h1{
color:tomato;
}
p{
color:slateblue;
}
Index.html
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="stylesheet.css"> </head> <body> <h1>Hello</h1> <p>Welcome to dot net tutorials</p> </body> </html>
When you run the above HTML code, you will get the following output in the browser.
Link to External CSS in HTML
External style sheets can be linked using either the complete URL or a relative path to the current web page.
Example
In this example, a complete URL is being used to link to a style sheet.
<link rel=”stylesheet” href=”https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css”>
Example
This example points to a style sheet located in the tutorial folder on the current website.
<link rel=”stylesheet” href=”/tutorial/styles.css”>
Example
This example points to a style sheet in the same directory as the current page.
<link rel=”stylesheet” href=”styles.css”>
In the next article, I am going to discuss Iframes in HTML with Examples. Here, in this article, I try to explain CSS in HTML with Examples and I hope you enjoy this HTML CSS with Examples article.
About the Author: Pranaya Rout
Pranaya Rout has published more than 3,000 articles in his 11-year career. Pranaya Rout has very good experience with Microsoft Technologies, Including C#, VB, ASP.NET MVC, ASP.NET Web API, EF, EF Core, ADO.NET, LINQ, SQL Server, MYSQL, Oracle, ASP.NET Core, Cloud Computing, Microservices, Design Patterns and still learning new technologies.