- Trending Categories
Data Structure
Networking
RDBMS
Operating System
Java
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Including CSS in HTML Documents
To include CSS in HTML documents, we can either include them internally, inline or link an external file.
Syntax
The syntax for including CSS files in HTML is as follows
/*inline*/ <element style="/*declarations*/"></element> /*internal*/ <head> <style> /*declarations*/ </style> </head> /*external*/ <head> <link rel="stylesheet" href="#location"> </head>
Example
The following examples shows the linking of CSS file in HTML Documents
Inline CSS
<!DOCTYPE html> <html> <head> </head> <body> <p style="font-family: Forte;">Demo text</p> <p style="background-color: lightblue;">This is Demo text</p> <img src="https://www.tutorialspoint.com/memcached/images/memcached.jpg" style="border: 3px groove orange;"> </body> </html>
Output
This gives the following output −
Example
Internal linking
<!DOCTYPE html>
<html>
<head>
<style>
div {
margin: auto;
padding: 15px;
width: 33%;
border: 2px solid;
border-radius: 5%;
}
div > div {
border-color: transparent;
box-shadow: inset 0 0 6px red;
}
div > div > div {
border-color: red;
}
</style>
</head>
<body>
<div>
<div></div>
<div>
<div></div>
</div>
<div></div>
</div>
</body>
</html>Output
This gives the following output −
Example
External linking
In CSS, you can also include an external css file and place the css styles in it. The same can be referred from the HTML file as shown in the below example −
<!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <p>Demo text</p> <p>Demo text again</p> </body> </html>
Output
This gives the following output −
Following is the style.css −
p {
text-decoration: overline;
text-transform: capitalize;
}
Updated on 08-Jan-2020 12:03:37
- Related Questions & Answers
- Including an external stylesheet file in your HTML document
- MongoDB query to get minimum and maximum value from documents including some duplicate records
- How to include JavaScript in HTML Documents?
- Set printing double-sided documents with CSS
- CSS Image Opacity for All Web Browsers including IE 8 and less
- Including third party libraries in SAPUI5 Project
- Commons including duplicates in array elements in JavaScript
- Difference Between HTML and CSS
- Check for existing documents/embedded documents in MongoDB
- Difference of two lists including duplicates in Python
- How to include CSS in HTML Pages
- Position your HTML element with CSS
- Finding array intersection and including repeating elements in JavaScript
- MySQL edit and update records including employee salary
- How to bundle a Python Tkinter application including dependencies?
Advertisements