Scribd
Upload
9 views

Notes-2

The document provides an overview of CSS and JavaScript, highlighting CSS's role in defining the visual presentation of web content and JavaScript's capabilities as an object-based language for managing data. It explains CSS properties, syntax, and the differences between internal and external styles, while also discussing JavaScript basics, including variable declaration, functions, and interactivity. The document emphasizes the importance of both technologies in creating dynamic and visually appealing web pages.

Uploaded by

hsn
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
9 views

Notes-2

The document provides an overview of CSS and JavaScript, highlighting CSS's role in defining the visual presentation of web content and JavaScript's capabilities as an object-based language for managing data. It explains CSS properties, syntax, and the differences between internal and external styles, while also discussing JavaScript basics, including variable declaration, functions, and interactivity. The document emphasizes the importance of both technologies in creating dynamic and visually appealing web pages.

Uploaded by

hsn
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 4

CSS (Cascading Style Sheets)

CSS is the technology responsible for defining the visual presentation of a website's HTML content. It
allows developers to control the layout, design, and presentation of web pages. CSS is fundamental for
separating content (HTML) from style (CSS), which brings many benefits like easier maintenance and
faster page rendering. Here's a breakdown of what CSS does:

- Layout: CSS controls the position of elements on a page (e.g., using properties like `display`, `position`,
`margin`, `padding`).

- Colors and Visual Design: CSS allows you to define background colors, text colors, and even gradient
backgrounds (using properties like `color`, `background-color`).

- Fonts: With properties like `font-family` and `font-size`, CSS gives you complete control over the
typography of your page.

- Media Queries: CSS can be used to adapt the layout to different screen sizes using media queries,
ensuring that a site looks good on devices from desktop computers to mobile phones.

- Cross-media styling: CSS allows styling for different media types (screen, print, etc.), so it adapts
accordingly. For instance, you can define print-specific styles that hide navigation bars or adjust layout.

JavaScript as an Object-Based Language


JavaScript is considered an object-based language due to its ability to use objects to organize and
manage data. Objects in JavaScript are collections of properties and methods, where properties are
values associated with the object, and methods are functions that perform actions on those properties.

JavaScript's object system is not as complex as other object-oriented languages like Java or C++, but it
does allow for:

- Object Creation: JavaScript allows you to define objects using literal notation or the `new Object()`
syntax.

- Inheritance: JavaScript supports inheritance through prototypes, which allows objects to share
properties and methods.

- Encapsulation: You can create private and public data within objects by using closures.

Though JavaScript doesn't strictly follow object-oriented principles like classes and inheritance (though
classes were introduced in ECMAScript 6), it still provides a mechanism to work with objects effectively.

Internal and External CSS


- Internal CSS is defined within a `<style>` element in the `<head>` section of an HTML document. This
style only applies to the page where it's included. It's useful for quick styles that are only needed for a
single page and doesn't require an external file.
- External CSS is a separate CSS file (with a `.css` extension) that is linked to one or more HTML
documents using the `<link>` tag. The main benefit of external CSS is that it allows a single stylesheet to
be used across multiple pages, making it easier to maintain the look and feel of the website by editing
just one file.

CSS Syntax and Properties


CSS syntax is simple. The basic structure is a selector (the HTML element or class/id you want to style),
followed by a declaration block enclosed in curly braces. Each declaration consists of a property and a
value, separated by a colon, and multiple declarations are separated by semicolons.

For example:

```css

h1 {

font-size: 24px;

color: blue;

```

Some essential CSS properties you mentioned:

- `color`: Defines the color of the text inside an element.

- `font-family`: Specifies the font to be used for text in an element.

- `font-size`: Controls the size of the font.

- `border`: Defines the border around an element (width, style, and color).

- `background-color`: Sets the background color of an element.

- `margin` and `padding`: `margin` is used to control the space outside an element’s border, while
`padding` controls the space inside the element, between the content and the border.

JavaScript Basics
- Client-Side Execution: JavaScript runs directly in the user's browser, meaning that it doesn't need a
round-trip to the server for execution. This makes it fast and responsive.

- Accessing HTML Elements: JavaScript uses methods like `document.getElementById(id)` to access


HTML elements and manipulate them dynamically.
- Output: `document.write()` is a method that outputs text or HTML directly into the webpage. However,
this method is less commonly used today because it can overwrite the entire page if called after the
page has loaded.

Variables and Constants in JavaScript

- `var` is used to declare variables in JavaScript. However, it has some scope issues and can lead to
unexpected behavior, so modern JavaScript prefers `let` (block-scoped) and `const` (for constants).

- `const` is used for values that should not be reassigned after their initial value is set. This ensures that
the variable's value is constant throughout the execution of the program.

JavaScript Comparison Operators

- `=` is the assignment operator, used to assign a value to a variable.

- `!==` is the strict inequality operator, used to check if two values are not equal in both type and value.
This is more reliable than `!=`, which can perform type coercion.

Strings and Arrays in JavaScript

- Strings in JavaScript are enclosed in either single or double quotes. Example: `'Hello World'` or `"Hello
World"`.

- Arrays are collections of values, and the values are separated by commas. Example: `let fruits = ['apple',
'banana', 'cherry'];`.

Scope of Variables

- Local vs. Global Variables: A local variable takes precedence over a global variable if both have the
same name. Local variables are confined to the function or block where they're declared, while global
variables are accessible throughout the entire script.

Padding and Margin in CSS

- Padding defines the space inside the element's border, around its content. It can be set uniformly for
all sides, or individually for each side (`padding-top`, `padding-right`, etc.).

- Margin is the space outside the element's border. It’s useful for controlling the spacing between
elements.

- Negative values are not allowed for `padding`, but they are allowed for `margin` in CSS.

JavaScript Functions and Methods

- Functions in JavaScript are blocks of code designed to perform a particular task. You call functions by
their name, passing arguments if necessary. Example:

```javascript
function greet(name) {

console.log('Hello ' + name);

greet('Alice'); // Output: Hello Alice

```

Opacity in CSS

- The `opacity` property controls the transparency of an element. A value of `1` means fully opaque,
while `0` means fully transparent. You can use this to create various visual effects, such as fading in or
out elements.

JavaScript for Interactivity

- Dynamic Pages: JavaScript is primarily used for making web pages dynamic. It can respond to user
events (clicks, keypresses, etc.), modify the HTML structure (DOM manipulation), validate forms, and
much more.

CSS for Styling

- `background-color` in CSS: The syntax for changing the background color of elements is as follows:

```css

p{

background-color: yellow;

```

This would change the background color of all `<p>` (paragraph) elements to yellow.

JavaScript Interactivity

JavaScript was originally designed for client-side scripting, meaning it runs in the user's browser. This
allows developers to create interactive web pages without needing to constantly communicate with the
server.

You might also like