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)
What are the 4 main ways of creating responsive websites?
- Media Queries
- CSS Grid
- CSS Flexbox
- External Frameworks e.g. Bootstrap
What is media query?
Takes the spot of a selector in your CSS that has a rule to apply the CSS inside curly braces when displaying on a screen below/equal to a certain width (600px wide)
What is CSS Grid?
A simple system where you can define how you want the columns and rows to be laid out
What does display: grid do?
it says we’re basically going to use this system of CSS Grid to do the layout
What does 1fr mean?
1 fraction, fr = equal fraction meaning columns will have the same width
What does span do?
For example span 2; would have the column take up the entire width of 2 columns across the page (a row block, like for a heading) instead of taking up 1 column width if it was span 1;
What’s the difference between Grid and Flexbox? (2)
Grid = 2D layouts (columns AND rows)
Flexbox = 1D layouts (single horizontal or vertical row)
What does the flex property do in CSS Flexbox?
ie Flex: 1;
Makes each card have width distribution (divides up the width equally between cards)
If set to Flex: 1; then it would have EQUAL width distribution across cards but if set to 2 then one would be 2x wider than others
In what direction can you make the CSS Flexbox?
Horizontal and vertical
For a Bootstrap Framework, why is it called a framework?
because it’s external
(we use other people’s code)
How is a Bootstrap framework different from Grid or Flexbox?
It’s not built into CSS like Grid or Flexbox
Grid has columns and rows and applies to ___ layouts
2D
Flexbox allows you to create ____ layouts
1D
Which 2 methods apply the display property to the parent container?
Grid, Flexbox
What type of system does Bootstrap have?
12 division system (full width of website can be divided into 12 equal portions)
For Media Queries, instead of a selector what keyword do we have instead?
@media
@media (max-width: 600px) {
What is a breakpoint?
The width reaches a point (specified by px) where the CSS default styling changes to what’s inside the curly braces
(used for when changing screen sizes, different screen sources like laptops, phones)
Media query provides an ___ to the default styling
override
How do you combine 2 breakpoints?
you insert “and” in between 2 breakpoints
@media (min-width: 600px) and (max-width: 900px) {
max-width is for what type of screens?
smaller screens (any screen size #px or below)
min-width is for what type of screens?
bigger screens (any screen size #px and up)
What direction are you targeting when you say:
@media (max-width: 600px) and (min-width: 900px) {
600px and smaller <-
900px and bigger->
(they are going in opposite directions from each other)
What direction are you targeting when you say:
@media (min-width: 600px) and (max-width: 900px) {
600px and bigger ->
900px and smaller <-
(they’ll meet in the middle, range will be from 600-900)
What is the “screen” keyword?
a keyword that says apply to all screens which isn’t necessary by default
(not recommend when writing normal media query)
What is the”print” keyword?
used with the @media query to target only when your website is being printed (to give it a different layout)
What are 2 ways to test your responsive website code?
- In a browser so you can manipulate the window
- In Chrome Developer Tools (3 dots > More tools > Developer tools > Dimensions: Responsive)
Where do you insert media queries?
into the CSS section
What’s the CSS selector you use to change the background color of a website?
body (to select the whole body) applied in CSS section
body {
background-color: color
}
How do you write a media query for:
Desktops: 1601px and more
@media (min-width: 1601px) {
body {
background color etc
}
}
Mobile devices are usually between what sizes?
319px — 480px
iPads and Tablets are usually between what sizes?
1201px — 1600px
Desktops are usually between what sizes?
1601px and more
What doe text: justify; do?
text: justify; is good to use for text that you want to occupy the whole width (of a div or p area) and not just be left-aligned
