css Flashcards
Serif vs Sans-Serif
and
monospace
Serif fonts are characterized by the little extra fine details on the ends of the letters, at the end of the main strokes of characters, there are small flourish stokes called serifs.
Sans-Serif have straight ends on each letter and there are no strokes at the edges.
Serif Fonts:
Georgia, Times, Times New Roman, Bodoni, Garamond, Palatino, ITC Clearface, Plantin, American Typewriter
Sans-Serif Fonts
Arial, Verdana, Helvetica, Geneva, Tahoma, Trebuchet MS, Open Sans, Liberation Sans, Impact.
With monospace every letter has the same fixed width and letters are equally spaced apart
What values does the font-family property takes?
element {
font-family: value;
}
Font-family can take multiple values. It is a prioritized, comma-separated list of font family names (from left to right, highest to lowest) that allows to set fallback fonts
line-height
It’s commonly used to set the distance between lines of text (like interlineado)
what does the ‘at’ (@) symbol do in CSS?
@font-face {
font-family: ‘Comic Neue’;
font-style: italic;
font-weight: 300;
font-display: swap;
}
@ is used to define a rule.
At-rules can be used to import other CSS files, apply CSS to a particular media, or embed fonts.
@import url(morestyles.css);
They must be placed at the top of a stylesheet, before any other rules.
Examples:
@font-face {
font-family: “font of all knowledge”;
src: url(fontofallknowledge.woff);
}
What this does is create a font named “font of all knowledge” using the font-family descriptor and links the font file “fontofallknowledge.woff” to that name using the src descriptor. “font of all knowledge” can then be used in a standard font rule, such as:
p { font-family: “font of all knowledge”, arial, sans-serif; }
Why setting the width and height on html images is important?
Prevents layout shifts.
Always include width and height size attributes on your images and video elements. Alternatively, reserve the required space with CSS aspect ratio boxes. This approach ensures that the browser can allocate the correct amount of space in the document while the image is loading.
What is an aspect ratio box?
The aspect ratio of an element describes the proportional relationship between its width and its height
Even when that is a little unintuitive, like for vertical padding. This isn’t a hack, but it is weird: padding-top and padding-bottom is based on the parent element’s width. So if you had an element that is 500px wide, and padding-top of 100%, the padding-top would be 500px.
Isn’t that a perfect square, 500px × 500px? Yes, it is! An aspect ratio!
If we force the height of the element to zero (height: 0;) and don’t have any borders. Then padding will be the only part of the box model affecting the height, and we’ll have our square.
Now imagine instead of 100% top padding, we used 56.25%. That happens to be a perfect 16:9 ratio! (9 / 16 = 0.5625).
Now we have a friendly aspect ratio box, that works well in fluid width environments. If the width changes, so does the height, and the element keeps that aspect ratio.
https://css-tricks.com/aspect-ratio-boxes/
What is the box model?
The CSS box model is essentially a box that wraps around every HTML element. It consists of: margins, borders, padding, and the actual content.
What does the aspect-ratio property do?
The aspec-ratio CSS property sets a preferred aspect ratio for the box, which will be used in the calculation of auto sizes and some other layout functions
rem vs em
Both are relative to the font-size
REM (Root - EM) - Relative to the root element
EM - Relative to the parent’s font-size, and the spacing will be relative to the element’s font size. Note: If the parent doesn’t have a font-size, it will go to the element enclosing the parent
2em means 2 times the size of the current font
what does the template tag do in html?
The element is a mechanism for holding HTML that is not to be rendered immediately when a page is loaded byt may be instantiated subsequently during runtime using JavaScript.
The element has a content property, which is a read-only DocumentFramgment containing the DOM subtree which the template represents.
What types of positions exist?
static - default position, positioned according to the flow of the page. Not affected by top, bottom, left and right properties
relative - positioned relative to its normal position.
Setting the top, right, bottom, and left properties of a relatively-positioned element will cause it to be adjusted away from its normal position. Other content will not be adjusted to fit into any gap left by the element.
fixed - positioned relative to the viewport, which means it always stays in the same place even if the page is scrolled
absolute - positioned relative to the nearest positioned ancestor. If an absolute positioned element has no positioned ancestors (other than static), it uses the document body, and moves along with page scrolling
sticky - positioned based on the user’s scroll position. A sticky element toggles between relative and fixed, depending on the scroll position.
What is Specificity?
Specificity is an algorithm that calculates the weight applied to a given CSS declaration
Difference between transition and animation?
With a transition we can only control how the transition starts and ends, whereas animations allows us to control how the animation behaves on different 0%, 10% 100% (intervals?)
There are two values, separated by commas. The first one is width=device-width. This tells the browser to assume the width of the website is the same as the width of the device (instead of assuming the width of the website is 980 pixels). The second value is initial-scale=1. This tells the browser how much or how little scaling to do. With a responsive design, you don’t want the browser to do any scaling at all.
What does the fr unit represent?
The fr unit represents one fraction of the available space in the grid container
