Section 8 - Advanced CSS Flashcards
What is the “span” element?
used to apply styles to a specific section of text within a larger text block without creating a new line of content
ex:
<p> Hello <span>beautiful</span>world</p>
ex:
display: inline
What are the 3 common types of display values?
- Block
- Inline
- Inline-block
Describe each of the 3 common types of display values?
- Block - (default) full width, can change width and height
- Inline - displays in line with each other, can’t adjust width/height size adjusts according to content
- Inline-block - set width/height, elements go in the same line
What happens if the display is inline or inline-block and you keep adding span elements?
they’re going to go into the same line until they can no longer fit onto the width of the web page and they’ll go to the next line
What happens when you set the display property to “none”?
makes any element on the screen basically disappear
What could you use if you want an item on your to-do list to disappear after you check it off?
display: none
Which display property is the only one that pushes other elements up/down to make room for others?
inline-block
(block doesn’t push others away, and inline can’t change width and height)
What happens when we have a paragraph element with a width and height set but the display is set to “inline”?
it’s not going to respect the height and width we set, it takes the text of the paragraph element as a priority for determining the size
(the contents are priority with inline)
An element set to display: block does what?
takes up the full width of the page (doesn’t allow elements on the same line)
If you make your VS code window smaller and the elements change positions, does that reflect in your code when you view it on a website?
No, it still displays like normal (before adjusting the window)
What is the “float” property?
a CSS property that allows us to wrap text around a particular element
How do you use the float property?
You target the image element you want the paragraph text in the html to wrap around and you set the image element float to left or right to force the text to the opposite side to wrap around the image
float: left (or right)
(the behavior applies to the paragraph element though)
How many values does the float property have?
2, left or right
What property do you use if you don’t want text to wrap around a floated element?
you use the “clear” property so your target element ignores any floated elements nearby in whatever specific direction they are so it doesn’t try to wrap around it (unsticks it)
clear: left, right, both
[clears any responsibility to wrap around things that are floating]
How many values can you set for the “clear” property?
3
left, right, both
both = both floated elements near it
Can you use the float property to float 2 elements at once to have the text wrap around them?
Yes
use a selector that targets all desired elements and insert the float property
In the exercise, was it better to float the images first to get the text to wrap or move the divs first?
it was better to get the text to wrap around the images first before moving anything
When don’t we use the float property?
We don’t use it in modern web dev/design to move elements, we ONLY use it to wrap text around an element
she’s showing us a better technique to move things later (Flexbox, Grid, Bootstrap, etc)
Do we still use the clear property in modern web dev/design?
Yes
How do you add more than one class to an element?
class=”a-class another-class”>
How do you add spaces for selector names such as class, id, etc?
use a hyphen
a-class
another-class
What does a responsive website mean?
It responds to the changes in the screen size (someone is using to view the site)
