Some CSS Important Topics

Flexbox Layout: The flexbox layout is also known as Flexible Box Layout Module in CSS3. It allows us to design a flexible responsive layout without using any float or positioning property. It can improve the item's alignment, direction and order in a container. The flexbox layout can modify the width or height of it’s children.

Flexbox layout vs Grid layout:

Flexbox layout is a one dimensional system that means it can handle only a column or a row.
Grid layout is a two dimensional system which can handle both columns and rows at the same time.

CSS Position Property:

• Static- is the default position of the element which flows into the page as a normal element. The top, right, bottom, left and z-index properties do not apply.
• Relative:- position is adjusted to itself without changing the layout.
• Absolute:- is a specified position where an element is removed from the flow of the page. Using absolute positioning we can place an element exactly where we want relative to its parent. If it has no parent, then it treats the document body as its parent.
• Fixed:- is a specified position where an element is removed from the flow of the page. Using fixed positioning we can place an element where we want relative to the viewport position. These elements don't move when scroll.
• Sticky:- is the combination of relative and fixed position. The element behaves as relative position to a certain distance, after passing this certain distance the element behaves as fixed position.

Box Model: A rectangle box is wrapped around every HTML element. The CSS box model is used to determine the height and width of the rectangular box. The different elements of a box model are content, padding, border and margin.

Pseudo Element:- Pseudo element is a feature of CSS which is used to style the given parts of an element.It is used to create items that do not normally exist in the document tree. Some pseudo elements:- ::after, ::before, ::first-letter, ::first-line, ::selection.

Pseudo Class:- Pseudo class is a class that is used to define a special state of an HTML element. It selects regular elements but under certain conditions like when the user is hovering/focusing over the link. Some pseudo classes:- :link, :visited, :hover, :active, :focus.

Transition Property:- The transition property in CSS is used to make some transition effect. Its effect can be defined in two states using pseudo-classes like : hover or: active. Its syntax like:

**transition:** transition-property transition-duration transition-timing-function transition-delay;

The transition is the combination of four properties which are listed below:

• transition-property: It specifies the CSS properties to which a transition effect should be applied.
• transition-duration: It specifies the length of time a transition animation should take to complete.
• transition-timing-function: It specifies the speed of transition.
• transition-delay: It specifies the transition delay or time when transition starts.

Transform Property:- The transform property in CSS is used to change the coordinate space of the visual formatting model. This is used to add effects like skew, rotate, translate, etc on elements. The transformations can be of 2-D or 3-D type. Its syntax like:

transform: none|transform-functions|initial|inherit;

Media Query:- Media query is a CSS technique introduced in CSS3.It uses the @media rule to include a block of CSS properties only if a certain condition is true. We can write media queries like:

‘declaration’ only ‘media type’ and (‘specifying amount of screen to cover’) {
‘element/class’ {
// styles to apply when all all conditions are met
}
}

**Example:**  If the screen size is 600px wide or less, hide the element for container class.
`@media only screen and (max-width: 600px) {
  .container {
    display: none;
  }
}`

Font Size Responsive:- We can make font size responsive by using media query. If the screen size is 901px wide or more, set the font-size of the container class to 40px and the screen size is 900px wide or less, set the font-size of <div> to 20px.

@media screen and (min-width: 901px) {
  .container {
    font-size: 40px;
  }
}

@media screen and (max-width: 600px) {
  .container{
    font-size: 20px;
  }
}

Overrule Underlining Hyperlinks:- Control statements and external style sheets are used to overrule underlining Hyperlinks.

**Example:**
 p {
text-decoration: none;
}

<p href="about.html" style="text-decoration: none">link text</p>

Box-Shadow:- The box-shadow CSS property adds shadow effects around an element’s frame. We can set multiple effects separated by commas. Below are a few implementations of box-shadow

**box-shadow:** 5px 15px 5px green;
**box-shadow:** 60px -16px teal;
**box-shadow:** 12px 12px 2px 1px rgba(0, 0, 255, .2);
            box-shadow: inset 5em 1em black;