Web Dev exam 2

What is the first classification of HTML elements

Block elements (Paragraphs or headings)

What is the second classification of HTML elements

Inline elements (emphasized text or inline images)

How do you define the display style for any page using the display property

Display: Type;

How is block displayed

As a block

how is table displayed

as a web table

how is inline displayed

inline within a block

how is inline-block displayed

treated as a block placed inline within another block

how is run-in block displayed

a block unless its next sibling is also a block. If so, it’s displayed inline, essentially making the two blocks one

How is inherit displayed

inherits the display property of the parent element

how is a list-item displayed

a list item along with a bullet marker

how is none displayed

prevented from displaying, removing it from the page

What does a reset style sheet do

Supersedes a browsers default style and provides a consistent starting point for the pages design

what is the first style rule in a sheet?

the display property used to display HTML5 elements as blocks

What are the three web page layouts

Fixed, Fluid, Elastic

What is a fixed layout

size of the page and the page elements are fixed, usually using pixels as the unit of measure

what is a fluid layout

the width of the page elements are set as a percent of the available screen width

elastic layout

images and text are always sized in proportion to each other in EM units

What is responsive design?

The layout and design of a page changes in response to the device that is rendering it

how are the width and height of an element set?

Width: value;

height: value;

how to set limits on the width or height of a block element

min-width / max-width: value;

min-height / max-height: value;

how to set the margins of block elements

body {

margin-left: auto;

margin-right: auto;

how can an element be vertically centered

displaying the parent element as a table cell and setting vertical-align to middle

what does it mean to float an element

takes it out of position and places it along the left or right side of its parent element

how to float an element

float: position;

how to ensure that an element is always displayed below floated elements

clear: position;

what does it mean to float left

displays the element only when the left margin is clear of floating objects

what does it mean to float right

displays the element only when the right margin is clear of floating objects

what does it mean to float both

displays the element only when both margins are clear of floats

what does it mean to float none

displays the element alongside any floated objects

content box model

the width property refers to the width of an element content only, additional space include padding or borders

border box model

the width property is based on the sum of the content, padding, and border spaces.

how can the layout model be chosen

box-sizing: type;

what is a container collapse

an empty container with no content, elements in the container are floated

what pseudo-element places something after the footer

after

what does a clear property do

keeps the placeholder element from being inserted until both margins are clear of floats. The element itself is a web table and contains an empty text string

how is a grid layout set up

the page is comprised of a system of intersecting rows and columns that form a grid. Rows are based on the page content. The number of columns is based on the number that provides the most flexibility in laying out the page content. Based on 12 columns 

what are the advantages of using a grid

add order to presentation of page content, a consistent logical design gives readers confidence to find the info they seek, new content can be easily placed with grid, easily accessible for handicapped users, increased development speed

what is a fixed grid

every column has a fixed position, widths of the columns and margins are specified in pixels

what is a fluid grid

provides more support across different devices with different screen sizes, column width is expressed in percentages

what is a framework

a software package that provides a library of tools to design a website. Includes style sheets for grid layouts and built-in scripts to provide support for a variety of browsers

what are popular css frameworks

bootstrap, neat, unsemantic, Profound grid, HTML5 Boilerplate, skeleton

what is the CSS grid model

a set of CSS design styles used to create grid-based layouts, each is laid out in a set of row and column gridlines

what shape do grid areas have to be

rectangular, they cannot be L-shaped

how to create a CSS grid

identify a page element as a the grid container using the display property

how to define the number and size of grid columns

grid-template-columns: width 1 width 2;

how can column widths be expressed

using any CSS unit measures such as pixels, em units, and percentages. Auto can be used to allow the column width to be automatically set by the browser

what is an explicit grid

completely defines the number and size of the grid rows and columns. Most are defined this way and the browser fills out the grid rows drawn from the web page content

what is an implicit grid

contains rows and/or columns that are generated by the browser as it populated the grid with items from the grid container

how to define the number of rows and their height

grid-template-rows property: grid-template-rows: height1 height2;

what is a fr (fractional) unit

indicated by the unit abbreviation fr, creates grid tracks that expand or contract in size to fill available space while retaining their relative proportions to one another

how to write a repeat function

repeat (repeat, tracks)

what can be used in place of a repeat value

auto-fill can be used to fill up the grid with as many columns (or rows) that will fit within the grid container

what are outlines

lines drawn around an element, enclosing the element content, padding, and border spaces

what does outline-width: value; do

specifies the width of a line

what are the properties of value

thin, medium or thick

what does outline-color: color; do

specifies the color of a line

what are the properties of color

CSS color name or value

what does outline-style: style; do

specifies the design of a line

what are the properties of style

solid, double, dotted, dashed groove, inset, ridge, or outset 

how are grid items laid out by default

laid out in order going from left to right and up to down, each item placed within a single cell. In many layouts it might be desirable to move items around or have a single item occupy multiple rows

how to place an article element in a grid cell located in the first row and second column of the grid

article {

grid-row: 1;

grid-row: 2;

}

how to move a grid item to a specific location within the grid

grid-row: row;

grid-column: column;

how to extend a grid item so that it covers multiple rows or multiple columns

grid-row: start/end;

grid-column: start/end;

how can starting and ending gridlines be expressed (4 ways)

grid-column-start/end: integer;

grid-row-start/end: integer;

what’s another way of setting the size of a grid cell

span keyword

what is the general syntax for span

grid-row: span value;

grid-column: span value;

how to specify both the location and size of the item, including the starting gridline in the style rule

article {

grid-row: 1/span 2;

grid-column: 4/span 3;

}

how to create a textual representation in a style sheet

grid-template-areas: “row1” “row2”;

how to assign elements to grid areas

grid-area: area;

what is the general syntax used as shorthand to place and size grid items using gridline numbers

grid-area: row-start/col-start/row-end/col-ed;

how do you define the gap size following the grid-gap property

grid-gap: row column;

how can you use grid gaps for rows and columns

grid-column-gap: value;

grid-row-gap: value;

what does the align-items property do

sets the vertical placement of the content

what does the justify items property do 

sets the horizonal placement

what is the syntax for both justify/align-items

align/justify-items: placement;

what does stretch placement do

expand the content between the top/bottom or left/right edges, removing any spacing between the content and the cell border (the default)

what does start placement do

position the content with the top or left edge of the cell

what does end placement do

position the content with the bottom or right edge of the cell

what does center placement do

center the content vertically or horizontally within the cell

how to align and justify only one cell

article {

align-self: center;

justify-self: center;

}

how to modify grid position

align-content: placement;

justify-content: placement;

when it comes to the grid, start placement is

the position the grid with the top or left edge of the container (the default)

when it comes to the grid, end placement is

position the grid with the bottom or right edge of the container

when it comes to the grid, center placement is

center the grid vertically or horizontally within the container

when it comes to the grid, space-around placement is

insert an even amount of space between each grid item with no space at the far ends

when it comes to the grid, space-between placement is

insert an even amount of space between each grid item, with no space at the far ends

when it comes to the grid, space-evenly placement is

insert an even amount of space between each grid item, including the far ends

how to place an element at a specific position

position: type;

top: value;

right: value;

bottom: value;

left: value;

what is static positioning

the element is placed where it would have fallen naturally within the flow of the document

what is relative positioning

the element is moved out of its normal position in the document flow

what is absolute positioning

the element is placed at specific coordinates within containers

what is fixed positioning

fixes an object within a browser window to avoid its movementi

what is inherited positioning

allows an element to inherit the position value of its parent element

what is an overflow property

controls a browser that handles excess content

overflow: type;

what is visible in terms of overflow

instructs browsers to increase the height of an element to fit overflow contents

what is hidden in terms of overflow

Keeps an element at the specified height and width, but cuts off excess content

what is scroll in terms of overflow

keeps an element at the specified dimensions, but adds horizontal and vertical scroll bars

what is auto in terms of overflow

keeps an element at the specified size, adding scroll bars when they are needed

what provides the overflow-x and overflow-y properties

CSS3

what is a clip property

defines a rectangular region through which an element’s content can be viewed, anything that lies outside the boundary of the rectangle is hidden