Skip to main content

CSS Concepts

  • inline, internal and external css

  • Pseudo Classes (active, checked, disabled, nth-child, visited) and Pseudo Elements (after, before)

  • Important Box Model and box-sizing: border-box; (margin, content-box, padding, border)

    • box-sizing: content-box; is the default behaviour
    • by default, width is applied to only content, excluding padding and border

  • border vs outline e.g outline: 1px solid black;

    • use is to provide a visual indication of focus for interactive elements, such as links and form fields.
    • outside of the box model, doenst take space in box model

  • Position (static, relative, fixed, absolute)

  • translate vs position:relative vs position:absolute;

  • Block, Inline (a, button, img, input, select, span), Inline-block

  • Float, Normal Document Flow, Clear Float

  • flex vs grid

  • Flexbox (display, flex, align-items, justify-content, flex-direction)

  • Grid (display, grid,grid-area, grid-template-areas,grid-template-columns,1fr, grid-template-rows, row-gap, column-gap)

  .grid_cotainer{    display: grid;    grid-template-columns: repeat(3, 100px); // 3 columns with width 100px
    justify-items: center;    align-items: center;    place-items: center;
    justify-content: center;    align-content: center;    place-content: center;  }

  • use of grid instead of flex when have multiple items with different widths using fr

  • mobile first vs desktop first approach

  • Media Query (xs, sm, lg, xlg - 320-480-700-900-1200)

  • @media property

    • screen
    • print
    • speech
    • all

  • CSS Selectors (class, id, attribute, combinator, element)

  • rem vs em vs px vs %

  • stacking context and z-index

  • theming

  • CSS Specificity (!important > style > id > class, attribute > element)

  • Z-index with Respect to Parent

  • CSS Resets and Normalization

    • Reset → “wipe everything clean”
    • Normalize → “fix differences, keep good parts”

  • Responsive Web Design

  • Block Formatting Context (BFC)

    • overflow: hidden and display: flow-root;

  • Width Clamp Function : width: clamp(min, preferred, max);

  • var, Math Function

  • text-align and vertical-align

    • vertical-align Works on: • inline elements • inline-block • table cells

  • CSS Units (Fixed and Relative)

  • vh/vw (Viewport Height/Viewport Width)

  • Image Sprites

    • Image sprites = one single image that contains multiple smaller images/icons Instead of loading many small images, you load one image and show only parts of it using CSS.

  • !important and Its Usage

  • Linear Gradient (linear-gradient(to right, #3498db, #e74c3c))

  • CSS Vendor Prefixes (-webkit-box-shadow, -moz-box-shadow)

  • Opacity

  • CSS Performance Profiling

  • responsive design vs adaptive design

  • styling svg

  • Browsers match selectors from rightmost (key selector) to left

  • CSS properties that trigger reflow, repaint, and compositing

    • reflow - width, height, margin, padding
    • repaint : color, background, box-shadow,
    • compositing: transform, opacity,

  • Transform

    • transform: rotate(45deg)
    • transform: translateX(200px) translateY(200px)
    • transform: scaleX(0.4) scaleY(0.4)
    • transform-origin: top

CSS Animation#

  • Transition
    • transition-duration (how long does it take to transition, 0.5s or 200ms)
    • transition-property (what property am I transitioning; using all is CPU intensive; rather provide properties with comma-separated)
    • transition-timing-function (linear, ease-in, ease-out, ease-in-out)
    • transition-delay (when does animation delayed start)
  • Animation
    • @keyframes
    • 0% 100% (from to)
    • animation-iteration-count: infinite;
    • animation-fill-mode: forwards; (maintaining the final state)
    • animation-direction: alternate;
    • Move background-position: bottom-left to bottom-right

SASS/SCSS#

  • Mixin vs. @extend (Mixin can also be used in place of @extend, but it will generate extra CSS)

CSS Methodologies#

  • BEM (Block Element Modifier)
  • OOCSS (Object-Oriented CSS)
  • SMACSS (Scalable and Modular Architecture for CSS)
  • reset.css
  • normalize.css

Code Samples:

background-image: linear-gradient(to right, #3498db, #e74c3c);
@media screen and (min-width: 320px) and (max-width: 502px) {  .hospital-home {    margin-top: -190px;  }}
/* Attribute Selector */a[my-attr="subm"] {  background-color: yellow;}
/* wildcard selects all that has my-attr value subm word in it */a[my-attr*="subm"] {  background-color: yellow;}/* wildcard selects all that has class value subm word in it like class="main-subm", "masubmsekr", "par-subm-sekr" etc.*/a[class*="subm"] {  background-color: yellow;}
/* Pseudo Class */a:visited {  color: #00ff00;}
/* Pseudo Elements */h1::before {  content: url(smiley.gif);}
tr:nth-child(odd) {  background-color: #f2f2f2;}

Resources: