Css how to insert css

CSS-How to insert CSS
By- Sumit Rana

Three Ways To Insert CSS
• Inline Style
• Internal Style
• External Style

Inline Style
• Inline Style is use for a Specific Element.
• It is used as a style attribute of a particular tag.
• The style attribute contains the CSS property.
• It is used only for one element.

Inline Style Example
• <h1 style="color:blue;font-size:30px;">This is a heading</h1>
• <p style=“font-size=20px;text-align=center”> This is a Paragraph</p>

Internal Style
• It Specify the CSS Style in the head section of the HTML document.
• It is used for multiple tags.
• <style> tag is used in the head section.
• <style> tag contains the style properties.

Internal Style Example
• <head>
<style>
body {
background-color: cyan;
}
h1 {
color: red;
font-size: 40px;
}
</style>
</head>

External Style
• It is used to put a CSS Style into number of HTML documents.
• It just links the CSS Style into the head section of HTML.
• Just one file can be used to design the entire style of the website.
• Each page should contain the <link> tag in the head section which gives
reference to Style sheet to the page.

External Style Example
• <head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

Difference
Inline
• CSS Style- Inside
tag
• Affects only one
Tag
Internal
• CSS Style- Reference
head section
• Affects Multiple Pages
External
• CSS Style- Inside
head section
• Affects Multiple
Tag

Difference
Inline
• <h1 style="color:b
lue;font-
size:30px;">This is
a heading</h1>
Internal
• <head>
<link rel="stylesheet" type
="text/css" href="mystyle.
css">
</head>
External
• <head>
<style>
h1 {
color: red;
font-size: 40px;
}
</style>
</head>

Css how to insert css

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to Css how to insert css

Similar to Css how to insert css (20)

Recently uploaded

Recently uploaded (20)

Css how to insert css