Categories
HTML Web development

HTML style Attribute

HTML style Attribute

The HTML style attribute defines a style for an element (can be used on all HTML elements).

The HTML style attribute overrides any style set globally (for example styles defined in the <style> tag).

Example:

<!DOCTYPE html>
<html>
<body>

<p style="color:#e76f51; text-decoration: underline;">This is a paragraph.</p>
<h4 style="color:#264653; background-color: #e9c46a;">This is a header.</h4>

</body>
</html>

Output:

This is a paragraph.

This is a header.


Read also:

HTML Attributes

HTML List Tags

HTML Media

Categories
HTML Web development

HTML src Attribute

HTML src Attribute

The HTML src attribute defines the location (URL) of the external resource.

The HTML src attribute applies to the following elements:

Examples:

An audio player with the source file:

<!DOCTYPE html>
<html>
<body>

<audio controls>
  <source src="https://lenadesign.org/wp-content/uploads/2021/07/Wooden-Train-Whistle.mp3" type="audio/mpeg">
</audio>

</body>
</html>

Output:


An iframe element embedding another document within the current HTML document:

<!DOCTYPE html>
<html>
<body>

<iframe src="https://www.lenastanley.com/" title="lena design">
</iframe>

</body>
</html>

Output:


An image element:

<!DOCTYPE html>
<html>
<body>

<img src="https://lenadesign.org/wp-content/uploads/2019/12/avatar.jpg" alt="avatar" width="640" height="480">

</body>
</html>

Output:

avatar

The HTML <input type=”image”> defines an image as a submit button:

<!DOCTYPE html>
<html>
<body>

<form action="">
  <label for="fname">First name: </label>
  <input type="text" id="fname" name="fname"><br><br>
  <label for="lname">Last name: </label>
  <input type="text" id="lname" name="lname"><br>
  <input type="image" src="https://lenadesign.org/wp-content/uploads/2021/06/submit-button.png" alt="Submit" width="100" height="100">
</form>

</body>
</html>

Output:





Play a video:

<!DOCTYPE html> 
<html> 
<body> 

<video width="640" controls src="https://videos.files.wordpress.com/lFj3lsG4/valentines-day-movie_dvd.mp4" type="video/mp4">
</video>

</body> 
</html>

Output:

Read also:

HTML Attributes

HTML Media

HTML Form Elements

Categories
HTML Web development

HTML caption tag

HTML caption tag

The HTML caption element specifies a table caption.

The HTML <caption> tag has to be inserted immediately after the <table> tag.

To align and place caption you can use CSS caption-side property or CSS text-align property.

Example:

<!DOCTYPE html>
<html>
<head>
<style>   
table, th, td {
        border-collapse: collapse;
        border: 1px solid black;
    }

</style>
</head>
<body>
<table>
<caption>List of employees:</caption>
  <tr>
    <th>Name</th>
    <th>Job Title</th>
    <th>e-mail</th>
  </tr>
  <tr>
    <td>Adam White</td>
    <td>IT Coordinator</td>
    <td>white@example.com</td>
  </tr>
  <tr>
    <td>Tom Brown</td>
    <td>Web Developer</td>
    <td>brown@example.com</td>
  </tr>
  <tr>
    <td>Matt Smith</td>
    <td>Network Administrator</td>
    <td>matt@example.com</td>
  </tr>
</table>
</body>
</html>

Output:

List of employees:
Name Job Title e-mail
Adam White IT Coordinator white@example.com
Tom Brown Web Developer brown@example.com
Matt Smith Network Administrator matt@example.com

Enjoy coding!

Read also:

HTML Table

HTML Table Headers

CSS border-collapse Property

Categories
HTML Web development

HTML Table Headers

HTML Table Headers

Table headers are specified with <th> tag (each th element represents a table cell).

Demo:

Name Surname Occupation
John Doe Web Developer
Martha Brown Teacher
Matt Smith Plumber
Name Occupation
John Doe Web Developer
Martha Brown Teacher
Matt Smith Plumber
Customer details
Name Surname e-mail
Joe Doe joedoe@example.com
Martha Brown brown221@example.com

The HTML table can have headers for each column/row.

Example:

<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
}
</style>
</head>
<body>

<table style="width:100%">
  <tr>
    <th>Name</th>
    <th>Surname</th>
    <th>Occupation</th>
  </tr>
  <tr>
    <td>John</td>
    <td>Doe</td>
    <td>Web Developer</td>
  </tr>
  <tr>
    <td>Matt</td>
    <td>Smith</td>
    <td>Plumber</td>
  </tr>
 <tr>
    <td>Martha</td>
    <td>Brown</td>
    <td>Teacher</td>
  </tr>
</table>

</body>
</html>

Output:

Name Surname Occupation
John Doe Web Developer
Martha Brown Teacher
Matt Smith Plumber

You can create a header that spans over two columns (or more).

Example1:

<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
}
</style>
</head>
<body>

<table style="width:100%">
  <tr>
    <th colspan="2">Name</th>
    <th>Occupation</th>
  </tr>
  <tr>
    <td>John</td>
    <td>Doe</td>
    <td>Web Developer</td>
  </tr>
  <tr>
    <td>Martha</td>
    <td>Brown</td>
    <td>Teacher</td>
  </tr>
   <tr>
    <td>Matt</td>
    <td>Smith</td>
    <td>Plumber</td>
  </tr>
</table>
</body>
</html>

Output:

Name Occupation
John Doe Web Developer
Martha Brown Teacher
Matt Smith Plumber

Example2:

<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
}

th {
text-align: center;}

</style>
</head>
<body>

<table style="width:100%">
  <tr>
    <th colspan="3">Customer details</th>
  </tr>
   <tr>
    <th>Name</th>
    <th>Surname</th>
    <th>e-mail</th>
  </tr>
  <tr>
    <td>Joe</td>
    <td>Doe</td>
    <td>joedoe@example.com</td>
  </tr>
  <tr>
    <td>Martha</td>
    <td>Brown</td>
    <td>brown221@example.com</td>
  </tr>
</table>
</body>
</html>

Output:

Customer details
Name Surname e-mail
Joe Doe joedoe@example.com
Martha Brown brown221@example.com

Enjoy coding!

Read also:

HTML Table

CSS border-collapse Property

CSS border-spacing Property

Categories
HTML Web development

HTML draggable Attribute

HTML draggable Attribute

The HTML draggable attribute defines whether an element is draggable or not.

The HTML draggable attribute can be used on all HTML elements.

Example:

<!DOCTYPE HTML>
<html>
<head>
<style>
#dropzone {
  width: 300px;
  height: 100px;
  padding: 10px;
  border: 1px solid #333;
}
</style>
<script>
function allowDrop(event) {
  event.preventDefault();
}

function drag(event) {
  event.dataTransfer.setData("Text", event.target.id);
}

function drop(event) {
  var data = event.dataTransfer.getData("Text");
  event.target.appendChild(document.getElementById(data));
  event.preventDefault();
}
</script>
</head>
<body>

<div id="dropzone" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br>
<p id="draggable-element" draggable="true" ondragstart="drag(event)">Drag this paragraph into the rectangle.</p>

</body>
</html>

Output:


Drag this paragraph into the rectangle.


Enjoy coding!

Read also:

HTML Attributes

HTML JavaScript

HTML tags

Categories
HTML Web development

HTML dir Attribute

HTML dir Attribute

The HTML dir attribute defines the text direction of the element’s content.

Syntax:

<element dir="ltr|rtl|auto"> 

ltr (default) – left-to-right text direction.

rtl – right-to-left text direction.

auto – the browser decides the text direction based on the content (only recommended if the text direction is unknown).

Example:

<!doctype html>
<html>
<body>
    <p dir="rtl">This is a paragraph.</p>
</body>
</html>

Output:

This is a paragraph.



Enjoy coding!

Read also:

HTML Attributes

HTML Basics

HTML Media

Categories
HTML Web development

HTML data-* Attribute

HTML data-* Attribute

The HTML data-* attribute allows embedding custom data attributes on all HTML elements.

The HTML data-* attribute contains two parts:

  • the attribute name (should not contain any uppercase letters, and must be at least one character long after the prefix “data-“).
  • the attribute value (can be any string).

Example:

<!DOCTYPE html>
<html>
<head>
<script>
function showDetails(food) {
  var foodType = food.getAttribute("data-food-type");
  alert("The " + food.innerHTML + " is a " + foodType + " food.");
}
</script>
</head>
<body>

<ul>
  <li onclick="showDetails(this)" id="thai" data-food-type="mexican">Taco</li>
  <li onclick="showDetails(this)" id="european" data-food-type="spanish">Paella</li>  
  <li onclick="showDetails(this)" id="middle-eastern" data-food-type="middle-eastern">Kibbeh</li>  
</ul>

</body>
</html>

Output:

Click on the name of the meal to see what kind of cuisine is from:

  • Taco
  • Paella
  • Kibbeh

Enjoy coding!

Read also:

HTML Attributes

HTML class Attribute

HTML contenteditable Attribute

Categories
HTML Web development

How to add custom fonts to HTML?

How to add custom fonts to HTML?

You can add custom fonts to HTML using the CSS @import rule (google fonts) or by the CSS @font-face rule.

CSS @import Rule

The CSS @import rule allows you to import a style sheet into another style sheet.

The CSS @import rule should be placed at the top of the document (after any @charset declaration).

Example:

Import custom font to your HTML document (used font source: https://fonts.google.com/):

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS @import Rule</title>
    <style>
 @import url('https://fonts.googleapis.com/css2?family=Dancing+Script&display=swap');

        p {
  font-family: 'Dancing Script', cursive;
  font-size:100px;
}
    </style>
</head>

<body>
    <p>Some text...</p>
</body>
</html>

Output:

CSS @import Rule

Some text…

CSS @font-face Rule

The CSS @font-face rule allows web designers to use custom fonts.

The custom font can be loaded from a locally-installed font on the user’s computer or a remote server.

To add the custom font to the website using the @font-face rule:

  1. Find the custom font that you like to add and download it (preferably files .ttf, .woff, or .woff2)
  2. Upload font files on your website (you can upload the custom font by plug like Custom Fonts (for WordPress) or use Dropbox and add your fonts to the Public Folder)
  3. Add your custom font files into CSS using the @font-face rule (look out below).

Note: different browsers supports different font formats. To see which browser supports which format click here.

Example:

<!DOCTYPE html>
<html>
<head>
<style> 
@font-face {
  font-family: amatic;
  src: url(https://lenadesign.org/wp-content/uploads/2021/11/AmaticSC-Regular.ttf);
}

p {
  font-family: amatic;
  font-size:50px;
}
</style>
</head>
<body>

<p>With the CSS @face-font rule, you can use custom fonts on the website.</p>

</body>
</html>

Output:

With the CSS @face-font rule, you can use custom fonts on the website.

Enjoy coding!

Read also:

CSS Fonts

HTML Text Formatting And Styles

CSS Styling Links

Categories
CSS HTML Web development

CSS Christmas Tree Animation

CSS Christmas Tree Animation

To learn how to create the CSS Christmas Tree Animation follow the steps below and watch the video tutorial.

Demo:

*to see the CSS Christmas Tree Animation on the website click here.

Step1.

Add HTML

<div id="christmas-tree" class="christmas-tree">
  <div class="tree">
    <div class="tree-details"></div>
  </div>
  <div class="lights">
    <div class="row-one"></div>
    <div class="row-two"></div>
  </div>
  <div class="balls"></div>
  <div class="star"></div>
  <div class="shadow"></div>
</div>

Step2.

Add CSS

Set the colour and the position of the background and elements:

body {
  display: flex;
  height: 100vh;
  align-items: center;
  justify-content: center;
  background-color: #16323d;
}

.christmas-tree {
  position: relative;
  top:100px;
  cursor: pointer;
}

Style the Christmas Tree:

.tree {
  position: absolute;
  width: 20px;
  border-right: 5px solid transparent;
  border-left: 5px solid transparent;
  border-bottom: 55px solid #823723;
  height:0;
  animation: drop 1s linear;
}

.tree:before {
  content:"";
  position: absolute;
  background-color: #823723;
  border-radius: 50%;
  width: 30px;
  height:10px;
  top:50px;
  left:-5px;
}

.tree:after {
  content:"";
  position: absolute;
  border-right: 75px solid transparent;
  border-left: 75px solid transparent;
  border-bottom: 200px solid #107261;
  width:0;
  height:0;
  top:-180px;
  left:-65px;
}

.tree-details {
  position: absolute;
  width: 150px;
  height: 10px;
  background-color: #107261;
  border-radius: 50%;
  top:15px;
  left:-65px;
  z-index:1;
}

.tree-details:before {
  content:"";
  position: absolute;
  background-color: #0a897c;
  border-radius:50%;
  width: 5px;
  height: 5px;
  top:-10px;
  left:20px;
  box-shadow: 50px -50px #0a897c, 30px -70px #0a897c, 40px -130px #0a897c, 70px -5px #0a897c, 85px -75px #0a897c;
}

Style and animate the Christmas Lights:

.lights {
  position: absolute;
  opacity:0;
  animation: light 2s linear infinite, drop 1s linear .5s forwards;
}

@keyframes light {
  0% {filter: drop-shadow(0 0 2px #fefae0) brightness(1);}
  50% {filter: drop-shadow(0 0 5px #fefae0) brightness(1.35);}
  100% {filter: drop-shadow(0 0 2px #fefae0) brightness(1);}
}

.row-one {
  position: absolute;
  background-color: #e9d8a6;
  border-radius:50%;
  width:10px;
  height:10px;
  top: -120px;
  left: -15px;
  box-shadow: 10px 10px #e9d8a6, 25px 15px #e9d8a6, 40px 18px #e9d8a6, 54px 15px #e9d8a6;
}

.row-two {
  position: absolute;
  background-color: #e9d8a6;
  border-radius:50%;
  width:10px;
  height:10px;
  left:-42px;
  top:-45px;
  box-shadow: 10px 10px #e9d8a6, 25px 17px #e9d8a6, 40px 24px #e9d8a6, 55px 28px #e9d8a6, 70px 30px #e9d8a6, 85px 29px #e9d8a6, 100px 25px #e9d8a6, 112px 20px #e9d8a6;
}

Add some Christmas balls:

.balls {
  position: absolute;
  background-color: #f34653;
  width:15px;
  height: 15px;
  border-radius:50%;
  z-index:2;
  opacity:0;
  box-shadow: -20px -55px #f34653, 25px -70px #f34653;
  animation: drop 1s linear 1s forwards;
}

.balls:before {
  content:"";
  position: absolute;
  background-color: #f34653;
  width:13px;
  height: 13px;
  border-radius:50%;
  left:-40px;
  top:-10px;
  box-shadow: 100px 10px #f34653, 25px -80px #f34653, 60px -120px #f34653;
}

.balls:after {
  content:"";
  position: absolute;
  background-color: #94d2bd;
  width:10px;
  height: 10px;
  border-radius:50%;
  top:-40px;
  left:40px;
  box-shadow: -35px -35px #94d2bd, -35px -105px #94d2bd, -60px 45px #94d2bd;
}

Add the star on the top:

.star {
  position: absolute;
  display: block;
  width: 0px;
  height: 0px;
  border-right: 25px solid transparent;
  border-bottom: 17.5px solid #f9c819;
  border-left: 25px solid transparent;
  transform: rotate(-35deg);
  top:-190px;
  left:-9px;
  opacity:0;
  animation: dropStar 1s linear 1.5s forwards;
    }

.star:before {
      border-bottom: 20px solid #f9c819;
      border-left: 7.5px solid transparent;
      border-right: 7.5px solid transparent;
      position: absolute;
      height: 0;
      width: 0;
      top: -12.5px;
      left: -17.5px;
      display: block;
      content: '';
      transform: rotate(-35deg);
    }

.star:after {
      position: absolute;
      display: block;
      top: 0.75px;
      left: -26.25px;
      width: 0px;
      height: 0px;
      border-right: 25px solid transparent;
      border-bottom: 17.5px solid #f9c819;
      border-left: 25px solid transparent;
      transform: rotate(-70deg);
      content: '';
    }
   

And the shadow:

.shadow {
  position: absolute;
  border-radius: 50%;
  background-color: rgba(0,0,0,0.7);
  width: 50px;
  height: 20px;
  z-index:-1;
  top:50px;
  left:-10px;
  animation: scale .5s linear forwards;
}

@keyframes scale {
  0% {transform: scaleX(1);}
  100% {transform: scaleX(3);}
}

Animate the Christmas Tree and decorations:

@keyframes drop {
  0% {transform: translateY(-470px) scaleY(0.9); opacity: 0;}
  5% {opacity: 1;}
  50% {transform: translateY(0px) scaleY(1); opacity: 1;}
  65% {transform: translateY(-15px) scaleY(0.9); opacity: 1;}
  75% {transform: translateY(-18px) scaleY(0.9); opacity: 1;}
  100% {transform: translateY(0px) scaleY(1); opacity: 1;}
}

   @keyframes dropStar {
  0% {transform: translateY(-470px) scaleY(0.9) rotate(-35deg); opacity: 0;}
  5% {opacity: 1;}
  50% {transform: translateY(0px) scaleY(1) rotate(-35deg); opacity: 1;}
  65% {transform: translateY(-15px) scaleY(0.9) rotate(-35deg); opacity: 1;}
  75% {transform: translateY(-18px) scaleY(0.9) rotate(-35deg); opacity: 1;}
  100% {transform: translateY(0px) scaleY(1) rotate(-35deg); opacity: 1;}
  100% {transform: translateY(0px) scaleY(1) rotate(-35deg); opacity: 1;}
}

Step3.

Add jQuery (optional)

To repeat the animation on click add jQuery:

To read how to add the jQuery code to HTML click here.

$(document).ready(function(){
  $('#christmas-tree').mouseleave(function(){
    $(this).removeClass('clicked');
  }).click(function(){
    $(this).addClass('clicked').html($(this).html());
  });
});

Watch also the video tutorial:

Hey, here’s something that might interest you:

CSS Christmas Tree

CSS Christmas Card

CSS Winter window scene

Categories
CSS HTML Web development

How to align the text to the left and text to the right in the same line?

How to align the text to the left and text to the right in the same line?

To align the text that some of it aligns to the left and some of it aligns to the right within the same line check the options below:

Option1.

Align the text in HTML using the CSS text-align property and CSS float property.

Add the text to the code:

<!DOCTYPE html>
<html>
<body>

<p style="text-align:left;">
    This text is on the left side.
<span style="float:right;">This text is on the right side.</span>
    </p>

</body>
</html>

Output:

This text is on the left side. This text is on the right side.

Option2

Align the text using HTML and CSS

<!DOCTYPE html>
<html>
    <head>
        <style>
            .right{
    float:right;
}

.left{
    float:left;
}
        </style>
    </head>
<body>

<span class="right">This text is on the right side.</span><span class="left">This text is on the left side.</span>

</body>
</html>

Output:

This text is on the right side.This text is on the left side.

Option3

Create the single row table and add the right float on the second cell:

<!DOCTYPE html>
<html>
    <head>
        <style>
.alignRight {
    float: right;
}
        </style>
    </head>
<body>

<table style="width: 100%;">
  <tr><td>This text is on the left side.</td>
  <td class="alignRight">This text is on the right side.</td></tr>
</table>

</body>
</html>

Output:

This text is on the left side. This text is on the right side.

Enjoy coding!

Read also:

CSS Float Tutorial

CSS Styling Links

CSS Shadows