IES: CSS-deck 19

Question 1

<:nth-child()>:

Answer 1

• > specifies individual flex items to align vertically within their line
• > each flex container inner child element is then referenced by specifying its index number in the parentheses
• > specify your preferred value to align-self
• Ex.

<div class="flex-container">
     <div>One</div>
		 ...
		 ...
		 ...
		 <div>Five</div>
</div>

(CSS stylesheet)

div.flex-container { ... 
     align-items: center;}

div.flex-container > div:nth-child(2) {align-self: 
     flex-end;}
div.flex-container > div:nth-child(3) {align-self: 
     flex-start;}

(adjusts the second(2) and third(3) container items’ alignments)

Question 2

align-self:

Answer 2

• specifies alignment in block direction of selected flexbox/grid container item
• overrides alignment specified by align-items

Question 3

“grid”:

Answer 3

• display value
• This layout scheme is 2-dimensional (places “grid items” in columns and rows)(as opposed to the flexbox scheme which is 1-dimensional)
• specifies element to be “grid container”
• Block-level : fills the page width
• All direct child elements within automatically become grid items
• all modern browsers support grid since:
  1. Chrome 57.0
  2. Edge 16.0.
  3. Firefox 52.0.
  4. Safari 10
  5. Opera 44

Question 4

“inline-grid”:

Answer 4

• display value
• Specifies an element to be a “grid container”
• This layout scheme is 2-dimensional (places “grid items” in columns and rows)(as opposed to the flexbox scheme which is 1-dimensional)
• Does not fill the page width
• All direct child elements within automatically become grid items
• all modern browsers support grid since:
  1. Chrome 57.0
  2. Edge 16.0.
  3. Firefox 52.0.
  4. Safari 10
  5. Opera 44

Question 5

grid-template-columns:

Answer 5

• specifies the number of grid columns
• specifies as a space-separated list of width values
• Ex. grid-template-columns: 20% 60% 20%;

Question 6

grid-template-rows:

Answer 6

• specifies the number of grid rows
• Specifies as a space-separated list of height values
• Ex. grid-template-rows: 20% 40% 40%;
• When a value is not listed, subsequent rows will only use the first row template values

Question 7

“auto” (grid container):

Answer 7

• grid-template-… keyword/value
• Specifies any column width or row height
• Ex. (to create four columns of equal size and two rows of equal size): ```
  {
  grid-template-columns: auto auto auto auto;
  grid-template-rows: auto auto:
  }
  ~~~

Question 8

“repeat()”:

Answer 8

• CSS function
• grid(-…) value
• Specifies large number of columns or rows as repeating fragment fr units
• accepts two arguments: specifies repetition number and grid track fragments number
• Ex. (to create five rows of equal size)
  grid-template-rows: repeat (5, 2fr);

Question 9

column lines; row lines:

Answer 9

• (grid containers)
• Leading edge lines between the columns and rows

Question 10

line numbers

Answer 10

• (not always column lines or row lines: some run outside of the columns or rows)
• Can be used to place grid items at a specific position in a grid container
• grid-column and grid-row can specify horizontal and vertical positioning using single line numbers
• Two “/”-separated values can specify start and end line numbers (Ex.
  ~~~
  .item1 {
  grid-column: 1/3;
  }
  ~~~

(spans the first two columns of a grid))

Question 11

“span”

Answer 11

• grid-column and grid-row keyword/value
• use to avoid specifying end lines when items should span more than one column or row
• (Ex.
  ~~~
  .item1 {
  grid-column: 1/span 2;
  }
  ~~~

(uses column number & span size rather than line numbers but achieves same result: “item1” spans the first two columns of a grid))

Question 12

CSS media queries

Answer 12

• discovers capabilities of viewing device to apply appropriate style rules
• syntax: @media *media-type* and (*media-feature*) {*style-rules*}
• (checks for multiple media features adding further: “... and (*media-feature*) ...” syntax parts)
  1. > Specified media feature detected on specified media type
  2. > media query reports as true
  3. > style rules applied
• Ex.
  ~~~
  @media screen and (max-width:600px) {
  body {background: Blue;}
  }
  ~~~
• (Note: no spaces around “ : “ in media-feature specification)
• (applies a Blue background color only on devices whose display area is 600px wide or less)

Question 13

media-type

Answer 13

• (CSS media query syntax: @media *media-type* and (*media-feature*) {*style-rules*})
• CSS media query: keywords/value class
• media-type keyword/values:
  1. “all” detect all media types
  2. “print” detect printers
  3. “screen” detect PC desktop, tablet, and phone screens
  4. “speech” detect screenreaders

Question 14

media-feature

Answer 14

• (CSS media query syntax: @media *media-type* and (*media-feature*) {*style-rules*})
• CSS media query: keyword/value class
• media-feature keyword/values:
  1. “min-width” minimum width of the display area, such as the width of the browser window
  2. “max-width” maximum width of the display area, such as the width of the browser window
  3. “orientation” orientation of the viewport, as either landscape mode or portrait mode

Question 15

CSS media queries (navigation)

Answer 15

• Media queries allow appropriate navigation to be provided for large and small devices
• Typically, horizontal Nav bars provided for wide displays
• Typically, vertical nav bars more suitable for smaller displays
• Vertical nav bars specify a fixed width
• Horizontal nav bars specify to float [or flex] list items & hide the overflow (to maintain bar visibility)
• Ex.

@media screen and (max-width:600px) {
     ul {overflow: hidden; width: 100%;}
		 li a  {float: left;}
}

• (automates the switch of navigation type)

Question 16

“RWD”

Answer 16

• Responsive Web Design
• Aims to ensure optimum usability for user satisfaction
• Designs web pages that present content well, and perform well, across all devices
• web pages designed with RWD adapt layout to suit viewing device-use only HTML and CSS (no JavaScript)

Question 17

key to Responsive Web Design

Answer 17

1. > use of CSS media queries determines size & capabilities of viewing device
2. > Devices features recognized: layout adapted to suit viewing environment
3. > Environments adapted through fluid proportion-based grids & flexible images
4. > Such grids and images create a responsive layout

Question 18

Fluid Grid Layout (RWD)

Answer 18

• requires web page sizes be specified in relative units (i.e. %s ; em’s)
• (as opposed to absolute units (i.e. px’s ; pt’s)
• Allows items to stretch or shrink

Question 19

Flexible Images (RWD)

Answer 19

• requires webpage sizes be specified in relative units (i.e. %’s; em’s)
• stops containing element overflow: smaller viewing devices
• Flex images (RWD) sometimes referred to: “context-aware”

Question 20

Responsive Layouts (RWD)

Answer 20

• automatically adapts to suit viewing device size
• adjusts when user resizes browser window