Styling and Scripting
Just look at the following Heading. It is h5 - plain, simple and boring!
Enhancing Visual Appeal
HTML5 elements on their own, despite the availability of great functionalities, may not very impressive visually.
Thanks to, CSS - Cascading Style Sheet - and JavaScript, they can be made aesthetically appealing.
Enhancing Visual Appeal
Before -< h5 > Enhancing Visual Appeal </h5>
After - < h5 style="background:blue;color:White;border-radius:5px;padding:10px;text-align:center;">Enhancing Visual Appeal </h5>
The change that came about is the work of CSS; It is as follows:
style="background:blue;color:White;border-radius:5px;padding:10px;text-align:center;"
Every single HTML5 element can be subjected to visual changes using CSS. Sometimes, you can even make changes interactively. Move the mouse over the frog: it will do what it is good at - leaping!
This is how the above is achieved. The styling component is both internal and inline.
< img src="../images/frog.gif" class="img-fluid frg " alt="frog" >
<style type="text/css">
.frg
{
display:block;position:relative;-webkit-transition:left 100s ease-in;-moz-transition:left 100s ease-in;-o-transition:left 100s ease-in;transition:left 100s ease-in;
}
.frg:hover{left:400px;}
</style>
In addition to styling, scripting can be used to offer interactivity to the users. We use the most popular scripting language at present for it - JavaScript.
Please, have a look at this:
HTML:
Interactivity:
<script type="text/javascript">
function clk() {
var x = document.getElementById('nme').value;
document.getElementById('nme').value = "Welcome! " + x;
}
</script>
Styling:
style="text-align:center;background:purple;color:White;font-weight:bold;"
Celsius to Fahrenheit Calculator
Enter the Celsius value into the text box and click the button. The value in Fahrenheit will appear in the same text box.
The HTML code and that of JavaScript are as follows:
<form >
Celsius: <input type="number" id="Number1" class="text-center" >
<input type="button" value="Get Fahrenheit" onClick="celfah()" >
</form>
<script type="text/javascript">
function celfah() {
var x = document.getElementById('celsius').value;
var y = x * (9 / 5) + 32;
document.getElementById('celsius').value = y + " F";
}
</script>
Moon in Orbit
The following is achieved by pure CSS.
See the Pen xGGExJ by VivaxSolutions (@VivaxSolutions) on CodePen.
Next
Previous