CSS ?'s Flashcards
What are different ways to intergrate css into html?
style tags in head of HTML, use inline-styling, seperate stylsheet
What is the meaning of cascading
same style can be applied to multiple elements, multiple styles can be applied to a particular html elements, same stylesheet for multiple pages
Advantages of CSS?
multiple elements can have the same style, selectors and grouping can be used to group styles in complex situations
css frameworks?
bootstrap, responsive, mobile first websites
id v class?
Id is unique, so it can only be used once, same class can be applied to multiple elements
what is RGB Stream?
way to get a color for styling of an element, 0-256
Ways to assign a color?
Hexadecimal (#), RGB, HSL functional notation (never used)
CSS Box Model?
describes rectangular box that is generated for elements in dom tree. Each box has content, optional padding, border, margins.
Box model rules?
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
What is z-index?
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.
CSS sprites?
css sprites combine multiple images into one single larger image. It is a commonly used technique for icons. Use a sprite generator.
benefits of sprites
Reduce the number of http requests for multiple images
Psuedo elements?
keyword added to a selector that styles a specific part of the element. (:first-line, :first-letter)
what is a float property used for?
places an element on left or right side of its container, allowing text/inline elements to wrap around it.
Different modules in css?
selectors, box model, text effects, animations
different media types allowed by css?
all, print, screen, speech
different unites in CSS?
em = relative to find size fo element, rem = relative to font size of root element, % = relative to parent element
control background image repetition?
background-repeat: none;
nomenclature of css?
.className { padding: 10px;}
what would {margin: 0 auto;} do?
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.
what does overflow property do?
speciefies what should happen if content overflows an elements box. (overflow: scroll, overflow: hidden)
what property to control image scroll?
background attachment: fixed (no scroll)
what is responsive web design?
build web pages that detect visitor’s screen size and adjust content accordingly.
Difference between visibility : hidden + display: none?
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.
Specificity?
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).
what is box shadow?
adds shadow effects around an element’s frame. x and y offsets, blur and spread
flexbox?
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.
How does a browswer determine what elements match a css selector?
browser’s match selectors from rightmost to left. filter out elements in dom according to key selector and traverse up to its parent elements.
explain translate() instead of abs positioning
value of transform. does not trigger browser reflow and create a gpu layer so it will be more efficient and shorter times for animations.
responsive v mobile first?
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)
different ways to position element?
position: fixed, absolute, static, relative
what is BFC?
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.
what would {box-sizing: border-box} do?
changes how width and height are calculated by adding in border and padding in the calculation
what is a preprocessor?
a program that generates css from its own unique syntax. add features that don’t exist in pure css. can feature loops, variables (sass)
what is the difference between static, relative, fixed, absolute, and static positioning?
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.
what are vendor prefixes?
for experimental or non standard css properties and javascript API’s so devs can experiment without breaking code. (-webkit-)
what is file splitting?
used for sites with multiple layouts and content types. examples: reset, forms, list, layout.css
what are functions/mixins?
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
how does css work?
browser converts HTML + CSS into the DOM. Loads HTML, Parses HTML, Create DOM Tree, Loads + parses CSS, displays content.
