CSS ?'s

Question 1

What are different ways to intergrate css into html?

Answer 1

style tags in head of HTML, use inline-styling, seperate stylsheet

Question 2

What is the meaning of cascading

Answer 2

same style can be applied to multiple elements, multiple styles can be applied to a particular html elements, same stylesheet for multiple pages

Question 3

Advantages of CSS?

Answer 3

multiple elements can have the same style, selectors and grouping can be used to group styles in complex situations

Question 4

css frameworks?

Answer 4

bootstrap, responsive, mobile first websites

Question 5

id v class?

Answer 5

Id is unique, so it can only be used once, same class can be applied to multiple elements

Question 6

what is RGB Stream?

Answer 6

way to get a color for styling of an element, 0-256

Question 7

Ways to assign a color?

Answer 7

Hexadecimal (#), RGB, HSL functional notation (never used)

Question 8

CSS Box Model?

Answer 8

describes rectangular box that is generated for elements in dom tree. Each box has content, optional padding, border, margins.

Question 9

Box model rules?

Answer 9

dimensions of block element = width, height, padding, borders, margin.
no height specified, high as container + padding
no width specified, wide as parent minus paddiing
padding + border not included in width and height of an element

Question 10

What is z-index?

Answer 10

helps specify stack order of positioned elements that may overlap one another. default value is 0. higher index stacked above lower index. only applied to elements that do not have position static.

Question 11

CSS sprites?

Answer 11

css sprites combine multiple images into one single larger image. It is a commonly used technique for icons. Use a sprite generator.

Question 12

benefits of sprites

Answer 12

Reduce the number of http requests for multiple images

Question 13

Psuedo elements?

Answer 13

keyword added to a selector that styles a specific part of the element. (:first-line, :first-letter)

Question 14

what is a float property used for?

Answer 14

places an element on left or right side of its container, allowing text/inline elements to wrap around it.

Question 15

Different modules in css?

Answer 15

selectors, box model, text effects, animations

Question 16

different media types allowed by css?

Answer 16

all, print, screen, speech

Question 17

different unites in CSS?

Answer 17

em = relative to find size fo element, rem = relative to font size of root element, % = relative to parent element

Question 18

control background image repetition?

Answer 18

background-repeat: none;

Question 19

nomenclature of css?

Answer 19

.className { padding: 10px;}

Question 20

what would {margin: 0 auto;} do?

Answer 20

with a specified width to a container, the object will sit centrally within its’ parent container. auto makes the left and right margins automatically set itself.

Question 21

what does overflow property do?

Answer 21

speciefies what should happen if content overflows an elements box. (overflow: scroll, overflow: hidden)

Question 22

what property to control image scroll?

Answer 22

background attachment: fixed (no scroll)

Question 23

what is responsive web design?

Answer 23

build web pages that detect visitor’s screen size and adjust content accordingly.

Question 24

Difference between visibility : hidden + display: none?

Answer 24

visibility = tag is not visible in, but space is allocated in page and tag is still rendered.

display = will not appear on page, no space allocated, still interact it with dom.

Question 25

Specificity?

Answer 25

means by which browser decides which css property values are most relevant and will be applied. the rule increased by specificity: types (h1), class (.class), id (#hi).

Question 26

what is box shadow?

Answer 26

adds shadow effects around an element’s frame. x and y offsets, blur and spread

Question 27

flexbox?

Answer 27

improves items align, directions, and order in the container. able to modify the width or height of its’ children to fill available space as best as possible.

Question 28

How does a browswer determine what elements match a css selector?

Answer 28

browser’s match selectors from rightmost to left. filter out elements in dom according to key selector and traverse up to its parent elements.

Question 29

explain translate() instead of abs positioning

Answer 29

value of transform. does not trigger browser reflow and create a gpu layer so it will be more efficient and shorter times for animations.

Question 30

responsive v mobile first?

Answer 30

responsive would be some elements responding to a certain screen sizes using media queries, where as mobile first is making the default sizing for mobile views first and then scale up for desktops. (cleaner code with mobile)

Question 31

different ways to position element?

Answer 31

position: fixed, absolute, static, relative

Question 32

what is BFC?

Answer 32

part of visual css rendering of web page in which block boxes are laid out. Floats, absolutely positioned elements, inline-blocks establish new BFC. important because without it, containing boxes will not contain floated children.

Question 33

what would {box-sizing: border-box} do?

Answer 33

changes how width and height are calculated by adding in border and padding in the calculation

Question 34

what is a preprocessor?

Answer 34

a program that generates css from its own unique syntax. add features that don’t exist in pure css. can feature loops, variables (sass)

Question 35

what is the difference between static, relative, fixed, absolute, and static positioning?

Answer 35

sticky = default position, top right left and z-index do not apply. 
relative = position adjusted relative to itself, leaving a gap from where element would be 
absolute = element removed from flow of page at specified position relative to closely positioned ancestor. does not affect other positions. 
fixed = removed from flow of page at specified position and does not move when scrolled. 
sticky = hybrid if relative and fixed. element treated as relative until a specific point and then it is fixed.

Question 36

what are vendor prefixes?

Answer 36

for experimental or non standard css properties and javascript API’s so devs can experiment without breaking code. (-webkit-)

Question 37

what is file splitting?

Answer 37

used for sites with multiple layouts and content types. examples: reset, forms, list, layout.css

Question 38

what are functions/mixins?

Answer 38

mixins = output lines of sass code that compile directly into css styles. 
function = return a value that can then become the value for a css property/something that might be passed into a mixin

Question 39

how does css work?

Answer 39

browser converts HTML + CSS into the DOM. Loads HTML, Parses HTML, Create DOM Tree, Loads + parses CSS, displays content.