<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
box-sizing: border-box;
}
/* Style the body */
body {
font-family: Arial;
margin: 0;
}
/* Header */
.header {
padding: 10px;
text-align: center;
background: white;
color: black;
}
/* Style the top navigation bar */
.mainlink {
display: flex;
background-color: rgb(2, 8, 63);
}
/* Style the navigation bar links */
.mainlink a {
color: white;
padding: 14px 20px;
text-decoration: none;
text-align: center;
}
/* Change color on hover */
.mainlink a:hover {
background-color: blue;
color: white;
}
/* Column container */
.left {
display: flex;
flex-wrap: wrap;
}
.side {
flex: 30%;
background-color: #f1f1f1;
padding: 20px;
}
/* Main column */
.main {
flex: 70%;
background-color: white;
padding: 20px;
}
/* Footer */
.footer {
padding: 20px;
text-align: center;
background: #ddd;
}
.Linksides a {
text-decoration: none;
padding: 14px 20px;
text-align: center;
}
.Linksides a:hover {
background-color: blue;
color: white;
}
.Linksides {
background: rgb(187, 184, 184);
padding: 10px;
border-style: line;
color: black;
}
/* Responsive layout */
@media screen and (max-width: 600px) {
.left, .mainlink {
flex-direction: column;
}
}
</style>
</head>
<body>
<div class="header">
<h1>codealways.com</h1>
<p>code always to become best programmer.</p>
</div>
<div class="mainlink">
<a href="/html/html.html">HTML</a>
<a href=" ">CSS</a>
<a href=" ">Java Script </a>
</div>
<div class="left">
<div class="side">
<div class="Linksides ">
<a href=" ">CSS - @media</a><br> <br>
<a href=" ">CSS - Multidevice</a><br> <br>
<a href=" ">CSS - Multidevice 1</a><br> <br>
<a href=" ">CSS - Multidevice 2</a><br> <br>
</div>
</div>
<div class="main">
<h2>CSS - Media Queries</h2>
<p> The most important feature of style sheet is how a document
is to be presented in diffeent media.</p>
<p>Media query is a w3c recommendation .</p>
<p>Media rule makes you to set different rules for media types.</p>
<p>Media queries also used to check :</p>
<ui>
<li>View point (Width and Height)</li>
<li>Device (Width and Height)</li>
<li>Orentation mode(Landscape and portable)</li>
<li>resoulation</li>
</ui>
<br>
<h2>Syntax : Media Queries</h2>
<pre>
@media not|only mediatype and (expressions) {
CSS-Code;
}
</pre>
<img alt="" src="image/backgroundimage.png" style="height:200px;" />
<h4>Responsive background-color</h4>
<h4>Example : Media Queries</h4>
<pre>
<!DOCTYPE html>
<html>
<head>
<style>
/* Default background color is yellow and
the screen that are 600px and more ,
the background color is yellow*/
body {
background-color: yellow;
color: black;
}
/* On screens that are 600px wide or less,
the background color is blue */
@media screen and (max-width: 600px) {
body {
background-color: blue;
color: white;
}
}
</style>
</head>
<body>
<h1>Resize the browser window to see the effect.</h1>
<hr>
<h1>Media Queries techniques used to set a tailored style sheet to all
type of devices. </h1>
</body>
</html>
</pre>
</div>
</div>
<div class="footer">
<h2>about codealways contact</h2>
</div>
</body>
</html>
