Scribd
Upload
33 views10 pages

CSS (Media Type, Drop-Down Menus..)

Uploaded by

CLAsH with Dx
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
33 views10 pages

CSS (Media Type, Drop-Down Menus..)

Uploaded by

CLAsH with Dx
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
You are on page 1/ 10

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

You might also like