Essential CSS Properties Every Web Developer Should Know!

Ravi GalhotraRavi Galhotra
3 min read

CSS (Cascading Style Sheets) is the backbone of web design, allowing developers to create visually appealing and responsive websites. In this blog post, we'll explore some of the most important CSS properties that every web developer should be familiar with.

  1. Display

    The display property is fundamental in controlling how elements are rendered on a page.

.element {
  display: block | inline | inline-block | flex | grid | none;
}
Display ValueDescriptionVisual Analogy
blockStarts on a new line, full widthRectangular box on a new line
inlineSits on the same line, wraps textInline box fitting content
inline-blockLike inline, but with width/heightDefined size box on the same line
noneHides the elementEmpty space
flexFlexible layout containerContainer for arranging child elements
gridGrid layout with rows/columnsTable-like structure for positioning

  1. Position

    position determines how an element is positioned in the document flow.

.element {
  position: static | relative | absolute | fixed | sticky;
}
Positioning TypeDescriptionRelative ToStays in Document Flow
Static (default)Element is positioned according to the normal document flow (one below the other).Containing Block (usually parent element)Yes
RelativeElement stays in the normal flow but can be offset using top, right, bottom, and left properties relative to its original position.Containing Block (usually parent element)Yes
AbsoluteElement is removed from the normal flow and positioned based on its containing block (viewport by default) using top, right, bottom, and left properties.Containing Block (can be viewport or ancestor with positioning set)No
FixedElement is removed from the normal flow and positioned relative to the viewport using top, right, bottom, and left properties. Stays in place even when the page is scrolled.ViewportNo
StickyElement behaves like a static element initially but "sticks" to the viewport at a certain scroll position using properties like top or bottom.Containing Block (usually parent element)Yes (initially, then relative to viewport)

  1. Box Model Properties

    The box model is crucial for layout and spacing. Key properties include:

    • margin

    • padding

    • border

    • width and height

.box {
  margin: 10px;
  padding: 15px;
  border: 1px solid #000;
  width: 200px;
  height: 100px;
}

CSS box model - CSS: Cascading Style Sheets | MDN

  1. Flexbox

    Flexbox is a powerful layout system for creating flexible, responsive designs.

.container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

  1. Grid

    CSS Grid is another layout system that allows for complex, two-dimensional layouts.

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

  1. Color and Background

    These properties control the appearance of elements:

.element {
  color: #333;
  background-color: #f0f0f0;
  background-image: url('background.jpg');
  background-size: cover;
}

  1. Typography

    Text styling is essential for readability and design:

.text {
  font-family: Arial, sans-serif;
  font-size: 16px;
  font-weight: bold;
  line-height: 1.5;
  text-align: center;
}

  1. Transitions and Animations

    These properties add dynamic effects to your website:

.button {
  transition: background-color 0.3s ease;
}

@keyframes slide-in {
  from { transform: translateX(-100%); }
  to { transform: translateX(0); }
}

Conclusion

Mastering these CSS properties will give you a solid foundation for creating beautiful and functional web designs. Remember, practice and experimentation are key to become proficient in CSS. Happy coding!

1
Subscribe to my newsletter

Read articles from Ravi Galhotra directly inside your inbox. Subscribe to the newsletter, and don't miss out.

CSSCSS3css properties

Written by

Ravi Galhotra
Ravi Galhotra

I am a Frontend Developer from India 🇮🇳 , currently pursuing Bachelor's of Computer Applications. Co-founder @ Webic Technologies