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>
<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.
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.
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 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.
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.
