How to add CSS
It is an important feature of CSS that it can be added by various ways in a webpage.
There are three ways of inserting a style sheet:
| Use | Description |
|---|---|
| Inline CSS | Using the style attribute in the HTML start tag. |
| Embedded CSS | Using the style Using the <style> tag within the code of the webpage. |
| External CSS | Using the <link> tag to link an external CSS file in the webpage. |
Inline CSS
Inline CSS is used to apply CSS directly on a single element. It can apply the unique style by
putting the CSS directly into the start tag of a particular element. The style attribute is used to give inline CSS.
<html lang="en">
<head>
<title> Inline CSS </title>
<meta charset="UTF-8">
</head>
<body>
<h1 style="color:red; font-size:30px;">This is a heading</h1>
<p style="color:green; font-size:22px;">This is a paragraph.</p>
<div style="color:blue; font-size:14px;">This is some text content.</div>
</body>
</html>
Output
This is a heading
This is a paragraph.
Embedded CSS
It is used when we want to give styling to the whole webpage at once.
It's scope is limited to the only webpage it is written in.
Although it can be written anywhere in the page within <style> tag but is preferred within head section of html.
<html lang="en">
<head>
<title> Embedded CSS </title>
<meta charset="UTF-8">
<style type="text/css">
body { background-color: seagreen; }
p { color: #fff; }
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph of text.</p>
</body>
</html>
Output
This is a heading
This is a paragraph of text.
External CSS
In External CSS, the styling information is written in a separate CSS file which gets linked to a webpage by using <link> tag.
A same CSS file can be added to many webpages to style the elements.
The <link> element goes inside the <head> section:
<html lang="en">
<head>
<title> External CSS </title>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<body>
<h1> This is a heading. </h1>
<p> This is a paragraph. </p>
</body>
</html>
Output
This is a heading.
This is a paragraph.
