Wednesday, August 18, 2021

CSS Syntax

 

CSS Syntax

A CSS rule set contains a selector and a declaration block.


Selector: Selector indicates the HTML element you want to style. It could be any tag like <h1>, <title> etc.

Declaration Block: The declaration block can contain one or more declarations separated by a semicolon. For the above example, there are two declarations:

  1. color: yellow;
  2. font-size: 11 px;
  3. Property: A Property is a type of attribute of HTML element. It could be color, border etc.

    Value: Values are assigned to CSS properties. In the above example, value "yellow" is assigned to color property.

  4. Selec


    tor{Property1: value1; Property2: value2; ..........;}  

What is CSS

 

What is CSS



CSS stands for Cascading Style Sheets. It is a style sheet language which is used to describe the look and formatting of a document written in markup language. It provides an additional feature to HTML. It is generally used with HTML to change the style of web pages and user interfaces. It can also be used with any kind of XML documents including plain XML, SVG and XUL.

CSS is used along with HTML and JavaScript in most websites to create user interfaces for web applications and user interfaces for many mobile applications.


What does CSS do

  • You can add new looks to your old HTML documents.
  • You can completely change the look of your website with only a few changes in CSS code.

Why use CSS

These are the three major benefits of CSS:

1) Solves a big problem

Before CSS, tags like font, color, background style, element alignments, border and size had to be repeated on every web page. This was a very long process. For example: If you are developing a large website where fonts and color information are added on every single page, it will be become a long and expensive process. CSS was created to solve this problem. It was a W3C recommendation.

2) Saves a lot of time

CSS style definitions are saved in external CSS files so it is possible to change the entire website by changing just one file.

3) Provide more attributes

CSS provides more detailed attributes than plain HTML to define the look and feel of the website.



Introduction to css

 

CSS Tutorial

CSS tutorial

CSS tutorial or CSS 3 tutorial provides basic and advanced concepts of CSS technology. Our CSS tutorial is developed for beginners and professionals. The major points of CSS are given below:

  • CSS stands for Cascading Style Sheet.
  • CSS is used to design HTML tags.
  • CSS is a widely used language on the web.
  • HTML, CSS and JavaScript are used for web designing. It helps the web designers to apply style on HTML tags.

CSS Example with CSS Editor

In this tutorial, you will get a lot of CSS examples, you can edit and run these examples with our online CSS editor tool.

<!DOCTYPE>  
<html>  
<head>  
<style>  
h1{  
color:white;  
background-color:red;  
padding:5px;  
}  
p{  
color:blue;  
}  
</style>  
</head>  
<body>  
<h1>Write Your First CSS Example</h1>  
<p>This is Paragraph.</p>  
</body>  
</html>  







Tuesday, August 17, 2021

JavaScript Comment


 

JavaScript Comment




The JavaScript comment is ignored by the JavaScript engine i.e. embedded in the browser.The JavaScript comments are meaningful way to deliver message. It is used to add information about the code, warnings or suggestions so that end user can easily interpret the code.

Advantages of JavaScript comments

There are mainly two advantages of JavaScript comments.

  1. To make code easy to understand It can be used to elaborate the code so that end user can easily understand the code.
  2. To avoid the unnecessary code It can also be used to avoid the code being executed. Sometimes, we add the code to perform some action. But after sometime, there may be need to disable the code. In such case, it is better to use comments.

Types of JavaScript Comments

There are two types of comments in JavaScript.

  1. Single-line Comment
  2. Multi-line Comment

JavaScript Single line Comment

It is represented by double forward slashes (//). It can be used before and after the statement.

Let’s see the example of single-line comment i.e. added before the statement.

<script>  
// It is single line comment  
document.write("hello javascript");  
</script> 

Let’s see the example of single-line comment i.e. added after the statement.

<script>  
var a=10;  
var b=20;  
var c=a+b;//It adds values of a and b variable  
document.write(c);//prints sum of 10 and 20  
</script>  

JavaScript Multi line Comment

It can be used to add single as well as multi line comments. So, it is more convenient.

It is represented by forward slash with asterisk then asterisk with forward slash. For example:

  1. /* your code here  */

It can be used before, after and middle of the statement.

<script>  
/* It is multi line comment.  
It will not be displayed */  
document.write("example of javascript multiline comment");  
</script>  







External JavaScript file

 

External JavaScript file

We can create external JavaScript file and embed it in many html page.

It provides code re usability because single JavaScript file can be used in several html pages.

An external JavaScript file must be saved by .js extension. It is recommended to embed all JavaScript files into a single file. It increases the speed of the webpage.

Let's create an external JavaScript file that prints Hello Javatpoint in a alert dialog box.

message.js

function msg(){  
 alert("Hello Javatpoint");  
}  

Let's include the JavaScript file into html page. It calls the JavaScript function on button click.

index.html

<html>  
<head>  
<script type="text/javascript" src="message.js"></script>  
</head>  
<body>  
<p>Welcome to JavaScript</p>  
<form>  
<input type="button" value="click" onclick="msg()"/>  
</form>  
</body>  
</html>  

Advantages of External JavaScript

There will be following benefits if a user creates an external javascript:

  1. It helps in the reusability of code in more than one HTML file.
  2. It allows easy code readability.
  3. It is time-efficient as web browsers cache the external js files, which further reduces the page loading time.
  4. It enables both web designers and coders to work with html and js files parallelly and separately, i.e., without facing any code conflictions.
  5. The length of the code reduces as only we need to specify the location of the js file.

Disadvantages of External JavaScript

There are the following disadvantages of external files:

  1. The stealer may download the coder's code using the url of the js file.
  2. If two js files are dependent on one another, then a failure in one file may affect the execution of the other dependent file.
  3. The web browser needs to make an additional http request to get the js code.
  4. A tiny to a large change in the js code may cause unexpected results in all its dependent files.
  5. We need to check each file that depends on the commonly created external javascript file.
  6. If it is a few lines of code, then better to implement the internal javascript code.







JavaScript Example

 

Javascript example is easy to code. JavaScript provides 3 places to put the JavaScript code: within body tag, within head tag and external JavaScript file.

Let’s create the first JavaScript example.

<script type="text/javascript">  
document.write("JavaScript is a simple language for javatpoint learners");  
</script>
  

The script tag specifies that we are using JavaScript.

The text/javascript is the content type that provides information to the browser about the data.

The document.write() function is used to display dynamic content through JavaScript. We will learn about document object in detail later.

3 Places to put JavaScript code

  1. Between the body tag of html
  2. Between the head tag of html
  3. In .js file (external javaScript)

1) JavaScript Example : code between the body tag

In the above example, we have displayed the dynamic content using JavaScript. Let’s see the simple example of JavaScript that displays alert dialog box.



2) JavaScript Example : code between the head tag

Let’s see the same example of displaying alert dialog box of JavaScript that is contained inside the head tag.

In this example, we are creating a function msg(). To create function in JavaScript, you need to write function with function_name as given below.

To call function, you need to work on event. Here we are using onclick event to call msg() function.

<html>  
<head>  
<script type="text/javascript">  
function msg(){  
 alert("Hello Javatpoint");  
}  
</script>  
</head>  
<body>  
<p>Welcome to JavaScript</p>  
<form>  
<input type="button" value="click" onclick="msg()"/>  
</form>  
</body>  
</html>