Summarisation of questions asked and answers from CSS session.
In what order, CSS styles will be applied to elements in HTML?
Whatever style applied last to the element in the order will be taken. The last specified style will override the prior parent style.
Example: Let's say you have a <div> tag with id named parent with the style colour of green and it has two <p> tag children with the style of red colour. Think through what text colour in the output you will get for <p> tag.
HTML with inline CSS: <div id="parent" style= "color:green;"> <p id="child1" style= "color:red;"> Hello </p> <p id ="child2" style= "color:red;"> World!</p> </div> Output: Hello World!
Here green colour was overridden by red colour for <p> tag text because it was applied last in order. So always keep this in mind when you want to override the style for a particular element, write in order.
What tool did you use to find the colour codes?
I use a website called paletton.com which is very useful and easy to get all types of colour palettes in one place.
How to set a width and height for an element, which should scale and render according to the screen size?
If you want to scale an element like <div> according to screen size, you can specify the width and height in percentage like width = 50%; and height = 25%; For font size, you can specify in em instead of px like font-size = 1em; 1em is equal to 16px which is the standard size used for text as common practices.
Where to get sample data for HTML and CSS?
You can get the sample data from all websites by using the browser tool view source option. Also, either generate the sample HTML and CSS, using a website which I mentioned here or blindtextgenerator.com and you can also copy sample snippets from here.
Where do I get different types of font families?
The best resource is the Google Font. You can find more than 900 font families and also it provides sample codes to import.
What is the difference between the border and outline properties?
In the Box model, border property comes after padding as you might have known it is used to draw the border around an element. The outline property is not included in the Box model, it will draw a similar line like the borderline after the border property in the element.
What is a Box model?
The CSS box model is a wrapper around every element with four parts, which are Content, Padding, Border and Margin.
When to use box-sizing?
Like when you want to use your content(Box model part) size of the element to the actual element view size or in other words if you want to include padding and margin in the total height and width of the element. Usually, while defining width and height for the element it will not include padding and margin. It means elements box model part like margin, border, padding will come under the specified content size.
What is specificity?
Specificity is nothing but a set of rules to instruct the browser to apply a style when two styles were conflicted to an element. Basic rules are like the answer to the first question.
1. Order matter when the same property style applied again and again to the element when you did not specifically mention the class name or id name.
2. When you have use selector specifically using a class name, the order doesn't matter. It applies styles to the class name specific selector.
3. If you use both class name specific selector and id specific selector, browser applies id specific selector styles to the element.
4. When you use "!important" property, it gives more weightage compare to other rule and applies its styles
What is the difference between Static, Relative, Absolute and Fix position?
Static - It is the default position style used to render the elements.
Relative - This position doesn't affect other elements, page holds its original position too.
Absolute - It's is a reference to its parent container. It will affect its environment elements, which page doesn't hold its original position.
Fix: It's similar to an absolute but it does not refer to the parent, it is a reference to the entire page.
Difference between visibility: hidden and display: none?
Both will hide the element in the DOM. Visibility hidden will hold the element in the DOM, display none will remove it.
What is shadow DOM?
What is pseudo-class?
Pseudo-class is nothing but a selector used to achieve the selection of something that doesn't achieve by a simple selector, ex - :hover, :active etc. Pseudo-element is used to add an additional item to the DOM which does not normally exist ex - ::before, ::after, ::selection etc.