Scribd
Upload
7 views42 pages

SOW - Session #3 - CSS & JS

The document outlines a session on CSS and JavaScript, covering topics such as CSS syntax, selectors, and the Document Object Model (DOM). It explains how to apply CSS styles and introduces JavaScript as a programming language for web development, including its usage for events and dynamic content. The session concludes with upcoming topics and assignments related to CSS Flex and JavaScript.

Uploaded by

ferdaousse2004
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
7 views42 pages

SOW - Session #3 - CSS & JS

The document outlines a session on CSS and JavaScript, covering topics such as CSS syntax, selectors, and the Document Object Model (DOM). It explains how to apply CSS styles and introduces JavaScript as a programming language for web development, including its usage for events and dynamic content. The session concludes with upcoming topics and assignments related to CSS Flex and JavaScript.

Uploaded by

ferdaousse2004
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

SOW

Session #3
CSS - JS

04/11/2023
Merhba
Outline
I. CSS - Continuation
II. DOM
III. JS - Intro
01. CSS
CSS

- CSS stands for Cascading Style Sheets

- Used for styling and UI customization

- CSS allows you to create rules that specify how the content of an element should appear.
CSS - Syntax
CSS Syntax

Link
CSS - Selectors
CSS Selectors
Element Selector

- selects HTML elements based on the element tag name.

<p>Hello World</p>
<section>Hello from the other side </section>
<p>Hello It’s me</p>
p {
text-align: center;
<p>Hello World</p> color: red;
<section>Hello from the other side </section> }
<p>Hello It’s me</p>
CSS Selectors
Id Selector
- Select the HTML element that has the specified Id
- Id is unique within the page

<p id=”hello_text”>Hello World</p>


<section>Hello from the other side </section>
<p>Hello It’s me</p>
#hello_text {
text-align: center;
<p id=”hello_text”>Hello World</p> color: red;
<section>Hello from the other side </section>
<p>Hello It’s me</p>
}
CSS Selectors
Class Selector
- Select the HTML elements with a specific class.

<p>Hello World</p>
<section class=”centered”>Hello from the other side
</section>
<p class=”centered”>Hello, It’s me</p>
.centered {
text-align: center;
<p>Hello World</p> color: red;
<section class=”centered”>Hello from the other side
</section> }
<p class=”centered”>Hello, It’s me</p>
CSS Selectors
Tag.Class Selector
- Select specific HTML elements with a specific class.

<p>Hello World</p>
<section class=”centered”>Hello from the other side
</section>
<p class=”centered”>Hello, It’s me</p>
section.centered {
text-align: center;
<p>Hello World</p> color: red;
<section class=”centered”>Hello from the other side
</section> }
<p class=”centered”>Hello, It’s me</p>
CSS Selectors
Universal Selector
- Select All HTML elements within a page.

<p>Hello World</p>
<section class=”centered”>Hello from the other side
</section>
<p class=”centered”>Hello, It’s me</p>
* {
text-align: center;
<p>Hello World</p> color: red;
<section class=”centered”>Hello from the other side
</section> }
<p class=”centered”>Hello, It’s me</p>
CSS Selectors
Grouping Selector
- Select All HTML elements within a page with specific tag names.

<p>Hello World</p>
<section class=”centered”>Hello from the other side
</section>
<p class=”centered”>Hello, It’s me</p>
<h6>Hello, How are you ?</h6>
p, h6 {
<p>Hello World</p>
text-align: center;
<section class=”centered”>Hello from the other side color: red;
</section> }
<p class=”centered”>Hello, It’s me</p>
<h6>Hello, How are you ?</h6>
Previous Selectors are
named Simple Selectors
CSS Selectors
Descendant
- Select specific HTML elements inside a specified parent

<div>
<p>I’m inside div</p>
<section><p>I’m inside section, inside div.</p></section>
<h6>Inside div, but not p tag</h6>
</div>
<p>I’m outside div</p>
div p{
<div> text-align: center;
<p>I’m inside div</p>
<section><p>I’m inside section, inside div.</p></section> color: red;
<h6>Inside div, but not p tag</h6> }
</div>
<p>I’m outside div</p>
CSS Selectors
Child Selectors
- Selects all elements that are the children of a specified element.
- First Level Descendant
<div>
<p>I’m inside div</p>
<section><p>I’m inside section, inside div.</p></section>
<h6>Inside div, but not p tag</h6>
</div>
<p>I’m outside div</p>
div > p{
<div> text-align: center;
<p>I’m inside div</p>
<section><p>I’m inside section, inside div.</p></section> color: red;
<h6>Inside div, but not p tag</h6> }
</div>
<p>I’m outside div</p>
CSS Selectors
Sibling Selectors
- Selects all elements that are the Siblings of a specified element.

<div>
<p>I’m inside div</p>
<section><p>I’m inside section, inside div.</p></section>
<h6>Inside div, but not p tag</h6>
</div>
<p>I’m outside div</p>
div ~ p{
<div> text-align: center;
<p>I’m inside div</p>
<section><p>I’m inside section, inside div.</p></section> color: red;
<h6>Inside div, but not p tag</h6> }
</div>
<p>I’m outside div</p>
CSS - Where To
CSS Where To
- You can apply CSS in 3 ways :

- Inline style

- Inside style tag

- Using a separate css file ( recommended )


CSS Where To
- Inline Style is applied using the style attribute.

<div>
<p>I’m inside div</p>
<section><p>I’m inside section, inside div.</p></section>
<h6>Inside div, but not p tag</h6>
</div>
<p>I’m outside div</p>

<div>
<p style='text-align:center;color:red'>I’m inside div</p>
<section><p>I’m inside section, inside div.</p></section>
<h6>Inside div, but not p tag</h6>
</div>
<p>I’m outside div</p>
CSS Where To
- Inside <style> </style> Tag

<p>Hello World</p>
<section>Hello from the other side </section>
<p>Hello It’s me</p>
<head>
<style>
p {
text-align: center;
color: red;
}
</style>
</head>
CSS Where To
- Using separate css file

<p>Hello World</p>
<section>Hello from the other side </section>
<p>Hello It’s me</p>
<head>
<link src='./style.css' />
</head>
//style.css
p {
text-align: center;
color: red;
}
02. DOM
DOM

- DOM stands for Document Object Model

- When an HTML document is loaded into a web browser, it becomes a document object.

- The document object is the root node of the HTML document.


DOM

<html>
<head>
<title>My title</title>
</head>
<body>
<h1>A heading</h1>
<a href='#'>Link text</a>
</body>
</html>
DOM
- Before making changes on an element programmatically, we need to find it first

- An Element can be found by : <html>


<head>
- Tag Name =p <title>My title</title>
</head>
- Id = head1
<body>
<h1 id=’head1’>A heading</h1>
- ClassName = cls1 <a class=’cls1’ href='#'>Link
text</a>
<p>Hakuna Matata</p>
- Css Selector = a.cls1 <p class=’cls1’>The only limit
is your imagination</p>
</body>
</html>
DOM

//DOM Manipulation functions

var head1 = document.getElementById(‘head1’); //returns single element


var elementsCLS1 = document.getElementsByClassName(‘cls1’); //returns collection
var paragraphElements = document.getElementsByTagName(‘p’); //returns collection
var paragraphsWithCls1 = document.querySelectorAll("p.intro"); //returns collection
03. JS
JS

- JavaScript is a scripting or programming language that allows you to implement complex

features on web pages

- It enables you to create dynamically updating content, control multimedia, animate images.

- It is also used for event handling.


JS
JS - Where To
JS Where To
- You can put your JS in 2 ways :

- Inside script tag

- Using the attribute src of the script tag


JS Where To
- Script Tag : inside head
<html>
<html>
<head>
<head>
<title>My title</title> <title>My title</title>
<script> </head>
function myFunction() { <body>
document.getElementById("head1").innerHTML = "A <h1 id="head1"
changes Heading 1";} onclick='myfunction()'>A
</script> heading</h1>
</head> <a class=’cls1’ href='#'>Link
<body> text</a>
<h1 id="head1" onclick='myfunction()'>A <p>Hakuna Matata</p>
heading</h1> </body>
...
</html>
</body>
</html>
JS Where To
- Script Tag : inside body

<html>
<head> <html>
<title>My title</title> <head>
</head> <title>My title</title>
<body> </head>
<h1 id="head1" onclick='myfunction()'>A <body>
heading</h1> <h1 id="head1"
... onclick='myfunction()'>A
<script> heading</h1>
function myFunction() { <a class=’cls1’ href='#'>Link
document.getElementById("head1").innerHTML = "A text</a>
changes Heading 1";}
<p>Hakuna Matata</p>
</script>
</body>
</body>
</html> </html>
JS Where To
- Using the attribute src of the script tag
<head>
<script src="./script.js" /> <html>
</head> <head>
<body> <title>My title</title>
... </head>
<body>
<script src="./script.js" />
<h1 id="head1"
</body>
onclick='myfunction()'>A
heading</h1>
// script.js <a class=’cls1’ href='#'>Link
function myFunction() { text</a>
document.getElementById("head1").innerHTML = "A <p>Hakuna Matata</p>
changes Heading 1"; </body>
} </html>
JS - Events
JS Events
- HTML events are actions that happen to HTML elements. ( Firing, Triggering )

- JavaScript can "react" on these events ( Handling ).

- When the event happens the handler get executed


<body>
<h1 onclick='myfunction()'>A heading</h1>
<a class=’cls1’ href='#'>Link text</a>
<p>Hakuna Matata</p>
</body>
Event : is the click event Handler : myfunction()
JS Events
- Upon clicking the heading, its text will change to “A changed Heading 1”

<body>
<h1 onclick='myfunction()'>A heading</h1>
<a class=’cls1’ href='#'>Link text</a>
<p>Hakuna Matata</p>
</body>
Event : is the click event Handler : myfunction()

// script.js
function myFunction() {
document.getElementById("head1").innerHTML = "A
changed Heading 1";
}
JS Events
NEXT
- CSS - Flex
- Js in Depth
- Assignment #1 Try to send it before 18/11
- Assignment #2 (JS) - 18/11
Thanks

You might also like