CSS Topics
Day 4 :
- Styling text
- Box Model
- Block-level Elements
- In-line Elements
- Float
Styling text :
Box Model:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
p{
font-family: Arial, Helvetica, sans-serif;
font-size: 30px;
font-weight: 600;
text-align: center;
background-color: orange;
color: white;
padding: 50px;
border: 10px solid black;
}
</style>
</head>
<body>
<p>Hema coding School</p>
</body>
</html>
Block-level Elements:
Common block-level elements include <div>, <p>, <h1> to <h6> (headings), <ul> (unordered list), <ol> (ordered list), <li> (list item), <table>, <form>, and more.
In-line Elements:
Common inline elements include
<span>, <a> (anchor), <strong> (strong/bold), <img> (image), <br> (line break), <code> (code), and more.Float:
selector {
float: right or left ;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
p {
display: inline;
}
span {
display: block;
}
img {
float: right;
}
</style>
</head>
<body>
<p style="background-color: blue">Welcome to Hema coding School</p>
<p style="background-color: blue">Hema coding School</p>
<p style="background-color: blue">Hema coding School</p>
<p style="background-color: blue">Hema coding School</p>
<p style="background-color: blue">Hema coding School</p>
<span style="background-color: red">CSS</span>
<span style="background-color: red">CSS</span>
<span style="background-color: red">CSS</span>
<span style="background-color: red">CSS</span>
<span style="background-color: red">CSS</span>
<img
src="https://images.unsplash.com/photo-1496171367470-9ed9a91ea931?
q=80&w=600&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=
M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
alt="work"
/>
</body>
</html>
Create article page as like below using Styling text, Box Model, Block-level Elements, In-line Elements, Float ?
Interview Questions:
1. What is the difference between font-size and line-height properties?
2. Explain the difference between margin and padding?
3. What is a block-level element? Provide examples.?
4. In what situations would you use the <span> element?
5. Explain the difference between float: left and float: right?
hlo sir can you task code .. i have completed task but some errors there pls send task code sir
ReplyDelete