CSS Media Types, Drop down

menus..

•
 Media Types

Specify how a document is to be presented on

different media:
 on the screen, on paper, with a speech synthesizer, with a braille
device, etc.
Methods for creating separate styles depending on
the media type:
 Use the CSS @media at-rule.
 Use the media attribute when using the link tag to link to an
external style sheet.
 Add the media type when using the @import at-rule.
 Media Types (Contd..)

all:
 Used for all media type devices
speech:
 Matches screen readers and other devices that read out the
content of a page.
print:
 Used for printers
screen:
 Matches all devices that aren't matched by print or speech.
Deprecated Media Types
 Screen, tty, tv, handheld, embossed, and braille.
 Example

@media screen and (min-width: 480px) {

body {
background-color: lightgreen;
}
}

@media screen and (min-width: 480px) {

#leftsidebar {width: 200px; float: left;}
#main {margin-left: 216px;}
}
 Building a CSS Drop-Down Menu

Drop-down menus are a good way to provide

navigation links on a website without using a lot of
screen space
:hover pseudoclass used to change a link’s style
when the mouse hovers over it.
display property allows a programmer to decide
whether an element is rendered on the page or not.
 Possible values include block, inline and none.
Example 1
<div class="dropdown">
.dropdown { <span>Mouse over me</span>
position: relative; <div class="dropdown-content">
display: inline-block; <p>Hello World!</p>
} </div>
</div>
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
padding: 12px 16px;
z-index: 1;
}

.dropdown:hover .dropdown-content {
display: block;
}

9/1/21
Example 2
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}

/* The container <div> - needed to position the dropdown

content */
.dropdown {
position: relative;
display: inline-block;
}

9/1/21
/* Dropdown Content (Hidden by Default) */ /* Change color of dropdown links on hover */
.dropdown-content { .dropdown-content a:hover {background-color: #f1f1f1}
display: none;
position: absolute; /* Show the dropdown menu on hover */
background-color: #f9f9f9; .dropdown:hover .dropdown-content {
min-width: 160px; display: block;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); }
z-index: 1;
} /* Change the background color of the dropdown button
when the dropdown content is shown */
/* Links inside the dropdown */ .dropdown:hover .dropbtn {
.dropdown-content a { background-color: #3e8e41;
color: black; }
padding: 12px 16px;
text-decoration: none;
display: block;
}

9/1/21
 <div class="dropdown">
<button class="dropbtn">Dropdown</button>
<div class="dropdown-content">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</div>

9/1/21