HTML & CSS- part 13 Flashcards
Sample code for a media query.
This specifies block—that is, one on each line—for the “gallery” class of images when displayed on a phone
We define a phone as having a minimum width of 320 pixels and a maximum width of 480 pixels.
@media only screen and
(min-device-width: 320px) and
(max-device-width: 480px) {
img.gallery { /Notice how the css code for specific elements goes under the @media intro/
display: block;
}
}
If you want a div to be 20% of the screen width, what do you have to consider?
On a cell phone, that would make your div too small to be practical.
To prevent this, use:
min-width:
max-width:
min-height:
max-height:
What do you have to be aware of if you’re using max-height or max-width?
Your div might be too small to hold the content.
What are your options if your div is too small to hold the content?
You will have overflow. And you need to decide what to do with it.
What are your options with content overflow?
overflow: hidden;
overflow: scroll;
p {
min-height: 150px;
max-height: 600px;
overflow: hidden;
}
What’s the very first part of any HTML document?
<!DOCTYPE HTML>
This tells the browser the document is written in HTML5. This is what you’ll always write when you’re creating a new document, whether the document has any HTML5 features in it or not.
What does this mean?
<html lang=”en”>
This page is in English. Every HTML doc has the <html></html> pair
What is the basic skeleton for an HTML page?
<!DOCTYPE html>
<html>
<head>
<title>
</title>
</head>
<body>
</body>
</html>
What does this mean?
<meta></meta>
This tag tells the browser to use a particular flavor of text encoding that permits the greatest variety of characters, thus accommodating the greatest number of languages. The tag isn’t closed.
Where does <title> show up?</title>
<title>
in the browser toolbar,
in a bookmark list
in search engine results
</title>
Where do you add a meta description?
In the <head> of the document.
<meta></meta>
What does a meta description do?
Displays a message in the search engine results
What are some general rules for meta descriptions?
Make your description as appealing as possible, but don’t promise more than you can deliver.
Search engines cut off a description after about 160 characters. That’s a few more characters than a Twitter Tweet. Limit your description to that length.
Don’t repeat your title as a description.
Give each page on your site a unique meta description.
Can one element have two classes at the same time?
Yes.
How do you code two classes for one element at the same time?
Put them side-by-side in the class value.
Separate with a space but without a comma.
<p class=”firstClass secondClass”>
