CSS Flashcards
How Many ways CSS can be applied to an HTML?
3 ways
What are the different ways of applying CSS to HTML?
External , Internal and Inline
Is there any precedence order in which the styles are applied between different ways?
There is no such precedence order applied. Instead , the styles are applied in the order which they are declared
What are different types of selectors in CSS?
Class selector , Id selector , Element Selector
How does CSS work?
CSS works much like Waterfall
Does Class selector have more specificity than Element Selector?
Yes
What properties are inherited ?
Font styles generally Typography is inherited
rgb() vs rgba()
The difference is that rgba(alpha) provides an extra parameter for transparency that ranges between 0 and 1.
What is rem?
rem implies one root element(default size of browser).It always sets the value relative to the root value
What is em?
em implies element and it sets the value relative to parent value
When to use em’s instead of rem’s?
When we set em on the element and the element does not look at the parent instead it looks after itself then we use em’s
Is Body Element always 100% ?
Body element grows the size of the content . To make it occupy 100% by default and grow size based on the content , use min-height:100vh property
what is css reset?
using wildcard *{} makes apply the properties inside *{} to be applied instead of default browser properties like margin , padding etc
What is border-box box sizing?
It includes padding and border along with the content when content size(width=400px) is specified . For example when width is 400 px , it includes padding:48px, border:4px(2*2px) and width size: 348px . On the other hand, if we use content-box then overall size will be 400+48+4 pixels . Content-size(width-box):400px will remain as it is and other properties will work as specified
Will margin be set for a div on left and right side by default?
No , we should use auto to see effect. Like , margin: 3rem auto
How to make a div as circle in CSS ?
By using border radius and setting it to about Half of the div’s height or width , we can make a square div into circle .
What does inherit keyword do?
Inherit keyword allows inheriting the value of the parent element.
What does text-transform do?
Using this , we can set text to capitalize , uppercase , lowercase etc
What does text-align do?
It aligns the text to specified setting . like left makes the text align to left . like justify aligns the text to be uniform
What does text-indent do?
It gives some indentation(space) at the start of the text
What does line-height do?
Sets the height of line
What does letter-spacing do ?
Sets the spacing between letters
Are paragraph elements <p></p> block level?
Yes , they are block level
How are block level elements arranged?
Block level elements are stacked one above the other.we can apply margin,padding etc to all the sides. Also they take up the complete width of the container where as inline elements take the wisth of the content it holds
