In CSS
stylesheets are classified into the following types –
1. Inline Style Sheets – If we
specify styles inside the tag in the body part. These styles are able to apply
only for that particular line.
Example –
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title style="color:red">CSS</title>
</head>
<body>
<s style="color:red">Welcome to CSS</s><br>
<p style="color:blue; background-color:yellow">Welcome to CSS</p><br>
<b style="text-decoration:underline">Hello CSS</b>
</body>
</html>
2. Internal Style Sheets – These are
popularly known as embedded style sheets. If we specify the style in our HTML
file itself then they are called as internal styles. These styles cannot be
used in other files, but we should implement again and again in the same file.
Example –
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>CSS</title>
<style type="text/css">
p{
color:#FF00FF;
font-size:20px;
font-weight:bolder;
}
</style>
</head>
<body>
<p>Welcome to
internal style sheet</p>
<p>Welcome to
internal style sheets</p>
</body>
</html>
3. External Style Sheets – If we
declare styles outside our html file then they are called external styles.
These styles can be reusable on more than one file. These file extension is
.css
Example –
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>CSS</title>
<link rel="stylesheet" href="view.css">
</head>
<body>
<div>Welcome to
external style sheets</div>
</body>
</html>
view.css
div
{
color:#FF00FF;
font-size:25px;
text-decoration:underline;
font-weight:bold;
}
No comments:
Post a Comment