Advanced CSS

Question 1

How do you access attributes in selector?

Answer 1

By adding square brackets [] you can access attributes from CSS.

img[title] - will access all elements img with attribute title
[href=”http://websamuraj.pl”] - all elements with this href
[src$=”.png”] - every element which src attribute ends with “.png”
input[placeholder*=”user”] - input that in placeholder attribute has expression “user”

Question 2

What is @keyframes syntax for CSS Animations?

Answer 2

@keyframes name {
   20% {width: 100%; color: #ee4388;}
   50% {width: 10%;}
   75% {background-color: orange;}
}

then you need to add this
animation to selector to display it on the desired element

Question 3

What are the animation values that can be set to different animation properties?

Answer 3

animation: is the short format for animation syntax. In reality, it comprises of different attributes:

animation-name: (default: none)
animation-duration: 3s; (default: 0)
animation-delay: 2s (in case we use short-hand syntax this is always the second value that comes seconds as in animation: superAnimacja 10s 2s the delay is 2s, duration 10s)
animation-direction: reverse | alternate | alternate-reverse; (default: normal)
animation-iteration-count: infinite | 100 (default: 1)
animation-fill-mode: both | forwards; (default: none)
animation-timing-function: linear | steps | ease | cubic-bezier (default: ease)
animation-play-state: running | paused (default: running)

Question 4

What is a flexbox container?

Answer 4

A flex container is the parent object and contains flex items inside of the parent container.
To initiate a flexbox on the parent you need to set the display: flex;

Flex items are primary objects within he Flex container

Question 5

What is flex direction?

Answer 5

Flex direction is a parent container property.
Direction defines how the flex items will be laid out in the flex container.
The directions are defined by either rows or columns.
(Default direction is a row)

flex-direction: column | row | column-reverse | row-reverse

Question 6

What is the feature of flex-basis property?

Answer 6

It is a property which refers to flex items.
This property when assigned to an element determines the size of the element. Whether it is width or height, depends on which is the main axis (main axis is set with property flex-direction:

Question 7

What does justify-content property do?

Answer 7

Justify content is a parent object property, that justifies the contents along the main axis (contrary to align-items which does it along cross axis).

It is applied only if parent container takes more space than it’s children.

justify-content: flex-start;
                         flex-end;
                         center;
                         space-between;
                         space-around;
                         space-evenly;

Question 8

How do you center elements using flexbox?

Answer 8

You need to apply display: flex to the parent object to make it a flex container
then:
align-items: center;
justify-content: center;

Question 9

What is the difference between align-content and align-items properties?

Answer 9

The align-items property of flex-box aligns the items inside a flex container along the cross axis just like justify-content does along the main axis.

align-content is for multi line flexible boxes. It has no effect when items are in a single line. It aligns the whole structure according to its value. Here’s an example for align-content: space-around;

Question 10

What does align-content property do?

Answer 10

It is a property that applies to parent flex container.
It sets the distribution of space between and around content items along a flexbox’s cross-axis or a grid’s block axis.
This property has no effect on single line flex containers (i.e. ones with flex-wrap: nowrap).
It aligns the content of lines in the flex container.

align-content: (default: stretch) | center | flex-end | flex-start | space-beetween | space-around | space-evenly

Question 11

What is flexbox?

Answer 11

Flexbox is a one-dimensional layout method for laying out items in rows or columns. Items flex to fill additional space and shrink to fit into smaller spaces. It ensures smoothness and scalability of elements, because they fit the space they are provided in the container.

Question 12

What are the default settings of a flexbox?

Answer 12

flex-direction: row; (elastic elements are set up horizontally one after another)

justify-content: flex-start (from the left side)

flex-basis :auto (elements use up exactly how much space they need (still horizontally because of flex-direction: row), it is not a flexbox container property, but child property)

align-items: stretch; (100% of parent’s height)

flex-wrap: nowrap (the elements are in one line)

flex-shrink: 1 (elements are shirnked, so they do not overflow the container)

Question 13

What does flex-wrap do?

Answer 13

The flex-wrap CSS property sets whether flex items are forced onto one line or can wrap onto multiple lines. If wrapping is allowed, it sets the direction that lines are stacked.

By default, all elements are shrinked because of flex-shrink: 1 (default property)

flex-wrap: nowrap | wrap | wrap-reverse;

Question 14

What are the basic flex items properties?

Answer 14

order: (number); (initial value is 0, if the order value is the same, then HTML order is applied. The higher the number, the lower it’s priority)
flex-grow: (number); (works when container is bigger than it’s children. it allows to divide the space between children)
flex-shrink: (shrinks the elements, so they do not overflow the container)
flex-basis: (depending on the flex-direction it decides how high or how wide is element. I overwrites the width and height)
align-self (similar to align-items property for flex container, so it is aligns along the cross axis, but for single element).

Question 15

How can you apply responsive text content depending on medias applied?

Answer 15

You can use ::before pseudoelement on the h1 tag.

With content: “Welcome to my webpage”.

Question 16

How can you style lists with pseudoelements?

Answer 16

With counter-reset, counter properties:

on ol {
counter-reset: (counter-name)
}

on li {
position:relative;
}

on li::before {
counter: counter-name;
content:counter(counter-name)
position: absolute;
left: -2em
top: 0
}

Question 17

What are the basic grid properties that you can set on the parent element that initiated the grid layout?

Answer 17

display:grid (initiates grid)
grid-template-columns: 1fr 2fr 1fr;
grid-template-rows: repeat(2, 50px);
grid-gap: 3px

Question 18

What is fr and repeat in css grid?

Answer 18

grid-template-columns: repeat(3, 1fr)

The new fr unit represents a fraction of the available space in the grid container.
Repeat, allows you to quickly show how many, rows/columns you would like to create.

Question 19

What is the shorthand syntax for creating grid-template?

Answer 19

grid-template: repeat(2, 50px) / repeat (3,1fr)

Question 20

What are the properties that you set on the child element, to set up grid layout?

Answer 20

grid-row / grid-column:
1 / 3 (will start at 1 column line and end at 3 column line)
1 / span 2 (will start at 1 column line and span 2 columns (same result as above)
1 / -1 (will span to the end of the row, no matter how many columns - the most flexible)

Question 21

What is the syntax for setting up the layout with grid template

Answer 21

On the parent node, you need to:
1) have set up already grid-template-columns and grid-template-rows properties.
2) set up grid-template-areas:
“m h h h h h h h h h h h h” // which is the visual
“m c c c c c c c c c c c c” // representation of the
“f f f f f f f f f f f f f f f f”; // grid

and then set up,
grid-area: (h | m | c | f)
on the child elements

Question 22

How do you vary amount of columns based on the width of the grid container?

Answer 22

grid-template-columns: repeat(auto-fit, 100px);

In order to make the size of the elements responsive, we need to set the minmax property on repeat:

grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
grid-auto-rows: 100px;

grid-auto-rows will create all rows implicitly, instead of hardcoding row by row

Question 23

What is the property that allows you to fill the grid layout to make it more dense (remove the whitespaces)

Answer 23

grid-auto-flow: dense (row is the default value) | dense packing algorithm

Question 24

How can you use named lines to set up the grid layout?

Answer 24

On the parent element, set up the areas

grid-template-columns: [main-start] 1fr [content-start] 5fr [content-end main-end];
grid-template-rows: [main-start] 40px [content-start] auto [content-end] 40px [main-end];

.header {
grid-column: main;
}

.menu {}

.content {
grid-area: content;
}

.footer {
grid-column: main;
}