×

Language Selection

CSS Notes for Beginners

css Created on March 7, 2025
Project Meeting

CSS Notes for Beginners

1. Introduction to CSS

What is CSS?

CSS (Cascading Style Sheets) is used to style HTML elements. It controls the layout, colors, fonts, and more.

Types of CSS

  1. Inline CSS - Applied directly within an HTML tag.

    <p style="color: red;">This is red text.</p>

  2. Internal CSS - Defined within a <style> tag in the <head> section of an HTML file.

    <style>
   p { color: blue; }
</style>

  3. External CSS - Written in a separate .css file and linked to the HTML file.

    <link rel="stylesheet" href="styles.css">

2. CSS Selectors

Basic Selectors

  • Element Selector: Targets HTML elements by their name.

    p { color: green; }

  • Class Selector: Targets elements with a specific class.

    .myClass { font-size: 20px; }

  • ID Selector: Targets an element with a specific ID.

    #myId { background-color: yellow; }

Advanced Selectors

  • Group Selector: Targets multiple elements.

    h1, p { text-align: center; }

  • Child Selector: Targets direct child elements.

    div > p { font-weight: bold; }

  • Descendant Selector: Targets all nested elements inside another.

    div p { color: blue; }

  • Pseudo-classes: Apply styles in special states.

    a:hover { color: red; }

3. CSS Box Model

Each element in CSS is considered a box with the following properties:

  • Content: The actual text or image inside the element.

  • Padding: Space between content and border.

  • Border: The outer line around the content.

  • Margin: Space outside the border, separating elements.

Example:

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

4. CSS Positioning

Types of Positioning

  • Static (default)

  • Relative (moves relative to its normal position)

  • Absolute (moves relative to the nearest positioned ancestor)

  • Fixed (remains fixed even when scrolling)

  • Sticky (behaves like relative until a scroll position is reached)

Example:

.fixed-box {
   position: fixed;
   top: 10px;
   right: 10px;
}

5. CSS Flexbox

Used to create responsive layouts easily.

Example:

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

Common properties:

  • display: flex;

  • justify-content: center / space-between / space-around;

  • align-items: center / flex-start / flex-end;

6. CSS Grid

Another layout system for designing web pages.

Example:

.grid-container {
   display: grid;
   grid-template-columns: 1fr 2fr;
   grid-gap: 10px;
}

7. CSS Media Queries (Responsive Design)

Used to make websites look good on different screen sizes.

Example:

@media (max-width: 600px) {
   body {
      background-color: lightgray;
   }
}

8. CSS Animations

Example:

@keyframes move {
   from { left: 0px; }
   to { left: 100px; }
}

.animated-box {
   position: relative;
   animation: move 2s infinite;
}

This structured guide provides an easy way to learn CSS step by step!

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.