Web Development
CSS TIPS & Tricks

CSS TIPS & Tricks

Jeevan Henry Dsouza's photo
Jeevan Henry Dsouza
·

4 min read

Table of contents

Position in CSS

  1. Relative: will be according to its base position in the document flow

  2. Absolute: it will be taken outside of the dom and then placed according to the parent which has position relative, if not found any parent then will place it according with respect to the body

  3. Sticky: The element is positioned according to the normal flow of the document, and then offset relative to its nearest scrolling ancestor and containing block (nearest block-level ancestor), including table-related elements, based on the values of top, right, bottom, and left. The offset does not affect the position of any other elements.

  4. Fixed : The element is removed from the normal document flow, and no space is created for the element in the page layout. It is positioned relative to the initial containing block established by the viewport, except when one of its ancestors has a transform, perspective, or filter property set to something other than none (see the CSS Transforms Spec), or the will-change property is set to transform, in which case that ancestor behaves as the containing block

    Use Of Margin Auto

    1. The use of margin auto will make sense only when the HTML element has been given a specified height and width

    2. The meaning of auto is to take all the space available

    3. While using flexbox this will still work even if do not specify the height and width the reason behind this is that the size of the flexbox is the minimum space of the flexbox items (to be specific the minimum space that the content of the flexbox that is the flexbox items require)

    4. margin: auto is a short-hand property

    5. margin-left: auto,will take the space available in the left and push the tag towards the right

    6. margin-right: auto , will take the space available on the right and push the tag towards the left

    7. by using margin-left: auto and margin-right: auto we can center the element

      Specificity

      1. If there are two or more CSS rules that point to the same element, the selector with the highest specificity value will "win", and its style declaration will be applied to that HTML element.

      2. Think of specificity as a score/rank that determines which style declaration is ultimately applied to an element.

      3. Specificity calculation

        There are four categories that define the specificity level of a selector:

        • Inline styles - Example: <h1 style="color: pink;">

        • IDs - Example: #navbar

        • Classes, pseudo-classes, attribute selectors - Example: .test, : hover, [href]

        • Elements and pseudo-elements - Example: h1, : before

CSS Combinators

Note We always use combinator with respec to a parent, parent not mentioned then they dont work properly

  1. The descendant selector matches all elements that are descendants of a specified element.The following example selects all <p> elements inside <div> elements:

     div p {
   background-color: yellow;
 }

    1. The child selector selects all elements that are the children of a specified element.The following example selects all <p> elements that are children of a <div> element

        div > p {
   background-color: yellow;
 }

      1. The adjacent sibling selector is used to select an element that is directly after another specific element.Sibling elements must have the same parent element, and "adjacent" means "immediately following".

        The following example selects the first <p> element that are placed immediately after <div> elements:

         div + p {
   background-color: yellow;
 }

        1. The general sibling selector selects all elements that are next siblings of a specified element.The following example selects all <p> elements that are next siblings of <div> elements:

           div ~ p {
   background-color: yellow;
 }`

    2. Z-index in CSS

      • For the z-index to work the element should have a position property attached to it.

      • This property can be positioned absolute, relative, etc but should not be sticky

      • However, when we use flexbox, the z-index will apply to the flex items even of they do not have any position, ie even if they are position sticky this will work

      • Z- index of parent will also be applicable on child if both are positioned

      • CSS has a default stacking order

        • When the z-index property is not specified on any element, elements are stacked in the following order (from bottom to top):

        • The background and borders of the root element.

        • Descendant non-positioned elements, in order of appearance in the HTML.

        • Descendant positioned elements, in order of appearance in the HTML.

Pseudo Elements

  1. A CSS pseudo-element is a keyword added to a selector that lets you style a specific part of the selected element(s).

  2. For example, ::first-line can be used to change the font of the first line of a paragraph.

     /* The first line of every <p> element. */
 p::first-line {
   color: blue;
   text-transform: uppercase;
 }

Pseudo Class

  1. A CSS pseudo-class is a keyword added to a selector that specifies a special state of the selected element(s).

  2. For example, the pseudo-class :hover can be used to select a button when a user's pointer hovers over the button and this selected button can then be styled.

/* Any button over which the user's pointer is hovering */
button:hover {
  color: blue;
}
CSSiwritecode