Basic CSS Flashcards
What is the structure of CSS Syntax?
p {
font-size: 20px,
color: red;
}
p is the selector, which points to the elements that we want to style.
in block we can find declarations which air pairs of properties and values ended by a semicolon
What are basic types of selectors that are used commonly?
1) p.box {
padding: 10%;
}
looks for <p> elements with class “box”
2) * {color: red}
universal selector, changes everything between tag
3) #one {font-size: 20em;}
id selector
4) grouping selectors with ‘,’</p>
What are four different combinators in CSS?
1) descendant selector (space)
div p {
padding: 10%
}
which looks for p in div.
2) child selector (>)
section >h1 {}
h1 that is a child of section
3) adjacent sibling selector (+) h1 + p {}
4) general sibling selector (~)
h1 ~ p{}How do you reset styles?
- {
margin:0;
padding:0;
}
html { font-size: 10px; }
What are possible units to pick in HTML?
px - pixels
em - relative unit. Inherits the unit in parent, and multiplies it by the value
rem - inherits from the main page element
em & rem only applies to font-sizes
% - percentages sometimes inherit similarly to em unit. However not always - for example, when we set line-height of the line, it is inherited from the font-size
vh, vw - relative to viewport
There is one nuisance worth mentioning: when we set width to 100vw, there will appear a browser bar, because 100vw does not take into account right browser bar - so set width to 100% not 100vw.
On the other hand setting height to 100% will have no effect, since it is depending on the amount of content - 100vh will work on the element.
What is the good practice when setting font size units in document?
Because of the fact that the page is going to be rescaled on different resolutions and devices, it is good practice, to have every font relative to the html element with rem unit.
When page is going to be rescaled, we only change the initial html { font-size: } and everything else will change accordingly
Popular / basic properties and values in CSS
font-size,
background-color,
color (color of the font),
margin: (10px 20 px 20 px 5 px) /* clockwise */ auto - centers the element horizontally (not inherited)
margin-top: (if we want to specify just one direction
padding
border
Basic font properties and values.
font-family (specifies the family for specific segment)
color (inherited also applies to different tags, sa. borders)
font-size
font-style (normal, italic)
font-weight (bold, normal, 400, 700 - when it comes to non-system fonts)
letter-spacing (especially when we create buttons)
text-decoration (underline, line-through)
text-align (left (default), center, justify)
text-transform (uppercase, captalize, lowercase)
line-height
Inherited vs not inherited properties.
Inherited:
- text-transform
- font-size
- color
- font-weight
Not inherited:
- background-color
- margin
- border
- padding
How to calculate selector’s specifity?
1) count 1 if the declaration is from is a ‘style’ attribute rather than a rule with a selector, 0 otherwise (= a) (In HTML, values of an element’s “style” attribute are style sheet rules. These rules have no selectors, so a=1, b=0, c=0, and d=0.)
2) count the number of ID attributes in the selector (= b)
3) count the number of other attributes and pseudo-classes in the selector (= c)
4) count the number of element names and pseudo-elements in the selector (= d)
Common block elements vs inline elements
Block elements:
<h1>, </h1>
<p>, </p>
<div>, <ul>, </ul><ol>, <li>, , , ,
Inline elements:
<span>, <a>, <em>, <code> and , </code></em></a></span></li></ol></div>
What is the difference between vertical margin and horizontal margin of elements when it comes to Box Model?
The horizontal margin between two elements is a sum of both margins.
While vertical margin takes the bigger margin.
What is the purpose of box-sizing:
box-sizing is a functionality that allows us to change how the box is calculated in the box model. (width and height)
Default calculations takes into account content box, padding + border, which is not very convenient
box-sizing: content-box;
box-sizing: border-box;
How do you change the direction of the inline elements?
For example by changing to display: inline-block
How do you apply time to transform the element when changed with pseudoclass
with transition: 0.3s
attribute
