DEV Community

Cover image for 🎨 Complete CSS : From Basics to Advanced
Swapnil Meshram
Swapnil Meshram

Posted on • Edited on

🎨 Complete CSS : From Basics to Advanced

#webdev #css #devsync

Presented by Swapnil Meshram within mentorship @devsyncin

🎓 Under the mentorship of DevSync, enhanced CSS skills through a
combination of structured learning and hands-on practice.

🧠 CSS is the language used to style an HTML document. It describes how HTML elements should be displayed.

Why Use CSS? 


📱 Makes websites visually appealing

🔁 Reusable styles across multiple pages

📦 Enables responsive and adaptive designs

✨ Styling Enhancements

🎨 Adds visual design to web content
Enter fullscreen mode Exit fullscreen mode

📌 CSS Syntax 


selector {
  property: value;
}
Enter fullscreen mode Exit fullscreen mode

Example:


h1 {
  color: green;
  font-size: 30px;
}
Enter fullscreen mode Exit fullscreen mode

📌 Types of CSS

There are three main types of CSS based on how it’s applied:

Type Description Example
Inline CSS Applied directly within an HTML tag <h1 style="color:red;">Hello</h1>
Internal CSS Written within <style> in the <head> <style> h1 { color: blue; } </style>
External CSS Linked using an external .css file <link rel="stylesheet" href="style.css">

📌 Selectors in CSS

CSS selectors target HTML elements to apply styles.

Selector Type Example Targets
Element p All <p> tags
Class .note Elements with class="note"
ID #header Element with id="header"
Group h1, p All <h1> and <p>
Universal * All elements
Descendant div p <p> inside <div>

📌 Common CSS Properties

Property Description Example
color Text color color: red;
background-color Background color background-color: yellow;
font-size Size of text font-size: 20px;
padding Space inside element padding: 10px;
margin Space outside element margin: 10px;
border Border styling border: 1px solid black;
width/height Set size width: 100px;
text-align Text alignment text-align: center;

📌 Box Model

The box model explains how elements are structured and spaced in CSS:


[ Margin ]
  [ Border ]
    [ Padding ]
      [ Content ]
Enter fullscreen mode Exit fullscreen mode

📌 Positioning in CSS

Property Use
static Default flow
relative Position relative to its normal spot
absolute Positioned relative to nearest ancestor
fixed Fixed position on screen
sticky Scrolls with page until a point

📌 Display & Visibility 


display: block; – Takes full width

display: inline; – Takes only needed width

display: none; – Element disappears

visibility: hidden; – Hides element, but space remains
Enter fullscreen mode Exit fullscreen mode

📌 Flexbox Basics 


.container {
  display: flex;
  justify-content: center;
  align-items: center;
}
Enter fullscreen mode Exit fullscreen mode

🔹 Properties:


justify-content: horizontal alignment

align-items: vertical alignment

flex-direction: row or column
Enter fullscreen mode Exit fullscreen mode

📌 Grid Layout

CSS Grid is great for 2D layouts.


.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
Enter fullscreen mode Exit fullscreen mode

📌 Media Queries (Responsive Design)

Media queries make sites responsive.


@media (max-width: 600px) {
  body {
    background-color: lightblue;
  }
}
Enter fullscreen mode Exit fullscreen mode

📱 Targets devices of different screen sizes.

📌 CSS Pseudo-classes & Elements

Type Syntax Use
Pseudo-class a:hover Style when hovering
Pseudo-element p::first-line Style part of element

📌 Advanced CSS Concepts

Transitions


button {
  transition: background-color 0.3s ease-in-out;
}
Enter fullscreen mode Exit fullscreen mode

Animations


@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.fade {
  animation: fadeIn 1s ease;
}
Z-index – controls stacking of overlapping elements

@font-face – loads custom fonts
Enter fullscreen mode Exit fullscreen mode

📌 Best Practices in CSS

✅ Use external stylesheets for cleaner HTML

✅ Organise styles with comments

Top comments (0)

Some comments may only be visible to logged-in visitors. Sign in to view all comments.