Minimum CSS Every Front End Developer Should Know
CSS is an ART, which we can learn only by practice and there is no definite time to master it. However there are few specific CSS which I think everyone should know. These CSS rules may give you a path, which may lead you to mastery level.
- Ways to include CSS in webpage
we have 4 ways that we can use to include CSS in any web page.
a. Inline CSS — In this type, we write our css against style attribute of an HTML element, different rules are separated by a ; semicolon.
b. Internal CSS — In this type, we write our CSS under <style> tag. Which falls under <head> tag.
c. External CSS — In this type, we write CSS in an external file. The file have extension .css . And we include the CSS file using <link> tag under <head> tag.
d. Using @Import — In this type, we include our CSS using @import keyword.
This type of import only work inside styletag.
Advantage of this Rule: We can include media dependent CSS conditionally.
2. Which CSS has highest priority
This is not a property, but a concept that everyone of us should know.
So we have 4 ways to apply CSS, what if we apply CSS Rule, in all 4 ways them which CSS rule will be applied?
This is the Priority order:
inline css > internal css > external css > @import
Inline CSS has highest priority. After this Internal followed by External and @import.
3. Use of !important
What this property says is, If you use me with any property, I will make sure not other CSS rule can override it. No matter where you write your css to override me, no matter which specificity selector you use I can’t be overridden. Use me with caution.
4. CSS Position Property
This is the most important and widely used property. We must understand it completely.
Following are the possible values for position property:
static: By default every element is static. top,left,bottom,right property won’t work on any element until we assign any other property other than static.
absolute: When we use this property, the element leaves the DOM tree, and can placed anywhere in WebPage. Once an element becomes absolute, it won’t affect the layout of webpage at all. It will become like free element place it anywhere.
Positioning will be calculated from nearest parent having position relative, if there is not parent with position relative the positioning will be calculated from the body tag.
relative: Once we apply this property we can move the element using top,left,bottom,right. The element will be moveable with respect to its current position.
fixed: This property makes the elements fixed at any given position. Means, with scroll, the element won’t move. The top,left,bottom,right position will be calculated w.r.t. to the body tag.
sticky: This property works exactly same as fixed, with one variation, i.e. we can make an element to behave fixed, once it reaches to a particular position.
For example: If we scroll the page, and element reaches to 100px from top, and we want to stay there. In this case we can use sticky.
5. Display Property
This is one the most important property in CSS. There are more than one usage of display property.
1. To convert inline elements to block, flex and vice-versa.
2. To remove an element from DOM tree. In other terms making it non-existent so that the element won’t take up any space in view.
3. To control the layout (Grid/Flex/Table-cell)
display:none //to remove element from dom
display:block // conversion of inline to block
display:flex | grid // to control the layout flow
6. Z-Index
We use this property to manage the stack of views. View with higher value will be on the top and will cover the views with lower z-index. We mainly use it for pop-up menus, dialog boxes as they appear on top of any other html element.
7. Overflow
As name suggest, we use this property to control the behaviour of an element when the content is large and not able to fit in container. We can either add a scroll or we can hide the overflowing content.
we can control the horizontal and vertical overflow behaviour individually.
overflow:auto // adds a scroll bar, whenever content height is larger than container (short hand for both x and y)
overflow:hidden // will hide the overflowing conainer. (Short hand for both x and y)
overflow-x and overflow-y control each side scroll separatley.
8. Box-Model
This is the one of the most import concepts in CSS. One should under stand how box model works in CSS. Basically box model is nothing but the combination of three properties padding, margin and border.
9. Background
There are many usage of the background property.
1. Adding background color to any html element.
2. Adding images as a background to any html element.
10. cursor
11. pointer-events
There are more than one usage of this property. we can use this property based on what situation is:
Situation 1: When we want to disable clicks on element. However we should also achieve disability using JS also. If we apply pointer-events:none to any element, that element will not be clickable.
Situation 2: When we want a transparent background or element above any visible content. But want our click to penetrate through the transparent view.
we can add pointer-events:none to have a click through functionality.
12. Any Layout Management Property
Almost every website follows a layout, either column, row or grid layout. One should know at least one way to manage the layouts in a website. Years ago we use to manage the layout using floats but now a days flex and grids are two most popular way of managing the layout.
Following is demonstration of justify-content property which works only with flex . The video demonstrates how our content will behave when the browser window resizes.
13. Pseudo Classes
Using CSS properties we can show different states of an HTML element. by state I mean how are we interacting with the HTML element and what is its current state. For example: Is the element is in Focused State, or are we hovering the element.
Few common Pseudo Classes are:
hover, visited, focus
we can apply these Pseudo classes using a colon : after the CSS selector.
14. Pseudo Elements
Just like Pseudo classes we have Pseudo elements. Using which we can decorate an HTML element at some extent without using additional tags.
Syntax: Add double-colon :: after the CSS selector to add CSS to Pseudo elements.
Usage:
For example: we can make first line of any element stand out, we can add custom style to first letter of any html element without wrapping it in a span.
15. Border
As name suggest this property adds a visible border to any element. we can relate to the bezels in smartphones.
16. Border Radius
We use this property to provide rounded corners to any html elements.
17. Opacity
As it is clear from its name. This property is used to control the amount of visibility of any element. Its value lies b.w. 0 to 1 . By default every element has opacity of 1 . Opacity 0 means the element is not visible at all but will take up space in the DOM.
Few Usage of Opacity:
1. To give semi transparent look. Generally you see this behaviour in Dialog boxes.
2. In fade-in and fade-out animation. Generally we use opacity to give this beautiful effect.
18. box-sizing
This property controls how the size of html element affect when we apply padding and border to it. By default padding and border size does not contribute towards the size of a html element. Which will result is larger size of element as per given height and width.
For example if we have a div of 100px. and we apply padding left and right of 20px and border of 4px then the size of div will become 148px. as padding will be added to the box.
But if we wan’t to include the padding and border in 100px, then we can use box-sizing:border-box.
Happy Coding !!!
