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