Scribd
Upload
6 views8 pages

CSS JavaScript

Uploaded by

oniegothatheus
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
Download as docx, pdf, or txt
6 views8 pages

CSS JavaScript

Uploaded by

oniegothatheus
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
Download as docx, pdf, or txt
Download as docx, pdf, or txt
You are on page 1/ 8

Sure! Let’s break down both CSS (Cascading Style Sheets) and JavaScript in detail.

I'll explain CSS first, followed by JavaScript.

---

CSS (Cascading Style Sheets)

CSS is used to style and layout web pages. It controls the appearance of elements in
HTML, from fonts and colors to layout and positioning.

1. CSS Syntax

A CSS rule consists of:

Selector: Selects the HTML element(s) you want to style.

Declaration Block: Contains one or more declarations, each consisting of a property


and a value.

selector {
property: value;
}

Example:

p{
color: blue;
font-size: 16px;
}

This CSS code selects all <p> (paragraph) elements and makes the text color blue and
the font size 16px.

2. CSS Selectors

CSS selectors specify which HTML elements to style. Here are some common types
of selectors:

Type Selector: Targets all elements of a specific type.

h1 { color: red; }

Targets all <h1> tags and makes their text red.

Class Selector: Targets elements with a specific class.

.intro { color: green; }


Targets all elements with the class intro and applies the style.

ID Selector: Targets an element with a specific ID.

#header { background-color: yellow; }

Targets the element with the ID header.

Universal Selector: Targets all elements.

* { margin: 0; padding: 0; }

Descendant Selector: Targets elements that are within another element.

div p { color: gray; }

Targets all <p> elements inside <div> elements.

3. CSS Properties

Here are some common CSS properties:

Text Styling

color: Changes the text color.

p { color: blue; }

font-size: Specifies the size of the text.

h1 { font-size: 24px; }

text-align: Aligns the text within an element.

p { text-align: center; }

Box Model (Margins, Padding, Borders, Width, Height) Every element in HTML is
considered as a rectangular box. The box model consists of:

Margins: Space outside the element.

Borders: Surround the element.

Padding: Space inside the element, between the border and content.

Content: The actual content inside the element.


div {
margin: 20px;
padding: 10px;
border: 2px solid black;
width: 200px;
height: 150px;
}

Backgrounds

background-color: Sets the background color.

body { background-color: lightgray; }

background-image: Adds a background image.

div { background-image: url('image.jpg'); }

Positioning CSS positioning properties allow you to position elements on the web
page:

static: The default position.

relative: Positioned relative to its normal position.

absolute: Positioned relative to its nearest positioned ancestor.

fixed: Positioned relative to the browser window.

Example:

.box {
position: relative;
top: 50px;
left: 100px;
}

Flexbox Layout: Flexbox is a layout mode designed for arranging items in rows or
columns.

display: flex: Defines a flex container.

justify-content: Aligns items along the main axis.

align-items: Aligns items along the cross axis.

Example:
.container {
display: flex;
justify-content: center;
align-items: center;
}

4. Media Queries

Media queries make web pages responsive. They allow you to apply different styles
based on screen size, orientation, or other characteristics.

Example:

@media (max-width: 600px) {


body {
background-color: lightblue;
}
}

This CSS rule changes the background color to light blue when the screen width is
600px or less.

---

JavaScript

JavaScript is a programming language used to create dynamic and interactive web


content. With JavaScript, you can update the content, respond to user actions, and
more.

1. JavaScript Basics

JavaScript is embedded in HTML using the <script> tag. You can either write
JavaScript directly inside the HTML file or link to an external .js file.

Example:

<!DOCTYPE html>
<html lang="en">
<head>
<title>JavaScript Example</title>
<script>
function showMessage() {
alert("Hello, world!");
}
</script>
</head>
<body>
<button onclick="showMessage()">Click me</button>
</body>
</html>

Here, when the button is clicked, it triggers the showMessage() function, which
displays an alert box saying "Hello, world!".

2. Variables and Data Types

Variables store data that can be used later. You define a variable using var, let, or
const.

let name = "John"; // String


let age = 30; // Number
let isStudent = true; // Boolean

3. Functions

Functions are blocks of code that perform specific tasks. You can define a function
using the function keyword.

function greet() {
console.log("Hello!");
}

greet(); // Calls the function and prints "Hello!" to the console.

You can also pass parameters into functions:

function greet(name) {
console.log("Hello, " + name);
}

greet("Alice"); // Prints "Hello, Alice" to the console.

4. DOM Manipulation

The DOM (Document Object Model) represents the HTML structure of the web page.
JavaScript can interact with the DOM to change content, structure, or style
dynamically.

Example:

<!DOCTYPE html>
<html lang="en">
<head>
<title>DOM Manipulation Example</title>
<script>
function changeText() {
document.getElementById("demo").innerHTML = "Text changed!";
}
</script>
</head>
<body>
<p id="demo">This is a paragraph.</p>
<button onclick="changeText()">Change Text</button>
</body>
</html>

In this example, clicking the button changes the text inside the paragraph.

5. Events

JavaScript events are actions or occurrences that happen in the browser, like clicking
a button or pressing a key.

Event Listener: Instead of embedding JavaScript in HTML, you can use


addEventListener() to assign functions to events.

document.getElementById("myButton").addEventListener("click", function() {
alert("Button clicked!");
});

6. Conditional Statements

Conditional statements are used to perform different actions based on different


conditions.

let age = 18;

if (age >= 18) {


console.log("You are an adult.");
} else {
console.log("You are not an adult.");
}

7. Loops

Loops are used to run the same block of code repeatedly.

For Loop:

for (let i = 0; i < 5; i++) {


console.log(i);
}

While Loop:
let i = 0;
while (i < 5) {
console.log(i);
i++;
}

8. Arrays

Arrays are used to store multiple values in a single variable.

let fruits = ["Apple", "Banana", "Orange"];


console.log(fruits[0]); // Prints "Apple"

You can loop through arrays:

for (let i = 0; i < fruits.length; i++) {


console.log(fruits[i]);
}

9. Objects

Objects store collections of key-value pairs.

let person = {
firstName: "John",
lastName: "Doe",
age: 25
};

console.log(person.firstName); // Prints "John"

10. JavaScript in Practice

You can combine CSS and JavaScript to create interactive and dynamic user
experiences. For example, a form validation system that checks if the user has entered
valid data:

<!DOCTYPE html>
<html lang="en">
<head>
<style>
.error { color: red; }
</style>
<script>
function validateForm() {
let name = document.getElementById("name").value;
if (name === "") {
document.getElementById("error").innerHTML = "Name cannot be empty!";
return false;
} else {
document.getElementById("error").innerHTML = "";
return true;
}

You might also like