other stuff Flashcards
What is CSS?
Cascading Style Sheets, language for applying styles to HTML
—————————————————————
Stands for cascading style sheets and is used to describe how a document (commonly, html. sometimes svg or xml) should be displayed on media (e.g. screen, printer, projector)
What is the box model?
CSS model for HTML elements, defines space within and around the element. Margin, outline, border, padding, content. Box-sizing affects width and height calculations, general best practice is to use border-box
—————————————————————
https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing
content->padding->border->margin
standard css box model and alternative css box model. we use the alternative one called border box
alternative is called border-box, like border in the box :)
box-sizing: border-box;
If you are using the standard box model, the size of the border is added to the width and height of the box. If you are using the alternative box model then the size of the border makes the content box smaller as it takes up some of that available width and height.
used to describe how [html] elements are derived from css properties <—
https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/The_box_model#what_is_the_css_box_model
What are the display types? What is the difference between them?
Block, inline-block, inline, flex
—————————————————————
block - starts a new line and takes up whole width
inline - (e.g. span) height and width don’t impact these
flex - Displays an element as a block-level flex container
grid - Displays an element as a block-level grid container
none -The element is completely removed
..
inline-block - formatted as an inline element (, not taking up the whole width?) except you can apply height and width
–
inline - (e.g. span) height and width don’t impact these
block - starts a new line and takes up whole width
inline-block - formatted as an inline element (, not taking up the whole width?) except you can apply height and width
flex - block-level flex container
contents
How do you apply width and height to a span?
Change display type to block, inline-block, or flex and set width/height or add padding/margin
—————————————————————
change type display type of it
can use block, inline-block, flex … then you can adjust height and width etc
Tell me about the cascade and selector specificity
id
.class
[attr]
[attr=value]
—————————————————————
cascade = process of resolving conflicts when more than one rule applies to an element
Use the one with the most importance, in this order:
user !important declaractors (user changes in their browser)
author !important declarations (changs devs make)
author ddeclaractions (stuff we devs write)
user declaractions (user changes stuff in their browser)
default browser declarations (what the browser sets)
–
If they have the same importance, use the one that’s the most specific, in this order
(inline, ID, class, elements) - count the numb rof occurrances in the selecter to get the total
eg (0,0,1,0)
inline styles
ids
classes, pseudo classes, attributes
elements, pesudo elements
–
If they have the same specificity, use the last one that was declared. (so the one on the bottom)
https://www.udemy.com/course/advanced-css-and-sass/learn/lecture/8274424#search
Tell me about pseudo-selectors
Keyword added to any selector to specify a special state of the element. :before, :after, :hover, :focus, :first-child, :last-child, :nth-child, :target, :disabled, etc….
—————————————————————
keyword added to a selector that specifies the selectors state
button:hover {
color: blue;
}
—————————————————————
Pseudo class define special state of element like i.e a:hover
while pseudo element define style for specific part of element i.e h1::before
—————————————————————
Difference between pseudo elements and classes:
=> pseudo element represent an actual part of DOM whereas pseudo classes
represents state of an element based on the user’s interactions with it
=> pseudo elements use :: while classes use :
0
What is important keyword?
!important breaks the cascade, prevents further overrides, generally considered bad practice/avoid if possible
—————————————————————
bad practice, impacts the cascade dramatically
Tell me about float and clear
Used to position elements on the page, float pulls an element out of the default document flow, clear ensures earlier floated elements are cleared (position on new line), float/clear layouts are mostly replaced by newer standards (grid, flexbox)
—————————————————————
old method, use flexbox or grid instead.
float - removes an element from the normal flow of the page, sticking an element on the left or right side of its container
clear - moves elements below (clearing them) floated elements before it
What are CSS positions?
Relative, absolute, fixed, sticky
—————————————————————
static - default value of elements relative - positioned statically but then offset from its original position fixed - removed from normal document flow, space gets taken up by other stuff, and positioned relative to the viewport or a parent blocks transform absolute - The element is removed from the normal document flow, and no space is created for the element in the page layout. It is positioned relative to its closest positioned ancestor, if any
Sticky - It is positioned relative until a given offset position is met in the viewport - then it “sticks” in place (like position:fixed).
sticky - The element is positioned according to the normal flow of the document, and then offset relative to its nearest scrolling ancestor and containing block (nearest block-level ancestor)
What are media queries?
Used to apply styles for different media types and devices, often used to detect screen width for responsive breakpoints, often used to detect orientation on mobile devices
—————————————————————
allows you to change styles based on how the page using the style is being viewed (phone, etc)
@media only screen and (max-width: 1200px){
/Tablets [601px -> 1200px]/
}
- What is CSS grid & flexbox?
Used to make layouts and position elements, grid is 2D, flex is 1D, grid is generally preferred at page level vs. inline for flex, can use either one to achieve the same effects most of the time
—————————————————————
What are CSS sprites/spritesheets? Why use them?
Grid of images all on one sheet, can be used to speed up load time in comparison to loading numerous individual assets (reduce network calls)
—————————————————————
CSS Sprites are a collection of images that are combined into a single file that an HTML document can access
helps with performance since it’s just one file, less requests
What new elements are introduced in HTML5?
Nav, main, section, aside, header, footer, article, figure, etc.
—————————————————————
audio and video tags
semantic stuff like section, main, header, footer, aside etc
placeholder attribute I think?
https://www.tutorialspoint.com/html5/html5_new_tags.htm
What is canvas?
Element used to draw/render graphics on the fly, kind of replaces old Adobe flash/multimedia use cases
—————————————————————
an api that provides a means of drawsing graphics via javascript
“The Canvas API provides a means for drawing graphics via JavaScript and the HTML element. Among other things, it can be used for animation, game graphics, data visualization, photo manipulation, and real-time video processing.
The Canvas API largely focuses on 2D graphics. The WebGL API, which also uses the element, draws hardware-accelerated 2D and 3D graphics” - https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API
What is semantic markup?
Markup that conveys the type of content inside the tag or the purpose of the element/tag on the page
—————————————————————
explains the purpose of sections in your document/html
- search engines, devices, accessability purposes like screen readers, for interfacing with other stuff like browser translation things
Tags conveying the meaning of what’s in the tags - https://www.udemy.com/course/understanding-html-and-css/learn/lecture/22046350#overview
“Elements, attributes, and attribute values in HTML are defined (by this specification) to have certain meanings (semantics). For example, the ol element represents an ordered list, and the lang attribute represents the language of the content.” -from the html spec at https://html.spec.whatwg.org/#semantics-2
What is accessibility?
The ability of all users to access an application’s features, particularly support for users with visual, motor, and cognitive disabilities.
—————————————————————
describes an area of focus involving making stuff accessible to more outside entities like ppl and things
“the ability to be accessed”
or in our context, the ability for users to access the things you want them to access via their methods (screen readers,
Accessibility best practices?
Follow WCAG standards, semantic markup, support keyboard navigation, support and test for screenreaders, user test with disabled people, etc.
—————————————————————
semantic, consult UX ppl to make sure it’s usable - covers a lot like readablity, getting users to where they need to go and all kinds of stuff uncovered in testing
USE Alt text on images! HEre’s an example of what happens when you don’t: https://youtu.be/dEbl5jvLKGQ?t=106
Basically, the user gets nothing at all except that there is an image there. The screenreader may read the file name and say that it’s an image.
Use headers on tables too. And use scope tags so users can see what column they’re in while they’re inside the children cells.
Name
Age
Birthday
https://webaim.org/techniques/tables/data
…
watch this https://www.youtube.com/watch?v=0hqhAIjE_8I
