Skip to main content

CSS Concepts

  • Pseudo Classes (active, checked, disabled, nth-child, visited)
  • Pseudo Elements (after, before)
  • CSS Specificity (!important > style > id > class, attribute > element)
  • Position (static, relative, fixed, absolute)
  • Z-index with Respect to Parent
  • CSS Resets and Normalization
  • Important Box Model and box-sizing: border-box; (margin, content-box, padding, border)
  • Responsive Web Design
  • Flexbox (display, flex, align-items, justify-content, flex-direction)
  • Grid (display, grid, grid-template-columns, grid-template-rows, row-gap, column-gap)
  • Media Query (xs, sm, lg, xlg - 320-480-700-900-1200)
  • Block, Inline (a, button, img, input, select, span), Inline-block
  • Float, Normal Document Flow, Clear Float
  • Width Clamp Function
  • var, Math Function
  • Attribute Selectors
  • text-align and vertical-align
  • CSS Units (Fixed and Relative)
  • Combinator Selectors
  • Inline, Internal, and External Styles
  • vh/vw (Viewport Height/Viewport Width)
  • Accessibility (a11y)
  • Image Sprites
  • !important and Its Usage
  • Linear Gradient (linear-gradient(to right, #3498db, #e74c3c))
  • CSS Vendor Prefixes (-webkit-box-shadow, -moz-box-shadow)
  • Opacity
  • Accessibility and ARIA Roles
  • CSS Performance Profiling
  • 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;}
/* Pseudo Class */a:visited {  color: #00FF00;}
/* Pseudo Elements */h1::before {  content: url(smiley.gif);}
tr:nth-child(odd) {  background-color: #f2f2f2;}

Resources: