CSS Flashcards
How can you di a continuous column layout?
.container {
column-width: 10em;
column-rule: 1px solid rgb(75, 70, 74);
}
<div class="container"> <p>Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillo melon azuki bean garlic.</p> <p>Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.</p> <p>Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce kohlrabi amaranth water spinach avocado daikon napa cabbage asparagus winter purslane kale. Celery potato scallion desert raisin horseradish spinach.</p> </div>
How can you do single row layouts with equal hights?
Flexbox:
.container {
display: flex;
}
.container>* {
margin: 0 10px;
flex: 1;
}
<div class="container">
<p>Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillo
melon azuki bean garlic.</p>
<p>Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard
greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.</p>
<p>Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce kohlrabi amaranth water spinach avocado
daikon napa cabbage asparagus winter purslane kale. Celery potato scallion desert raisin horseradish spinach
carrot soko. Lotus root water spinach.</p>
</div>
Display items lining up in rows and columns
Grid layout.
.container {
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: 20px;
}
<div class="container">
<p>Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi.</p>
<p>Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard greens.</p>
<p>Nori grape silver beet broccoli kombu beet greens fava bean potato quandong celery. Bunya nuts
black-eyed pea prairie turnip leek lentil turnip greens parsnip. .</p>
</div>
What is the problem with table layouts?
- Lots of words/syntax which is error prone and hard to debug.
- Complex layout is hard when you start nesting items (tag soup)
- Screen reader technology does not like it. Its messy to interpret.
What is internal, inline and external css?
- In-Line - this is when you add the
style=""attribute - internal is when you add a
<style></style>tags in the<head>section.
*
What is the CSS property to change background color and what values can it have?
- The
background-colorCSS property sets the background color of an element. - The uniform color of the background. It is rendered behind any background-image that is specified, although the color will still be visible through any transparency in the image.
/* Keyword values */ background-color: red; /* Hexadecimal value */ background-color: #bbff00; /* Fully opaque */ /* RGB value */ background-color: rgb(255 255 128); /* Fully opaque */ /* RGB value */ background-color: rgb(255 255 128); /* Fully opaque */ /* Special keyword values */ background-color: currentcolor; /* Global values */ background-color: inherit;
Write the basic CSS code for styling a tag.
selector { property : value; }
body {
background-color: blue;
}
What is the inset css value?
It can make things look embedded. Its used by default on some elements like <hr>
What is the code to include a stylesheet.
<link rel="stylesheet" href="/css/styles.css"
What is the css property for chaning text color and an example?
color. E.g.
h1{
color: green;
}
What is the class attribute?
A space-separated list of the classes of the element. Classes allow CSS and JavaScript to select and access specific elements via the class selectors or functions like the method Document.getElementsByClassName()
Write a comment in css.
/* comment here */
What is the general rule about overriding styles in css with examples?
More specific css targets override more generic ones. E.g.
* A generic border property will be overridden by a specific border property.
* Styles applied to a class will override generic html tag styles.
* Any specific css will override the default browser css.
What is the difference between ID and Class selectors for CSS?
- IDs are unique. Only one element will have an ID.
- An element can also only have one ID.
- Classes can be applied to multiple elements.
What is a pseudo class and example of style for one?
Its the state of an element e.g. :hover.
a:hover{
color:black
}
What are four main display values and how do they work?
display:inline;
* This is one where it does not block out the whole line.
* Adding a nother element will add it next to it if both are inline.
* You can’t set the size e.g. height and width of in-line elements. It fills the space it needs.
display:block;
* This is the one where it blocks out the whole width.
* Adding another element will move it to the next line.
* This is the default for most elements.
display:block-inline
* This is a halfway point between in-line and block.
* You can use the “inline” aspect by letting elements sit next to each other.
* You can use the “block” aspect to set its size.
* The items will sit next to each other.
display:none
* Makes an item disappear.
What is best practice?
float:left; vs display:inline; vs display:inline-block; vs display:table-cell;
https://stackoverflow.com/questions/11805352/floatleft-vs-displayinline-vs-displayinline-block-vs-displaytable-cell/11823622#11823622
Short answer is that display:inline-block is the better option.
In modern web design we’ll use flexbox, grid, bootstrap etc. Use float only for wrapping text.
What is CSS float, how can it be used and what is clear?
- The float CSS property places an element on the left or right side of its container
- The main idea is to wrap text around something. So think about the layout of a newspaper.
- The columns can go next to each other with the
display:block-inlineand the text can wrap around images with thefloat:leftproperty. - In this example you can make the image float left and the paragraph will fill the space around it.
What if you dont want the paragrapgs to flow around it, like a footer
* Setting the the clear:left property on an element will make it ignore any floats. it is “cleared” of the left float. or also clear:both.
Write an example of a media query that sets the font size of an H1 for screens smaller than 600px and larger than 900px;
@media (max-width: 600px) and (min-width:900px){
h1{
font-size: 15px;
}}What should table layout be used for today?
Any tabular data. Dont want to use tables for layout anymore. Its not good for compatibility and accessibility.
What does display:inline-block; do and what is the challenge?
It will let all the divs you apply it to show up on the same line.
The challenge is that they wont be the same heights and will require more stiling to get the layout perfect.
What is position absolute?
It will take elements out of the normal flow of HTML, but its a ridgit way to do layout. if you add more things that arent absolute the layout won’t work well.
What is the challenge with using float layout and when is it appropriate?
You require a lot of hacks to make things work with the float layout. Best practice is to use it as it was intended to lat an image float next to text etc. for layout there are better options.
What does flexbox do?
It is used to create page layouts.
How to use flexbox in general for layout?
You need a container DIV and then apply display:flex to it. This will let all the content space out in columns.
What are the display values of DIV, Span, P and IMG
- DIV - Block (full line)
- Span = Inline
- P - Block
- Img - Inline
What happens to the display properties of elements inside a flexbox?
They will all be ignored. In otherwords, a Flexbox takes over some of the layout properties. Block elements and inline elements become “flexbox”. Everything tries to go into a single line. like columns.
What is the difference between display:flex and display:inline-flex?
Display:flex is a full width block container. Display:inline-flex only takes up the space it needs like an in-line element. Meaning other in-line items can take up space in the same line.
Whan is flexbox layout a good option?
Flexbox is most appropriate for small-scale layouts and applications such as navigation menus, card layouts, media items and web forms1. Flexbox is particularly useful when it comes to styling form controls. Forms have lots of markup and lots of small elements that we typically want to align with each other. A common pattern is to have an <input></input> element paired with a <button>, perhaps for a search form or where you want your visitor to enter an email address2.</button>
How does Grid layout relate to Flexbox?
The basic difference between CSS grid layout and CSS flexbox layout is that flexbox was designed for layout in one dimension - either a row or a column. Grid was designed for two-dimensional layout - rows, and columns at the same time.
What is flex-direction property and what is its deafault? How does main and cross come into play.
-
flex-directioncan be:rowor:column. This is the main axis. - Default is row. Horizontal, left to right.
- Cross-axis means the oposite axis of the default.
- If you change the default, the cross-axis changes as well.
What is flex-basis?
- It sets the widht/height depending on the main axis of a flex-box. So ` flex-basis:100px` will change the dimension of the main axis.
- Its flexing along the main axis.
- The flex-basis actually needs to go on the child element. So the divs inside the container.
How would you select all the direct children of a class in Css?
.className > * {}
How do you set order of items in a flexbox?
On the child element’s css:
order:1
The higher value will be at the right side, lower on the left.
What is the default flexbox wrap behaviour and how do you change it?
-
flex-wrapis a css property on the parent container. - The default behaviour for it is
nowrapwhich will allow items to continue off screen. - to se it to wrap:
flex-wrap:wrap
Instead of wrapping items from the top left corner, what else can you do with flexbox wrap?
With wrap-reverse you can let items wrap from the bottom left corner towards the top.
What is the flexbox property that allows you to distribute/space out elements in the box?
Justify-content sets the distribution on the main axis. Its set on the parent element.
-
justify-content: flext-start;- Everything is bunched to the start. -
justify-content: flext-end;- Everything is buched starting at the end (so left side) -
justify-content: center;- This is a good way to center content along main axis. -
space-between- first and last element is on the edge with spaces in between everything. -
space-around- gives a space betweem edges. edges add up to space between. -
space-evenly- equal space between everything and edge.
What flexbox property spaces items along the cross-axis?
align-items - many of the same propertioes as justify, but just along the different axis.
what is the vh css value?
With height or width you can set the viewport height.height: 70-vh sets the height to 70% of the viewport.
What do you do when you want to align everything center but for some specific elements in a flexbox?
You can set the property on the specific child element:align-self:flex-start.
How does flex-wrap interact with alignement in a flexbox?
Whe you have flex-wrap: wrap set, you can align content with align-content: center or some other property. This means that when the window changes the align-content value will help align items.
What is the priority of properties that determine the width of items in a flex-box and how do they inteact?
Content width < Width < flex-basis < min-width/max-width
With a column based flexbox the width is replaced with the height.
Each of these properties override each other.
Content width -
* This is the default.
* When no other setting is present the elements will be as wide as its content and shrink to the minimum of its content. e.g. the largest word is minimum and the whole sentence is maximum content witdth.
* Each element will be a different width/height.
* When the page is resided beyond the minimum width the items will flow off the screen.
Width
* Items will be displayed with the width set on each.
* If the container shrinks beyond the minimum total it will shrink past the width to the defaul minimum content width. Its almost like max-width.
flex-basis
* the flex-basis determines the width of each element.
* If you set it with width, the width is ignored.
* It acts the same as the width, where it wont go beyond the width set, but the minimum is still the content width minimum.
* So essentially flex-basis is just the override for with.
min-/max-width
* By default the min is set to the longest word and max to the length of the sentence.
* If there is a flex-basis with max-with, the width of the element will be max-width when the flex-base is wider, but if the flex-base is smaller, the elements will be that width.
* max-width/min-width is the max or min something may grow/shrink to.
* if you resize with min-width and the screen goes smaller than all the elements they will go over the edge of the screen.
Explain flexbox’s flex-grow, -shrink, and shorthand.
- Setting flex-grow/-shrink to 0 disables the element’s ability to resize.
- If flex-size is set to 1, the flex-basis is overridden and the item’s width may increase to the width of the container.
- if the flex-basis is set and flex-shrink is 0, then the items will not resize to smaller than the flex-basis.
- If flex grow is 0 then the items will max to flex-basis but shrink beyond it.
- The default is flex-grow: 0; and flex-shrink :1.
- If flex:grow and flex:shrink are both on, the flex-basis is ignored, items will just go max and min of the space.
- The default for flex-basis is auto. This means it looks at the amount of content of the items. Which means items with larger content take up more space. Items are not the same with. If you set it to 0 then everything will be the same value.
- Shorthand - Flex: 1 1 0. (grow, shrink, basis).
- Flex:1 is the same as the above.
What does flexbox grow and shrink values do when they are set to more than 1?
flex: 1, flex:2, flex:3 for example will be ratios in which items take up space.
Flexbox vs Grid usecase?
- Flexbox is a good layout tool for like aligning content e.g. a navbar. Grid is good for layour in a page. So like a table structure.
- They are used in conjunction.
What is the css markup for a grid?
- Create a wrapping div container:
<div class="container"> <p></p> </div?
- css:
.container {
display:grid;
grid-template-columns: 1fr 2fr;
grid-template-rows: 1fr 1fr
gap: 10px;
}
- The frs are fractions.
- The gap is the space between the blocks.
