"I am Saqib Jahangir. A passionate vlogger, software engineer, trainer and avid traveler with a deep love for exploring the hidden gems of our beautiful planet. With a strong foundation in Application Development, Application Architecture & Database Design and Product Management, I bring over a decade of hands-on experience building secure, scalable, and resilient web applications for a diverse range of industries."


Click Above to BOOK HOTEL NOW!

CSS Syntax and Selectors

 ✅ CSS Syntax

CSS (Cascading Style Sheets) is used to apply styles to HTML elements. The basic syntax of a CSS rule is:

selector {

  property: value;

}

Example:

p {

  color: blue;

  font-size: 16px;

}

Explanation:

  • p → Selector: targets all <p> elements.
  • color and font-size → Properties.
  • blue and 16px → Values.

✅ CSS Selectors

Selectors define which HTML elements the CSS rules apply to. Here are the most common types:

🔹 1. Universal Selector (*)

Applies to all elements on the page.

* {

  margin: 0;

  padding: 0;

}

🔹 2. Element Selector

Targets HTML elements directly.

css

CopyEdit

h1 {

  text-align: center;

}

🔹 3. Class Selector (.classname)

Targets elements with a specific class.

<p class="intro">Welcome</p>

.intro {

  font-style: italic;

}

🔹 4. ID Selector (#idname)

Targets a specific element with a unique ID.

<div id="main-banner">Hello</div>

#main-banner {

  background-color: lightblue;

}

🔹 5. Group Selector

Apply same styles to multiple selectors.

h1, h2, h3 {

  font-family: Arial;

}

🔹 6. Descendant Selector

Targets elements nested inside other elements.

article p {

  line-height: 1.5;

}

🔹 7. Child Selector (>)

Only applies to direct children.

ul > li {

  list-style-type: square;

}

🔹 8. Attribute Selector

Targets elements with specific attributes.

input[type="text"] {

  border: 1px solid gray;

}

🔹 9. Pseudo-classes

Used for styling elements in a specific state.

a:hover {

  color: red;

}

Common pseudo-classes: :hover, :active, :focus, :first-child, :last-child, :nth-child(n)

🔹 10. Pseudo-elements

Style specific parts of an element.

p::first-letter {

  font-size: 200%;

}

 

Click Below to Shop Now at AMAZON

Click Below to Shop Now at AMAZON

Popular Posts

Operators (Arithmetic, Comparison, Logical)

  Operators in PHP are symbols that perform operations on variables and values. They are essential for performing calculations, comparing values, and making logical decisions in your code. PHP supports several types of operators, including arithmetic, comparison, and logical operators. Arithmetic Operators Arithmetic operators are used to perform basic mathematical operations. Example: <?php $a = 10; $b = 3;   echo $a + $b; // 13 echo $a - $b; // 7 echo $a * $b; // 30 echo $a / $b; // 3.3333 echo $a % $b; // 1 (modulus) echo $a ** $b; // 1000 (exponentiation) ?> Comparison Operators Comparison operators are used to compare two values. They return true or false . Example: <?php $x = 5; $y = 10;   var_dump($x == $y);   // false var_dump($x != $y);   // true var_dump($x === $y); // false (checks value and type) var_dump($x !== $y); // true var_dump($x > $y);    // false var_dum...
Read more

Functions (Built-in & User-defined)

  Functions in PHP are blocks of code designed to perform a specific task. They help make code reusable, organized, and easier to maintain. PHP provides built-in functions for common tasks, and also allows you to create your own user-defined functions . Built-in Functions PHP has hundreds of built-in functions that perform predefined operations such as string manipulation, mathematical calculations, and array handling. Example (Built-in Functions): <?php // String length echo strlen("Hello World"); // Outputs: 11   // Find maximum value in an array echo max(10, 20, 30); // Outputs: 30   // Convert string to uppercase echo strtoupper("php is awesome"); // Outputs: PHP IS AWESOME ?> User-defined Functions You can create your own functions to execute code whenever needed. This helps reduce repetition and makes programs easier to read. Syntax: function functionName($parameter1, $parameter2) {     // Code to...
Read more