CSS stands for Cascading Style Sheets.
CSS saves a lot of work. It can control the layout of multiple web
pages all at once.
TYPES OF CSS
- Inline css
- Internal css
- External css
Inline css:-
Inline css used for the unique style for the single page or particular
tag
An inline CSS uses the style attribute of an HTML element.
here see the example of inline CSS <h1>..</h1> tag
with color attribute
Example-
<!DOCTYPE html>
<html>
<body>
<h1 style="color:blue;">This is a Blue Heading</h1>
</body>
</html>
output-
Internal css:-
Internal CSS is apply for the unique style
Internal CSS use for the particular page or single page
when we use Internal CSS you have to use <style>..</style>tag inside the <head>..... </head>
here show the example
Example-
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color:
powderblue;
}
h1{
color: blue;
}
p{
color: red;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
<head>
<style>
body {
background-color:
powderblue;
}
h1{
color: blue;
}
p{
color: red;
}
</style>
</head>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
Output-
External css:-
An external style sheet is used to define the style for many HTML
pages.
You can change the CSS of any page in a single file that
is
style.css
This is external CSS file for many page of web
-
create the new page CTRL+N (style.css)
-
create html-css.html file
-
here we have to need a <link> tag for access style.css file this link tag keep inside the head has
<link rel="stylesheet" href="styles.css">
-
when you use style.css in this file you will not use
<style>..</style> tag
Example-
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
Output:-
this is html-css.htm file
Guys Follow my page☝☝
Thank you for visiting ✌✌👆👆
Output-
- create the new page CTRL+N (style.css)
- create html-css.html file
- here we have to need a <link> tag for access style.css file this link tag keep inside the head has <link rel="stylesheet" href="styles.css">
- when you use style.css in this file you will not use <style>..</style> tag
Example-
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
Output:-
this is html-css.htm file
Very helpful infomation..
ReplyDeleteIt’s useful!!
ReplyDeleteUseful
ReplyDelete