CSS Topics
Day 5 :
- Added CSS to HTML Page
- Media Queries
HTML Page with CSS:
newPage.css:
body {
background-color: #d1cece;
text-align: center;
font-family: "Arial", sans-serif;
}
h1 {
color: #0066cc;
}
table {
margin: auto;
margin-top: 10px;
border-collapse: collapse;
width: 70%;
}
th,
td {
padding: 10px;
}
marquee {
color: red;
}
form {
float: right;
background-color: white;
padding: 20px;
border-radius: 10px;
box-shadow: 2px 2px 5px 0px #888888;
}
label {
display: block;
text-align: left;
}
input {
width: 100%;
padding: 8px;
border-radius: 5px;
border: 1px solid #ccc;
}
input[type="submit"] {
background-color: #0066cc;
cursor: pointer;
color: #fff;
}
input[type="submit"]:hover {
background-color: #004080;
}
.container {
width: 1000px;
margin: auto;
}
img {
border-radius: 10px;
box-shadow: 2px 2px 5px 0px #888888;
}
@media screen and (min-width: 0px) and (max-width: 767px) {
.container {
width: auto;
margin: auto;
}
img {
max-width: 100%;
margin-bottom: 20px;
}
form {
float: none;
}
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
.container {
width: auto;
margin: auto;
}
img {
width: auto;
margin-bottom: 20px;
}
form {
float: none;
margin: 0px 100px;
}
}
@media screen and (min-width: 1024px) and (max-width: 1365px) {
.container {
margin: auto;
}
img {
border-radius: 10px;
box-shadow: 2px 2px 5px #888888;
height: auto;
}
form {
float: right;
background-color: white;
padding: 20px;
border-radius: 10px;
box-shadow: 2px 2px 5px #888888;
}
}
@media screen and (min-width: 1366px) {
.container {
margin: auto;
}
img {
border-radius: 10px;
box-shadow: 2px 2px 5px #888888;
height: auto;
}
form {
float: right;
background-color: white;
padding: 20px;
border-radius: 10px;
box-shadow: 2px 2px 5px #888888;
}
}
newPage.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" type="text/css" href="./newPage.css" />
</head>
<body>
<h1>Hema Coding School</h1>
<p>
Welcome to Hema Coding School channel. We can teach
<a href="./textFormatting.html">full stack web development.</a>
</p>
<marquee
>We will cover in this course HTML, CSS, JavaScript, React, Node.js, and
MongoDB</marquee
>
<div class="container">
<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"
/>
<form>
<label>Name:</label>
<input type="text" />
<label>Email:</label>
<input type="text" />
<label>Age:</label>
<input type="text" />
<input type="submit" />
</form>
</div>
<table border="1">
<tr>
<th>HTML</th>
<th>CSS</th>
<th>JavaScript 3</th>
</tr>
<tr>
<td>Basics of html</td>
<td>Basics of CSS</td>
<td>Basics of JavaScript</td>
</tr>
<tr>
<td>HTNL 5</td>
<td>CSS 3</td>
<td>ES 6</td>
</tr>
</table>
</body>
</html>
Media Queries:
Interview Questions:
1. How do you write a basic media query for screens with a maximum width of 768 pixels?
2. What are some common media features used in media queries?
3. What is the purpose of media queries in creating responsive web designs?
No comments:
Post a Comment