Scribd
Upload
1 views7 pages

1.2.5 - HTML With CSS and Javascript

The document provides an overview of HTML, CSS, and JavaScript, focusing on how to style HTML documents using CSS through inline, internal, and external methods. It explains the use of JavaScript for creating dynamic web pages and demonstrates how to incorporate JavaScript code within HTML. Additionally, it includes references for further learning on these topics.

Uploaded by

Abdulhafiz Abdulsalam
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
1 views7 pages

1.2.5 - HTML With CSS and Javascript

The document provides an overview of HTML, CSS, and JavaScript, focusing on how to style HTML documents using CSS through inline, internal, and external methods. It explains the use of JavaScript for creating dynamic web pages and demonstrates how to incorporate JavaScript code within HTML. Additionally, it includes references for further learning on these topics.

Uploaded by

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

HTML with CSS and Javascript

Side Hustle Internship


CSS - Cascading Style Sheet
Cascading Style Sheets (CSS) is a stylesheet language used to describe the
presentation of a document written in HTML(MDN). According to w3.org It is a
simple mechanism for adding style (e.g., fonts, colors, spacing) to Web
documents.

We can add css to html documents in 3 ways which are -

● Inline - We can achieve this by using the style attribute in the html
element.
● Internal - We can do this by declaring a style tag in the head section of the
html document.
● External - This achieved by linking an external css file with the link tag.

2
Inline CSS
We can style an element by using the style attribute on it, For
example if we are to style a h1 element to be red in color the html
code goes as follows

<h1 style=”color:red;”>A red header tag</h1>

This form of styling can also be applied to other html elements and
not just the heading tags.

3
Internal CSS
Internal css requires us to declare our style tag inside the head tag. We can then define
the element we want to style by including the styling properties in curly braces.

<!DOCTYPE html>
<html>
<head>
<style>
body {background-color: blue;} //sets background color of page to blue
h1 {color: red;} //set color of h1 tag to red
</style>
</head>
<body>
<h1>This is a heading</h1>
</body>
</html>

4
Javascript
JavaScript was invented by Brendan Eich , It is a powerful scripting
programming language for the web which gives us the ability to
create dynamic and interactive web pages. To use javascript code in
html we can do it two ways

● By writing our Javascript Code inside the script tag


● Linking our external javascript file with the script tag

<script type="text/javascript"src="path/to/jsfile.js"></script>

5
Javascript in HTML
Below is a snippet of a javascript code inside our html document. It’s okay if the
contents of the document are not clear, this is just to get us acquainted with how html
and javascript work.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1>This is a heading</h1>
<script type="text/javascript">
console.log(“Hello world!, Welcome to javascript”)
alert("This is an alert action");
</script>
</body>
</html>

6
References
● https://developer.mozilla.org/en-US/docs/Learn/JavaScript/First_st
eps
● https://www.w3schools.com/tags/tag_script.asp
● https://www.w3schools.com/js/default.asp

You might also like