
- CSS Tutorial
- CSS - Home
- CSS - Introduction
- CSS - Syntax
- CSS - Inclusion
- CSS - Measurement Units
- CSS - Colors
- CSS - Backgrounds
- CSS - Fonts
- CSS - Text
- CSS - Images
- CSS - Links
- CSS - Tables
- CSS - Borders
- CSS - Margins
- CSS - Lists
- CSS - Padding
- CSS - Cursors
- CSS - Outlines
- CSS - Dimension
- CSS - Scrollbars
- CSS Advanced
- CSS - Visibility
- CSS - Positioning
- CSS - Layers
- CSS - Pseudo Classes
- CSS - Pseudo Elements
- CSS - @ Rules
- CSS - Text Effects
- CSS - Media Types
- CSS - Paged Media
- CSS - Aural Media
- CSS - Printing
- CSS - Layouts
- CSS - Validations
- CSS3 Tutorial
- CSS3 - Tutorial
- CSS3 - Rounded Corner
- CSS3 - Border Images
- CSS3 - Multi Background
- CSS3 - Color
- CSS3 - Gradients
- CSS3 - Shadow
- CSS3 - Text
- CSS3 - Web font
- CSS3 - 2d transform
- CSS3 - 3d transform
- CSS3 - Animation
- CSS3 - Multi columns
- CSS3 - User Interface
- CSS3 - Box Sizing
- CSS Responsive
- CSS - Responsive Web Design
- CSS References
- CSS - Questions and Answers
- CSS - Quick Guide
- CSS - References
- CSS - Color References
- CSS - Web browser References
- CSS - Web safe fonts
- CSS - Units
- CSS - Animation
- CSS Resources
- CSS - Useful Resources
- CSS - Discussion
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; }
- Related Articles
- 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
- How to include CSS in HTML Pages
- Difference Between HTML and CSS
- Check for existing documents/embedded documents in MongoDB
- Including third party libraries in SAPUI5 Project
- Commons including duplicates in array elements in JavaScript
- Position your HTML element with CSS
- Difference of two lists including duplicates in Python
- How to use CSS style in PowerShell HTML Output?
- How to use inline CSS (Style Sheet) in HTML?
- How to use internal CSS (Style Sheet) in HTML?

Advertisements