Just Enough CSS for Developers to Know!

How CSS works ?

Selectors:
CSS Selectors define the elements to which a set of CSS rules apply.
Specificity:
Specificity is the means by which browsers decide which CSS property values are the most relevant to an element.
Cascade:
The cascade is an algorithm that defines how to combine property values originating from different sources.

How to render an element?

How to render where I want ?

Postioning: The position CSS property sets how an element is positioned in a document.

Float: The float CSS property places an element on the left or right side of its container, allowing text and inline elements to wrap around it.

How to render the entire row of elements?

Flex:
The flex CSS shorthand property sets how a flex item will grow or shrink to fit the space available in its flex container.

How to render the entire page as I wish?

Grid:
The grid CSS property is a shorthand property that sets all of the explicit and implicit grid properties in a single declaration.
Layout:
A CSS Layout mode,sometimes simply called layout, is a algorithm that determines the position and size of the boxes based on the way they interact with their sibling and ancestor boxes.

How to layout on different screen size ?

Media Queires:
Media queries let the presentation of content be tailored to a specific range of output devices without having to change the content itself.
Responsive Design:
Responsive Design is a team used to describe an approach to web design or a set of best practices,used to create a layout that can respond to the device being used to view the content.

How to make it Beautiful?

• Font
• Colours
• Gradients
• Backgrounds

How to make it more interesting?

• Animations
• Transitions
• Transform

How to make Dev faster and Organised?

Using CSS Pre-processor:
Sass Less,Post CSS or any pre-processor.

How to ease Teamwork and Seperation?

BEM(Block Element Modifier):
The BEM methodoogy is a popular naming convention for classes in HTML and CSS.It's goal is to help developers better understand the relationship between the HTML and CSS in a given project.

That was it for this little article. I got to learn so much from this. And I hope you also find this useful. Thank u so much! 😀