Advertisement

Advertisement


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.


<!DOCTYPE html>
<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

Inline CSS Examples

This is a heading

This is a paragraph.

This is some text content.

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.


<!DOCTYPE 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

Embedded CSS

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:


<!DOCTYPE html>
<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

External CSS

This is a heading.

This is a paragraph.










Become a Patron!

Note: If the updated content is not visible to you please refresh the cookies by pressing CTRL + Shift + R.