About 30-40 minutes
Participants will be able to:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="style.css">
</head>
<body>
<h2>Lorem Ipsum</h2>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
</p>
<ol>
<li>One item</li>
<li>Two item</li>
<li>Three item</li>
</ol>
</body>
</html>
Reference for dummy text(Lorem Ipsum)
h2{
background-color:#87CEFA;
}
p{
background-color:#FFB6C1;
}
ol{
background-color:#90EE90;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
}
h2
element and ol
element through inspect tool available in your chrome browser you can clearly observe that some styles are coming from user agent stylesheet like this:user agent stylesheet
h2 {
display: block;
font-size: 1.5em;
margin-block-start: 0.83em;
margin-block-end: 0.83em;
margin-inline-start: 0px;
margin-inline-end: 0px;
font-weight: bold;
}
user agent stylesheet
ol {
display: block;
list-style-type: decimal;
margin-block-start: 1em;
margin-block-end: 1em;
margin-inline-start: 0px;
margin-inline-end: 0px;
padding-inline-start: 40px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="https://meyerweb.com/eric/tools/css/reset/reset.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<h2>Lorem Ipsum</h2>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
</p>
<ol>
<li>One item</li>
<li>two item</li>
<li>three item</li>
</ol>
</body>
</html>
border-radius:5px
, -moz-border-radius:5px
and -webkit-border-radius:5px
in our style.css file this is because sometimes to apply some CSS properties we need to use CSS Vendor Prefixes -webkit-, -moz-, -ms-, -o-. They are a way for browser makers to add support for new CSS features before those features are fully supported in all browsers and to deliver consistent styles in all browsers.Form small groups and discuss: