1) External Stylesheet=> Styles are written in a separate style.css file or folder.
external stylesheet are linked with html file with the help of link tag in the head section.
The link tag has 2 attributes rel and href . rel describes the relationship as stylesheet and href links the style.css file to the html file.
index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<P>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Voluptatem, quae?
</P>
<div>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Itaque.
</div>
</body>
</html>
style.css:
p {
color: red;
background-color: aqua;
}
div {
color: aqua;
background-color: yellow;
}
output:
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Voluptatem, quae?
Lorem ipsum dolor sit amet consectetur adipisicing elit. Itaque.
2) By using internal style tag
=> the internal style tag is written in the head section of the html file.
which one one will get displayed , if both external stylesheet and internal style tags are used?
=> whichever is written later will get displayed.
index.html file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
p {
color: red;
text-decoration: underline;
}
div {
color: blue;
background: pink;
}
</style>
</head>
<body>
<P>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Voluptatem, quae?
</P>
<div>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Itaque.
</div>
</body>
</html>
output:
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Voluptatem, quae?
Lorem ipsum dolor sit amet consectetur adipisicing elit. Itaque.
3) Inline style
=>inline style is like an attribute specific to each element.
It has the highest priority over external stylesheet and internal style tag.
index.html file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<P style="color: Pink; text-align:center;">
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Voluptatem, quae?
</P>
<div>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Itaque.
</div>
</body>
</html>
output:
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Voluptatem, quae?
Lorem ipsum dolor sit amet consectetur adipisicing elit. Itaque.
Comments
Post a Comment