क्या आप अपने फ्रंट-एंड डेवलपमेंट स्किल्स को लेवल अप करना चाहते हैं? इन 10 बुनियादी सीएसएस कौशलों के अलावा और कुछ न देखें जो आपको तुरंत एक पेशेवर में बदल देंगे!

1) बॉक्स मॉडल को समझना

बॉक्स मॉडल CSS लेआउट का आधार है। इसमें चार भाग होते हैं :

1. संतुष्ट,
2. गद्दी,
3. सीमा,
4. अंतर।

.box {
  width: 200px;
  height: 200px;
  border: 1px solid black;
  padding: 20px;
  margin: 10px;
}

CSS चयनकर्ताओं का उपयोग HTML तत्वों को लक्षित करने और उन पर शैलियों को लागू करने के लिए किया जाता है। अच्छी तरह से डिज़ाइन किए गए वेब पेज बनाने के लिए चयनकर्ताओं का सही तरीके से उपयोग करना जानना आवश्यक है। सामान्य चयनकर्ताओं में शामिल हैं:

• कक्षा,
• पहचान,
• तत्व चयनकर्ता।

/* Class selector */
.button {
  background-color: blue;
  color: white;
}
/* ID selector */
#title {
  font-size: 24px;
}
/* Element selector */
p {
  line-height: 1.5;
}

body {
  font-family: 'Helvetica Neue', sans-serif;
  font-size: 16px;
  font-weight: 400;
}

सीएसएस कई लेआउट तकनीकों की पेशकश करता है, जिनमें शामिल हैं:

1. फ्लोट ,
2. फ्लेक्सबॉक्स ,
3. ग्रिड ।

/* Float layout */
.left {
  float: left;
  width: 50%;
}
.right {
  float: right;
  width: 50%;
}
/* Flexbox layout */
.container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
/* Grid layout */
.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 20px;
}

उत्तरदायी डिजाइन एक ऐसी तकनीक है जिसका उपयोग विभिन्न स्क्रीन आकारों के अनुकूल वेब पेज बनाने के लिए किया जाता है । उत्तरदायी डिज़ाइन प्राप्त करने के लिए emमीडिया प्रश्नों और उत्तरदायी इकाइयों का उपयोग करें ।rem

@media only screen and (max-width: 600px) {
  body {
    font-size: 14px;
  }
}

एनिमेशन आपके वेब पेजों को अधिक आकर्षक और इंटरएक्टिव बना सकते हैं। CSS कई एनीमेशन गुण प्रदान करता है, जिनमें शामिल हैं:

• संक्रमण ,
• रूपांतरण ,
• मुख्य-फ़्रेम ।

/* Transition animation */
.button {
  transition: background-color 0.5s ease;
}
.button:hover {
  background-color: red;
}
/* Transform animation */
.box {
  transform: rotate(45deg);
}
/* Keyframes animation */
@keyframes slide {
  from {
    margin-left: 0;
  }
  to {
    margin-left: 100px;
  }
}
.box {
  animation: slide 1s ease infinite alternate;
}

:root {
  --primary-color: #007bff;
}
.button {
  background-color: var(--primary-color);
}

अलग-अलग ब्राउज़र CSS को अलग-अलग तरीके से प्रस्तुत करते हैं, इसलिए क्रॉस-ब्राउज़र संगतता सुनिश्चित करने के लिए विभिन्न ब्राउज़रों में अपने वेब पेजों का परीक्षण करना आवश्यक है ।

/* Vendor prefixes */
.box {
  -webkit-box-shadow: 0px 0px 10px #000;
  box-shadow: 0px 0px

सैस और लेस जैसे सीएसएस प्रीप्रोसेसर आपको अधिक कुशल और मॉड्यूलर सीएसएस कोड लिखने की अनुमति देते हैं। वे चर , मिश्रण और नेस्टिंग जैसी सुविधाएँ प्रदान करते हैं ।

/* Sass code */
$primary-color: #007bff;
.button {
  background-color: $primary-color;
}

बूटस्ट्रैप और फाउंडेशन जैसे सीएसएस फ्रेमवर्क बटन, फॉर्म और टेबल जैसे सामान्य यूआई घटकों के लिए पूर्व-लिखित सीएसएस कोड प्रदान करते हैं । वे आपका समय बचा सकते हैं और आपके डिजाइनों की निरंतरता में सुधार कर सकते हैं।

<!-- Bootstrap example -->
<div class="container">
  <h1>My Website</h1>
  <p>Welcome to my website!</p>
  <button class="btn btn-primary">Get Started</button>
</div>

हैप्पी कोडिंग!