HTML & CSS- part 12 Flashcards
When coding a background image, what happens if the image is smaller than what it’s trying to fill?
By default it will repeat the image.
Use these to control the background image’s location when it’s too small to fit the whole page
Repeat— Position— Attachment
background-repeat: (repeat OR no-repeat)
background-position: (left, center OR right), (top, center, or bottom);*** The x-axis is always first
background-attachment: scroll OR fixed;
***If you want it centered along both x and y, just use: background-position: center;
How do you show a webpage within a webpage?
<iframes>
</iframes>
How do you code <iframes>?
<iframe src=”https://www.w3schools.com” title=”W3Schools Free Online Web Tutorials”></iframe>
How do you embed sound in an HTML page?
<audio>
</audio>
What are the two audio source formats?
mpeg (mp3, mp4) and ogg
How do you let someone know that their browser doesn’t support audio?
You can add a paragraph inside the audio tags that says “your browser does not supports blah blah”
What are the attributes available for audio?
autoplay
controls - displays audio controls on the page
<audio controls autoplay>
When would you most likely measure in EMs?
Typography
margins
padding
When would you most likely measure in percentage?
Divs
tables
sometimes margins and padding.
When would you most likely measure in pixels?
images
borders
windows
iframes
fixed, absolute, and relative positioning
What does this mean?
position: relative;
This changes the location of something relative to the top, bottom, right, etc. of where it is supposed to be.
How would you code something so it is nudged 20px to the left of where it’s supposed to be?
p {
position: relative;
right: 20px; /* away from the right*/
}
It’s “right” because you are moving away from the right
What is the default position option?
p {
position: static;
}
What are media queries?
create different style rules for different screens (cell phones vs. desktops, etc).
AKA Responsive design
