×

Language Selection

CSS Tutorial

css Created on March 18, 2025
Project Meeting

1. Introduction to CSS

  • CSS (Cascading Style Sheets) is used to style HTML elements.
  • Types of CSS:
    • Inline CSS: Applied directly to an HTML element using the style attribute. 
      html
      <h1 style="color: red;">Hello World</h1>
    • Internal CSS: Written inside <style> tags within the <head> section. 
      html
      <style>
  h1 { color: blue; }
</style>
    • External CSS: Stored in a .css file and linked to the HTML file. 
      html
      <link rel="stylesheet" href="styles.css">

2. CSS Selectors

  • Element Selector: Targets HTML tags. 
    css
    p { color: green; }
  • Class Selector: Targets elements with a specific class. 
    css
    .box { border: 1px solid black; }
  • ID Selector: Targets a unique element with a specific ID. 
    css
    #header { background-color: yellow; }
  • Group Selector: Targets multiple elements at once. 
    css
    h1, h2, p { margin: 0; }
  • Universal Selector: Targets all elements. 
    css
    * { margin: 0; padding: 0; }

3. Box Model

  • Each HTML element is treated as a box consisting of:
    • Content: The actual content (text, image, etc.).
    • Padding: Space between content and border.
    • Border: Outlines the padding and content.
    • Margin: Space outside the border.

Example:

css
div {
  width: 300px;
  padding: 20px;
  border: 2px solid black;
  margin: 30px;
}

4. Common CSS Properties

  • Text Properties:
    • color, font-size, text-align, line-height, letter-spacing
  • Background Properties:
    • background-color, background-image, background-position
  • Border Properties:
    • border, border-radius
  • Display & Positioning:
    • display, position, top, left, z-index

Example:

css
h1 {
  color: blue;
  text-align: center;
  background-color: lightgray;
  padding: 10px;
  border-radius: 5px;
}

5. Flexbox (For Layout Design)

  • Flexible way to design layouts.
  • Key properties:
    • display: flex;
    • justify-content (Align items horizontally)
    • align-items (Align items vertically)
    • flex-wrap (Wrap items into multiple rows)

Example:

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

6. Grid (For Complex Layouts)

  • Provides a powerful layout system with rows and columns.

Example:

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

7. Media Queries (For Responsive Design)

  • Used to create designs that adapt to different screen sizes.

Example:

css
@media (max-width: 768px) {
  body {
    background-color: lightblue;
  }
}

8. CSS Animations & Transitions

  • Transition Example:
css
.button {
  background-color: red;
  transition: background-color 0.3s ease-in-out;
}

.button:hover {
  background-color: green;
}
  • Animation Example:
css
@keyframes slide {
  from { transform: translateX(-100%); }
  to { transform: translateX(0); }
}

.box {
  animation: slide 1s forwards;
}

9. Practical Tips

✅ Use rem or em for scalable fonts.
✅ Use :root to define global CSS variables.
✅ Avoid inline CSS for better maintainability.
✅ Organize CSS using comments for better readability.

Related Notes

India Holidays 2025

  • January
    • January 1 (Wednesday) - New Year's Day
    • January 6 (Monday) - Guru Gobind Singh Jayanti
    • January 14 (Tuesday) - Pongal, Makar Sankranti, Hazarat Ali’s Birthday
    • January 26 (Sunday) - Republic Day
  • February
    • February 2 (Sunday) - Vasant Panchami
    • February 12 (Wednesday) - Guru Ravidas Jayanti
    • February 19 (Wednesday) - Shivaji Jayanti
    • February 26 (Wednesday) - Maha Shivaratri
  • March
    • March 13 (Thursday) - Holika Dahan
    • March 14 (Friday) - Holi, Dolyatra
    • March 28 (Friday) - Jamat Ul-Vida
    • March 30 (Sunday) - Chaitra Sukhladi, Ugadi, Gudi Padwa
    • March 31 (Monday) - Ramzan Id/Eid-ul-Fitr
  • April
    • April 6 (Sunday) - Rama Navami
    • April 10 (Thursday) - Mahavir Jayanti
    • April 18 (Friday) - Good Friday
  • May
    • May 12 (Monday) - Buddha Purnima
  • June
    • June 7 (Saturday) - Bakrid/Eid ul-Adha
  • July
    • July 6 (Sunday) - Muharram/Ashura
  • August
    • August 9 (Saturday) - Raksha Bandhan
    • August 15 (Friday) - Independence Day, Janmashtami, Parsi New Year
    • August 16 (Saturday) - Janmashtami
    • August 27 (Wednesday) - Ganesh Chaturthi
  • September
    • September 5 (Friday) - Milad un-Nabi/Id-e-Milad, Onam
    • September 29 (Monday) - Maha Saptami
    • September 30 (Tuesday) - Maha Ashtami
  • October
    • October 1 (Wednesday) - Maha Navami
    • October 2 (Thursday) - Mahatma Gandhi Jayanti, Dussehra
    • October 7 (Tuesday) - Maharishi Valmiki Jayanti
    • October 10 (Friday) - Karva Chauth
    • October 20 (Monday) - Naraka Chaturdasi, Diwali
    • October 22 (Wednesday) - Govardhan Puja
    • October 23 (Thursday) - Bhai Duj
  • November
    • November 5 (Wednesday) - Guru Nanak Jayanti
    • November 24 (Monday) - Guru Tegh Bahadur’s Martyrdom Day
  • December
    • December 24 (Wednesday) - Christmas Eve
    • December 25 (Thursday) - Christmas

get update from anywhere

Bearing Void gathering light light his eavening unto dont afraid.