CSS Some Key Topics

5 min readDec 19, 2021

Difference Flex and Grid layout-

Flex layout is a way to organize our elements in one dimension layout Like: we can organize it by either rows or either columns.

Grid layout is designed of two-dimensional layout like rows and columns at the same time. Where flex layout is designed for a one-dimensional layout like only rows or only columns.

CSS box model and different elements of a box model-

The box model is a concept like a margin, border, padding, content these four things wrap the whole content so it looks like a box that’s why we can say this is a box model.

The main content=This is actually the main content

Padding=content inside space

Border=border means content outline

Margin=outside of the main content

Different types of Selectors in CSS-

We can divide into five types:

Simple selector selecting elements based on their name, id, or class

2. Combinator selector selecting elements based on relations between them

3. pseudo-class selector selecting elements based on certain conditions or state

4. Pseudo-elements selectors select elements by a part of an element and change some of its styles and so on.

5. Attribute selector selecting elements based on the attribute value

CSS Preprocessor and some benefits of Sass-

By using a preprocessor CSS code are more organized. Variables and functions are two such things that make the code more readable. We can handle a large number of code as thinking for the future and reuse the code again.

Sass has given us the power to write clean, easy, and less CSS in a programming construct. It contains fewer codes so we can write CSS quicker.

It is more stable, powerful, and elegant because it is an extension of CSS. So, it is easy for us to organize our code more easily.

Pseudo element and pseudo-class-

Pseudo-elements are like parent-child relations in which selected or specific elements colors need to be changed then we use pseudo-element.

Example: p::before , p::after

Pseudo-class are like give us the ability what will happen to color if we hover a button.

Example: :hover, :active,:link,:focus

Use media queries to make a website responsive-

Media queries have the ability to show how a specific website will look in different sizes devices like mobile, tablet, computer.

So if the mobile size is 580px, we can set conditions for how a certain website will look in this size or ratio. Same for the tablet size is in the range of 581–980px then we can also add conditions for how would this website will look like in this device size or ratio.

Make font size responsive-

If we use font units like rem or em then the font size will be responsive.

3 ways to integrate CSS-

There are three methods to integrate CSS.

Inline method — when we used to assign style in the same line of html elements
Internal method — we used this CSS style method by declaring a <style> tag in the same document
External method — we used this css style method by separating style.css file in a separate folder or separate file.

Universal selector-

The universal selector (*) matches the name of any of the element type instead of selecting elements of a specific type.

example:

* { color: green; font-size: 20px; }

child selector-

Child selecting gives the relation between two elements. The element > element selector selects those elements which are the children of a specific parent