Example:- 1
part1.html
---------------
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>CSS BASIC</title>
<link rel="stylesheet" href="part1_master.css">
</head>
<body>
<h1>This is the heading</h1>
<p>Let's see a list:</p>
<ol>
<li>Item One</li>
<li>Item Two</li>
<li>Item Three</li>
</ol>
<h4>This is heading 4.</h4>
</body>
</html>
========================================================================
part1_master.css
--------------------
/*selected tag{
property:vaue;
}
*/
h1{
color: red;
}
li{
color: rgb(247, 83, 7);
}
p{
color: #07bbf7;
}
h4{
color: rgba(247, 83, 7,1);
}
=========================================================================
=========================================================================
Example:-
part2.html
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>CSS BASIC</title>
<link rel="stylesheet" href="Part2_master.css">
</head>
<body>
<p>This is paragraph,outside any div</p>
<div>
<p>I'm inside the div</p>
<p>I'm also inside the div</p>
<p>Inside div <span>INSIDE SPAN!</span></p>
</div>
</body>
</html>
========================================================================
part2_master.css
/*selected tag{
property:vaue;
}
*/
body{
background: url("https://www.holidify.com/images/cmsuploads/compressed/goa-quick-guide_20180528135357.jpg");
background-repeat: no-repeat;
}
div{
background-color: blue;
border-color:orange;
border-width: 4px;
border-style: double;
}
p{
color: yellow;
}
span{
background:red;
color:black;
}
=========================================================================
Example:-3
part3.html
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="Part3_master.css">
</head>
<body>
<h3>I'm a h3 heading</h3>
<div class="firstDiv">
<p>I'm inside the firstDiv class</p>
</div>
<div class="secondDiv">
<p>I'm inside secondDiv Class</p>
</div>
<h3>Here is a list</h3>
<ul>
<li>confirm? <input type="checkbox" name="" value=""></li>
<li>Facebook? <input type="text" name="" value=""></li>
<li><a href="www.pieriandata.com">Pierian</a></li>
<li><a href="www.npr.org">NPR</a></li>
</ul>
</body>
</html>
======================================================================
.firstDiv{
color: blue;
}
.secondDiv{
color: red;
}
#singledout{
color:green;
text-decoration: line-through;
}
h3 + ul{
border: 4px dotted purple;
}
li a{
color:red;
}
li a[href="www.npr.org"]{
color: blue
border: 5px solid orange;
}
No comments:
Post a Comment