Siksha Sarovar

Siksha Sarovar (sikshasarovar.com) is a free educational web application that helps students in India learn programming and prepare for academic and competitive exams. The platform offers structured coding courses (C, C++, Python, Java, HTML, CSS, PHP, Power BI, AI, Machine Learning, Data Science), complete university curriculum notes for BCA/MCA students with previous year question papers, Class 10 and Class 12 CBSE/HBSE school notes, and dedicated preparation material for SSC, UPSC, Banking, Railway and other government exams. Browsing the site is completely free and requires no account. Users may optionally sign in with Google solely to save their learning progress, quiz scores and personal preferences across devices.

Privacy Policy | Terms of Service | Contact Siksha Sarovar | About Siksha Sarovar

v4.0.9 · PWA
Siksha Sarovar logo
Siksha Sarovar
Your Learning Universe

Siksha Sarovar is a free e-learning platform for coding courses, BCA university notes and competitive exam preparation. Optional Google sign-in saves your learning progress across devices.

Privacy Policy · Terms of Service · Contact

Initializing knowledge base…
Compiling modules 0%

Introduction to CSS: Selectors and Properties

Lesson 9 of 34 in the free Web Technologies notes on Siksha Sarovar, written by Rohit Jangra.

Introduction to CSS: Selectors and Properties

What is CSS?

CSS (Cascading Style Sheets) controls the visual presentation of HTML documents. It separates structure (HTML) from presentation (CSS).

Ways to Apply CSS

<!-- 1. Inline CSS -->
<p style="color: red; font-size: 16px;">Red text</p>

<!-- 2. Internal CSS -->
<head>
  <style>
    p { color: blue; }
  </style>
</head>

<!-- 3. External CSS (preferred) -->
<head>
  <link rel="stylesheet" href="styles.css">
</head>
MethodScopeMaintainability
InlineSingle elementPoor
InternalSingle pageMedium
ExternalEntire siteBest

CSS Selectors

/* Element selector */
p { color: navy; }

/* Class selector */
.highlight { background: yellow; }

/* ID selector */
#main-title { font-size: 2em; }

/* Descendant selector */
div p { margin: 10px; }

/* Child selector */
ul > li { list-style: square; }

/* Attribute selector */
input[type="text"] { border: 1px solid gray; }

/* Pseudo-class */
a:hover { color: red; }
li:first-child { font-weight: bold; }

/* Pseudo-element */
p::first-line { font-variant: small-caps; }
p::before { content: "→ "; }

/* Universal selector */
* { box-sizing: border-box; }

CSS Specificity

When multiple rules apply, specificity determines which wins:

SelectorSpecificity
Inline style1000
ID selector100
Class / attribute / pseudo-class10
Element / pseudo-element1
Universal (*)0

Common CSS Properties

.box {
    /* Text */
    color: #333;
    font-family: Arial, sans-serif;
    font-size: 16px;
    font-weight: bold;
    text-align: center;
    text-decoration: underline;
    line-height: 1.5;

    /* Background */
    background-color: #f0f0f0;
    background-image: url('bg.jpg');

    /* Spacing */
    margin: 10px 20px;
    padding: 15px;

    /* Border */
    border: 1px solid #ccc;
    border-radius: 8px;

    /* Size */
    width: 300px;
    height: 200px;
}

CSS Cascade and Inheritance

The cascade determines which styles apply when conflicts occur:

  1. Browser default styles
  2. External stylesheets
  3. Internal styles
  4. Inline styles
  5. !important (overrides all)
Key Takeaway: CSS selectors target HTML elements; specificity resolves conflicts. Prefer external stylesheets and semantic class names over inline styles for maintainability.