Coding With Sami

  • Home
  • About us
  • Drop Down
    • Minimal
    • Sub Menu with Subs
      • Feminist
      • Persona
      • Expose
    • Powergame
    • Fashion
  • Restaurant
  • Mega menu
  • Download

Java Script Introduction:-

In this, we will learn what JavaScript can do.


Java Script Can Change HTML Content:-

One of many Javascript HTML methods is getElementById( ).

The below example "find" an element (with id="demo") and changes the element content (innerHTML) to "Hello JavaScript" :




<!DOCTYPE html>

<html>

<body>

<h1> What JavaScript Can Do?</h1>

<p id="demo"> JavaScript can change HTML content.</p>

<button type="button" onclick="document.getElementById("demo").innerHTML = Hello JavaScript !" '> Click Me!</button>

</body>

</html>

Try this code for a better experience 



JavaScript accepts both single and double quotes:



<!DOCTYPE html>

<html>

<body>

<h1> What JavaScript Can Do?</h1>

<p id="demo"> JavaScript can change HTML content.</p>

<button type="button" onclick='document.getElementById('demo').innerHTML = Hello JavaScript !' "> Click Me!</button>

</body>

</html>

Try this code for a better experience 



JavaScript Can Change HTML Attribute Values:-

In this, we will see how JavaScript changes the value of the src (source) attribute of a <img> tag.



<!DOCTYPE html>

<html>

<body>

<h1>What JavaScript Can Do?</h1>

<p> JavaScript can change the HTML attribute values.</p>

<button onclick=" document.getElementById( 'myImage' ).src=' !--here use any bulbon png--! pic_bulbon.gif ' "> Turn on the light </button>

<img id="myImage" src="pic_bulboff.gif" style="width:100px">

<button onclick=" document.getElementById( 'myImage' ).src=' !--here use any bulboff png--! pic_bulbon.gif ' "> Turn off the light </button>

</body>

</html>

Try this code for a better experience 



JavaScript Can Change The HTML Style(CSS):-

Changing the style of an HTML element is a variety of changing the HTML attribute:



<!DOCTYPE html>

<html>

<body>

<h1> What JavaScript Can Do?</h1>

<p id="demo"> JavaScript can change the style of an HTML element. </p>

<button type="button" onclick=" document.getElementById( 'demo' ).style.fonsize='35px' " Click Me! </button>

</body>

</html>

Try this code for a better experience 

Changing the style of an HTML element is a variety of changing the HTML attribute:



<!DOCTYPE html>

<html>

<body>

<h1> What JavaScript Can Do?</h1>

<p id="demo"> JavaScript can change the style of an HTML element. </p>

<button type="button" onclick=" document.getElementById( 'demo' ).style.fonsize='35px' " Click Me! </button>

</body>

</html>

Try this code for a better experience 

CSS Outline Offset:-

We use the CSS outline offset property adding space between an outline and the edge /border of an element. The space we will give between an outline and its element will be transparent.

The following example specifies an outline 10px outside the border edge:



<!DOCTYPE html>

<html>

<head>

<style>

p {margin: 30px;

border: 2px solid black;

outline: 2px solid red;

outline-offset: 10px;

}

</style>

</head>

<body>

<h1> CSS Outline Offset Property </h1>

<p> The paragraph that you are seeing has 10px outside the border edge.</p>

</body>

</html>

Try this code for a better experience 



The following example shows the transparency space between its outline and element:



<!DOCTYPE html>

<html>

<head>

<style>

p {margin: 30px;

background: yellow;

border: 2px solid black;

outline: 2px solid red;

outline-offset: 10px;

}

</style>

</head>

<body>

<h1> CSS Outline Offset Property </h1>

<p> The paragraph that you are seeing has 10px outside the border edge.</p> 

</body>

</html>

Try this code for a better experience 

CSS outline shorthand:-

CSS Outline Shorthand Property:-

If you want to use the following individual outline property then you have to use the CSS outline shorthand property:

  • outline width
  • outline color
  • outline style (required)

We can specify one, two, or three values from the above list for the CSS online property. The order of the outline value does not matter we can use anyone.

In the following example, we will show some outlines specified with the help of the CSS shorthand property :



<!DOCTYPE html>

<html>

<head>

<style>

p.exp1 {outline: dashed;}

p.exp2 {outline: dotted red;}

p.exp3 {outline: 4px solid green;}

p.exp4 {outline: thick ridge pink;}

</style>

</head>

<body>

<h1> CSS Outline Property </h1>

<p class="exp1"> A dashed outline </p>

<p class="exp2"> A dotted red outline </p>

<p class="exp3"> A 4px solid gree outline </p>

<p class="exp4"> A thick ridge pink outline </p>

</body>

</html>

Try this code for a better experience 

CSS Outline Color:-

The CSS outline color property specifies the color of the outline of an element:

The CSS outline color property can  be as:

  • name - from the name property you can specify the name of the outline like "red".
  • HEX - from the hex property you can specify the name of the outline like "ff0000" 
  • RGB - from the rgb property you can specify the name of the outline like "rgb(255, 0, 0)".
  • HSL - from the hsl property you can specify the name of the outline like "hsl(0, 100%, 50%)".
  • invert - perform the color inversion (which ensures that the outline of the element is visible, regardless of the color background)



<!DOCTYPE html>

<html>

<head>

<style>

p. exp1{border: 2px solid black;

outline-style: solid;

outline-color: red;

}

p. exp2{border: 2px solid black;

outline-style: dotted;

outline-color: blue;

}

p. exp3{border: 2px solid black;

outline-style: outset;

outline-color: gray;

}

</style>

</head>

<body>

<h1> CSS Outline Color Property </h1>

<p> Outline color property is to used to set the color of the outline </p>

<p class="exp1">A solid red outline. </p>

<p class="exp2">A dotted blue outline. </p>

<p class="exp3">A outset gray outline. </p>

</body>

</html>

Try this code for a better experience 



HEX value:-

Using hex value you can set the outline color of the element.



<!DOCTYPE html>

<html>

<head>

<style>

p. exp1{border: 2px solid black;

outline-style: solid;

outline-color: #ff0000; /*red*/

}

p. exp2{border: 2px solid black;

outline-style: dotted;

outline-color: #0000ff; /*blue*/

}

p. exp3{border: 2px solid black;

outline-style: outset;

outline-color: #bbbbbb; /*gray*/

}

</style>

</head>

<body>

<h1> CSS Outline Color Property </h1>

<p> Outline color property is used to set the color of the outline you can set your element value using hex value. </p>

<p class="exp1">A solid red outline. </p>

<p class="exp2">A dotted blue outline. </p>

<p class="exp3">A outset gray outline. </p>

</body>

</html>

Try this code for a better experience 



RGB value:-

You can set your element outline using rgb value.



<!DOCTYPE html>

<html>

<head>

<style>

p. exp1{border: 2px solid black;

outline-style: solid;

outline-color: rgb(255, 0, 0); /*red*/

}

p. exp2{border: 2px solid black;

outline-style: dotted;

outline-color: rgb(0, 0, 255); /*blue*/

}

p. exp3{border: 2px solid black;

outline-style: outset;

outline-color: rgb(187, 187, 187); /*gray*/

}

</style>

</head>

<body>

<h1> CSS Outline Color Property </h1>

<p> Outline color property is used to set the color of the outline you can set your element outline using the rgb value. </p>

<p class="exp1">A solid red outline. </p>

<p class="exp2">A dotted blue outline. </p>

<p class="exp3">A outset gray outline. </p>

</body>

</html>

Try this code for a better experience 



HSL value:-

You can set your HTML element outline using hsl value.



<!DOCTYPE html>

<html>

<head>

<style>

p. exp1{border: 2px solid black;

outline-style: solid;

outline-color: hsl(0, 100%, 50%); /*red*/

}

p. exp2{border: 2px solid black;

outline-style: dotted;

outline-color: hsl(240, 100%, 50%); /*blue*/

}

p. exp3{border: 2px solid black;

outline-style: outset;

outline-color: hsl(0, 0%, 73%); /*gray*/

}

</style>

</head>

<body>

<h1> CSS Outline Color Property </h1>

<p> Outline color property is used to set the color of the outline you can set your element outline using the hsl value. </p>

<p class="exp1">A solid red outline. </p>

<p class="exp2">A dotted blue outline. </p>

<p class="exp3">A outset gray outline. </p>

</body>

</html>

Try this code for a better experience 

CSS Outline Width:-

The outline width property specifies the width of the outline of the element and can be the value one of the below:

  • thin(thin outline can be typically 1px)
  • medium(medium outline can be typically 3px)
  • thick(thick outline can be typically 5px)
  • specific size(specific size can be px, pt, cm, em etc)

The following example shows the difference between thin, thick, medium, and specific-size outlines.



<!DOCTYPE html>

<html>

<head>

<style>

p. exp1{

border: 1px solid black;

outline-style: solid;

outline-color: red;

outline-width: thin;

}

p. exp2{

border: 1px solid black;

outline-style: solid;

outline-color: red;

outline-width: medium;

}

p. exp3{

border: 1px solid black;

outline-style: solid;

outline-color: red;

outline-width: thick;

}

p. exp4{

border: 1px solid black;

outline-style: solid;

outline-color: red;

outline-width: 5px;

}

</style>

</head>

<body>

<h1> The Outline-Width Property </h1>

<p class="exp1">This outline is thin outline </p>

<p class="exp2">This outline is medium outline </p>

<p class="exp3">This outline is thick outline </p>

<p class="exp4">This is specific size outline outline </p>

</body>

</html>

Try this code for a better experience 

CSS Outline:-

The outline is a line that draws outside the border of the element.



<!DOCTYPE html>

<html>

<head>

<style>

p {border: 2px solid black;

padding: 20px;

margin: auto;

outline: #4CAF50 solid 10px;

text-align: center;

}

</style>

</head>

<body>

<h1> CSS Outline </h1>

<p> This element has a 2px solid black border and a green outline with a width of 10px, </p>

</body>

</html>

Try this code for a better experience 



CSS Outline:-

The outline is a line that is drawn outside the border around the element to make the element stand out.

In CSS there are many outline properties which are given below:

  • outline - style
  • outline-color
  • outline - width
  • outline - offset
  • outline

NOTE:- Outline is different from the border, not the border, an outline drowns outside the element of the border, and maybe the outline overlaps the other content. And also the outline not is part of the dimensions of the elements, the element's total height, and width will not affect the width of the outline. 

CSS Outline Style:-

The outline style property basically presents the style of the outline. The outline style property can be one of the below:

  • dotted - The dotted property defines the dotted outline.
  • dashed - The dashed property defines the dashed outline.
  • solid - The solid property defines the solid outline.
  • double - The double property defines the double outline.
  • groove - The groove property defines the 3D groove outline.
  • ridge - The ridge property defines the 3D ridge outline.
  • inset - The inset property defines the 3D inset outline.
  • outset - The outset property defines the 3D outset outline.
  • none - The none property defines the no outline.
  • hidden - The hidden property defines the hidden outline.

The given example shows the different outline style values:



<!DOCTYPE html>

<html>

<head>

<style>

p.dotted {outline-style: dotted;}

p.dashed {outline-style: dashed;}

p.solid {outline-style: solid;}

p.double {outline-style: double;}

p.groove {outline-style: groove;}

p.ridge {outline-style: ridge;}

p.inset {outline-style: inset;}

p.outset {outline-style: outset;}

</style>

</head>

<body>

<h1> CSS Outline Style Properties </h1>

<p class="dotted"> This is a dotted outline.</p>

<p class="dashed"> This is a dashed outline.</p>

<p class="solid"> This is a solid outline.</p>

<p class="double"> This is a double outline.</p>

<p class="groove"> This is a groove outline. The effect depends on the outline color value.</p>

<p class="ridge"> This is a ridge outline. The effect depends on the outline color value.</p>

<p class="inset"> This is a inset outline. The effect depends on the outline color value.</p>

<p class="outset"> This is a outset outline. The effect depends on the outline color value.</p>

</body>

</html>

Try this code for a better experience 

CSS Box Model:-

All the HTML elements can be considered as a box. 

The CSS Box Model:-

The term box model is used in CSS when we talk about design and web website layout.

The CSS box model is a term that wraps around all the HTML elements. It contains borders, margins, padding, and the actual content.

The explanation of the different parts:

  • Content - Content is the place where all the data are shown to us on the website like images, text and etc.
  • Padding - Padding is placed around the content that shows us transparent.
  • Margin - Margin is the place around the border that shows us transparent.
  • Border - A border covers the text around the padding and margin.

The box model allows us to add a border around the HTML element, and define space as your desire between the HTML element.



<!DOCTYPE html>

<html>

<head>

<style>

div {border-color: lightgrey;

width: 300px;

border: 10px solid red;

padding: 50px;

margin: 20px;

}

</style>

</head>

<body>

<h1> Demonstrating The Box Model</h1>

<p> CSS box model is a model that wraps around an HTML element. It consists of the border, padding, margin, and the actual content of the HTML.</p>

<div>This is the actual content of the box in which we set the border color of light grey, set the width of 300px, set the border of 10px solid red, set the padding of 50px, and also set the margin of 20px. </div>

</body>

</html>

Try this code for a better experience 



Width and Height of an Element:-

The width and height of the element should be correct in order in the browser. First, you have to need about the box model and how it works.

NOTE:- When you are setting the height and width of an HTML element using CSS, you just set the height and width of the content area of the HTML, first calculate the full size of the element that you want to set the width and height, you must add padding, margin and the border of the content.



<!DOCTYPE html>

<html>

<head>

<style>

div {border: 5px solid green;

width: 320px;

padding: 10px;

margin: 0;

} 

</style>

</head>

<body>

<h1> Calculate The Total width</h1>

<img scr="/* here paste your any image address from your browser*/"  width="350" height="263" >

<div> The above picture has 350px widths and the total width of this element is also 350px.</div>

</body>

</html>

Try this code for a better experience 



Here is the calculation of the total width:

320px (width)
+ 20px (left padding + right padding)
+ 10px (left border + right border)
+ 0px (left margin + right margin)
= 350px

The total width of the element calculated should be like this:

Width of the total element = width + left padding + right padding + left border + right border + left margin + right margin

The total height of the element calculated should be like this:

Height of the total element = height + top padding + bottom padding + top border + bottom border + top margin + bottom margin

Older Posts Home
Copyright © 2015 Coding With Sami

Created By ThemeXpose | Distributed By Gooyaabi Templates