Skip to content

Chapter 2: Cascading Style Sheets and JavaScript 🎨

This cheat sheet covers CSS syntax and JavaScript basics for Chapter 2 of the GSEB Std 12 Computer Studies syllabus.

🎯 Key Concepts

  • CSS (Cascading Style Sheets): Separates document content from presentation.
  • JavaScript: An interpreted, client-side scripting language for logic and validation.

🎨 Cascading Style Sheets (CSS)

1. Types of Selectors

Selector Syntax Example Description
Element tag { ... } h1 { ... } Targets all tags of that type.
ID #id { ... } #main { ... } Targets a single unique element.
Class .class { ... } .red { ... } Targets multiple elements with that class.
Universal * { ... } * { ... } Targets all elements on the page.

2. Methods of Applying CSS

  1. Inline Style: Used within a specific HTML tag (highest priority).
  2. Internal (Embedded) Style: Placed inside <style> tag in the <head> section.
  3. External Style Sheet: Saved as a .css file and linked using the <link> tag.

📜 JavaScript (JS) Core Features

1. Variables and Data Types

  • Variables: Declared with var. E.g., var age = 12;.
  • Data Types: Number, String, Boolean (true/fase), Object, Null, Undefined.

2. Essential JS Functions

  • alert("msg"): Simple popup with an OK button.
  • isNaN(value): Returns true if the value is NOT a number (very common in MCQs).
  • parseInt("string"): Converts a string into an integer.
  • parseFloat("string"): Converts a string into a decimal number.
  • confirm("msg"): Returns true if user clicks OK; false otherwise.

3. Events (Trigger Actions)

  • onclick: Mouse click on an element.
  • onmouseover: Mouse pointer moves over an element.
  • onfocus: Element (like an input) becomes active.
  • onblur: Element loses focus.
  • onsubmit: Triggered when a form's submit button is clicked.

🖥️ JavaScript Form Access Logic

Accessing elements is the core of form validation: - By ID: document.getElementById("name").value; - By Index: document.forms[0].elements[1].value; - By Name: document.form1.name.value;

💡 Board Focus: High-Weightage Points 👔

  • MCQ Alert: CSS properties and values are separated by a colon :.
  • MCQ Alert: JavaScript uses the + operator for string concatenation.
  • MCQ Alert: The NaN function stands for Not-a-Number.
  • MCQ Alert: Comments in JS: // for single line, /* ... */ for multiple lines.
  • MCQ Alert: To focus on an element automatically, use the focus() method.

Common Mistake

The isNaN() function is tricky! isNaN(123) is false, but isNaN("ABC") is true.

Std 12 Hub | Next: Chapter 3 Cheat Sheet