Overview
In this tutorial, we will learn to insert CSS code into an HTML document. Actually, there are three ways to add CSS to an HTML document.
- Inline
- Internal CSS
- External CSS file
Inline
Inline styling is used to apply a unique style to a single HTML element in the web page. We can place the inline CSS using the style attribute in the HTML elements.
Example
In the example, we have added paragraph background and added paragraph text color.
<p style=”background: lightgrey; color: blue;”>
This is a sample paragraph text in an HTML document. We can add inline CSS style information.
</p>
Internal CSS
Internal CSS styling is used to define a style for a single HTML document/web page. CSS can be embedded in the HTML document internally within the web document. We can use the <style> element in the <head> section of the HTML document to place the CSS code.
Example
We have embedded CSS code in the head section.
<head>
<title> HTML Tutorials – CSS Demo </title>
<style type=”text/css”>
h1 {
color: blue;
text-align: center;
}
</style>
</head>
External CSS file
We can use one or more external CSS files to style the webpage. An external stylesheet is used to define the style for many HTML documents/web pages.
We can use the <link> tag to link the external CSS file in the <head> section of the HTML document. The external CSS file should be saved with a .css file extension.
Example
<head>
<link rel=”stylesheet” type=”text/css” href=”stylesheet.css” />
</head>
Using external CSS files is the best approach. We can separate the CSS code and the HTML code in this approach. We can add the stylesheet to many HTML pages to get a uniform look and feel to the website.
An external style sheet can be created using any text editor or IDE tools like Eclipse, IntelliJ, NetBeans IDE, etc. The CSS file should not contain any HTML tags.
—
HTML Tutorials
HTML Tutorials on this website:
https://www.testingdocs.com/html-tutorials/
More Information on HTML:
https://www.w3.org/TR/html401/intro/intro.html