
- 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
How to include CSS in HTML Pages
We can include CSS in HTML pages in three ways. These are −
- Inline
Here we specify CSS styles in the style attribute of element. However, it is recommended to internal or external linking of CSS to modularize files.
- Internal
We can include our CSS specifications in the <style> tag inside <head> of the HTML document.
- External
We can link .css files which may be placed locally or on server using the <link> tag. Refactoring files by using external linking of files allows us to have a common CSS file which can be used across multiple webpages.
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 illustrate how CSS files are include in HTML pages
Inline CSS
<!DOCTYPE html> <html> <head> </head> <body> <div style="background-color:mistyrose; height: 50px;"></div> <p style="letter-spacing: 16px; font-size: 1.3em;"> <u>Demo text here</u> </p> </body> </html>
Output
This gives the following output −
Example
Internal linking
<!DOCTYPE html> <html> <head> <style> table, table *{ border: 5px double green; margin: auto; padding: 20px; } tr { box-shadow: 0 0 0 3px red; } td { border-color: blue; } </style> </head> <body> <table> <tr> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> </table> </body> </html>
Output
This gives the following output −
Example
External linking
HTML file
<!DOCTYPE html> <html> <head> <link rel=”stylesheet” type=”text/css” href=”style.css”> </head> <body> <div> <div></div> <div> <div></div> </div> <div></div> </div> </body> </html>
CSS file
div { margin: auto; padding: 15px; width: 33%; border: 2px solid; border-radius: 50%; } div > div { border-color: green; } div > div > div { border-color: red; }
Output
This gives the following output −
- Related Articles
- How to include JavaScript in HTML Documents?
- How to include Modernizr in HTML document?
- How to include an acronym in HTML?
- How to include an abbreviation in HTML?
- How to author fast-loading HTML pages?
- How to include another HTML file in an HTML file?
- How to link pages using absolute URL in HTML?
- How to link pages using relative URL in HTML?
- How to include an input field in HTML?
- How to include the character encoding in HTML?
- How to Parse HTML pages to fetch HTML tables with Python?
- How to convert html pages to pdf using wkhtml2pdf
- Styling html pages in Node.js
- How to include groups of table columns in HTML?
- How to include the audio/video controls in HTML?

Advertisements