Cascading Style Sheets and JavaScript

Hello students, welcome to Kwickprep. A plain HTML page is like a notebook with no colours and no life. How do websites look beautiful and respond when you click? Today we meet the two helpers behind this, CSS for looks and JavaScript for action.

Think of a web page as a house. HTML is the structure, like the walls and rooms. CSS is the style, like the paint and furniture. JavaScript is the behaviour, like the lights that switch on when you press a button.

CSS stands for Cascading Style Sheets. A CSS rule has two parts. The selector, here h1, says which elements to style. Inside curly brackets we write declarations, each a property, a colon, a value and a semicolon. This rule makes every main heading blue and centred.

There are three ways to add CSS to a page. Inline CSS uses the style attribute inside one tag, so it styles only that element. Internal CSS goes inside a style tag in the head, and styles one whole page. External CSS is a separate file ending in .css, linked with the link tag, and many pages can share it.

Here is how a page links an external file. The link tag goes inside the head. Rel equals stylesheet says what the file is, and href gives its name, style.css. Now change one colour in style.css, and every linked page changes. That is why big websites prefer external CSS.

Pause and predict. If internal CSS makes a paragraph blue, and inline CSS makes it red, what colour wins? Red. The word cascading means rules flow down in an order of priority. Inline style is closest to the element, so it wins. Next comes internal and external CSS, where the rule written later wins. Last comes the browser's own default style.

Sometimes we want to style only some elements. A class selector starts with a dot, and many elements can share one class. An id selector starts with a hash, and an id is used for only one element on a page. Here, class note makes text grey, and id top makes one element bold.

Now the second helper. JavaScript is a scripting language that runs inside the web browser. It can react to events, which are actions like a click or a key press. It can check form entries before they are sent. And it can change the text or style of a page without reloading it.

JavaScript code is written inside the script tag, in the head or the body. The keyword var creates a variable. Here name stores Riya. Document dot write prints text on the page itself. The plus sign joins two pieces of text. So the page shows, Welcome Riya.

JavaScript has three popup boxes, also called dialog boxes. Alert shows a message with an OK button. Confirm asks a question with OK and Cancel, and returns true or false. Prompt asks the user to type a value, and returns that text.

JavaScript makes decisions with if and else. Here marks is forty. One equals sign stores a value, and double equals compares two values. The condition asks, is marks greater than or equal to thirty three? Forty is thirty three or more, so the alert shows Pass. Notice the curly brackets around each block, and the semicolon at the end of each statement.

A function is a named block of code that runs when it is called. Here the function hello shows an alert. The button has an event called onclick. When the user clicks the button, the browser calls hello. This is how pages respond to you.

A very common use is checking a form. The form tag calls this function with onsubmit equals return ok of this. So the form itself arrives as f, and f dot mob dot value is the text typed in the mobile box. If the value double equals an empty string, the box is empty. Then the alert asks for a mobile number, and return false stops the form from being sent. Otherwise return true lets it go. This is called form validation.

Let us revise what we learned today. HTML gives structure, CSS gives style, and JavaScript gives action. A CSS rule has a selector and property value pairs. CSS can be inline, internal or external, and the closest rule wins. JavaScript is written in the script tag and reacts to events like onclick. Alert, confirm and prompt are its three popup boxes.