Home - ITS UP 2 U - Information

HTML and CSS styles format

Mark E.

HTML and CSS are two separate languages that are used together to create web pages. HTML is used to define the structure and content of the web page, while CSS is used to control the presentation and styling of the web page. Here's an example of how you can use CSS to format HTML elements:

HTML:

<!DOCTYPE html>
<html>
<head>
	<title>My Web Page</title>
	<link rel="stylesheet" href="/styles.css">
</head>
<body>
	<h1>Welcome to My Web Page</h1>
	<p>This is some sample text.</p>
	<ul>
		<li>List item 1</li>
		<li>List item 2</li>
		<li>List item 3</li>
	</ul>
</body>
</html>

CSS:

/* styles.css */

body {
	font-family: Arial, sans-serif;
}

h1 {
	color: #ff0000;
	font-size: 36px;
}

p {
	font-size: 18px;
	line-height: 1.5;
}

ul {
	list-style: none;
	padding: 0;
	margin: 0;
}

li {
	padding: 10px;
	background-color: #eaeaea;
	margin-bottom: 10px;
}

In this example, the CSS code is saved in a separate file named styles.css and linked to the HTML file using the <link> tag in the <head> section of the HTML document. The CSS styles are defined using selectors that target specific HTML elements. For example, the body selector applies styles to the entire web page, while the h1 selector targets only the <h1> heading element.

The CSS properties are used to define the specific styles for each targeted element. For example, the color property is used to set the text color of the <h1> element to red (#ff0000), while the font-size property is used to set the font size to 36 pixels.

Overall, the CSS styles help to create a visually appealing and easy-to-read web page by controlling the presentation and layout of the HTML content.

CSS styles examples

Mark E.

/* Set the font family and size for the entire page */
body {
  font-family: Arial, sans-serif;
  font-size: 16px;
}

/* Style links */
a {
  color: #007bff; /* Set the link color to blue */
  text-decoration: none; /* Remove the underline from links */
}

/* Style buttons */
button {
  background-color: #007bff; /* Set the background color to blue */
  color: #fff; /* Set the text color to white */
  padding: 10px 20px; /* Add some padding */
  border: none; /* Remove the border */
  border-radius: 4px; /* Add some rounded corners */
  cursor: pointer; /* Change the cursor to a pointer on hover */
}

/* Style headings */
h1, h2, h3 {
  font-weight: bold; /* Set the font weight to bold */
  margin-bottom: 20px; /* Add some spacing below the heading */
}

/* Style images */
img {
  max-width: 100%; /* Make sure images don't exceed their container */
  height: auto; /* Prevent images from stretching vertically */
}

/* Style forms */
input[type="text"], textarea {
  border: 1px solid #ccc; /* Add a border */
  padding: 10px; /* Add some padding */
  border-radius: 4px; /* Add some rounded corners */
}

input[type="submit"] {
  background-color: #007bff; /* Set the background color to blue */
  color: #fff; /* Set the text color to white */
  padding: 10px 20px; /* Add some padding */
  border: none; /* Remove the border */
  border-radius: 4px; /* Add some rounded corners */
  cursor: pointer; /* Change the cursor to a pointer on hover */
}

These styles set the font family and size for the entire page, style links and buttons with a blue color and some padding and rounded corners, style headings with bold text and some margin, style images so they don't exceed their container, and style forms with borders, padding, and rounded corners. You can customize these styles to fit your design.

JavaScript code that creates an image that follows the cursor

Mark E.

<!DOCTYPE html>
<html>
  <head>
    <title>Image Following Cursor</title>
    <style>
      img {
        position: absolute;
      }
    </style>
  </head>
  <body>
    <img src="https://via.placeholder.com/100x100" id="follower" />
    <script>
      var follower = document.getElementById("follower");
      document.addEventListener("mousemove", function (e) {
        var x = e.clientX;
        var y = e.clientY;
        follower.style.left = x + "px";
        follower.style.top = y + "px";
      });
    </script>
  </body>
</html>

This code adds an event listener to the document object for the mousemove event. When the mouse moves, the clientX and clientY properties of the event object are used to set the left and top styles of the image, respectively. The position: absolute; style for the image ensures that it can be positioned anywhere on the page.

You can replace the src attribute of the img tag with the URL of any image you want to use as the follower image.

JavaScript code to create an image trail effect with your mouse

Mark E.

// Set the image source URL
var imageSrc = "path/to/image.png";

// Set the size of the image
var imageSize = 50;

// Create an array to store the images
var images = [];

// Create a function to initialize the images
function init() {
  // Loop through the number of images
  for (var i = 0; i < 10; i++) {
    // Create a new image element
    var img = document.createElement("img");
    // Set the image source
    img.src = imageSrc;
    // Set the image size
    img.style.width = imageSize + "px";
    img.style.height = imageSize + "px";
    // Set the image position to absolute
    img.style.position = "absolute";
    // Add the image to the array
    images.push(img);
    // Add the image to the document
    document.body.appendChild(img);
  }
}

// Create a function to update the images
function update() {
  // Get the mouse position
  var x = event.clientX;
  var y = event.clientY;
  // Loop through the images
  for (var i = images.length - 1; i >= 1; i--) {
    // Set the position of the current image to the position of the previous image
    images[i].style.left = images[i-1].style.left;
    images[i].style.top = images[i-1].style.top;
  }
  // Set the position of the first image to the mouse position
  images[0].style.left = x - imageSize/2 + "px";
  images[0].style.top = y - imageSize/2 + "px";
}

// Call the init function to create the images
init();

// Add an event listener to update the images on mouse move
document.addEventListener("mousemove", update);

This code creates an array of images that follow the mouse cursor, creating an image trail effect. The init() function creates the images and adds them to the document, and the update() function updates the position of each image on mouse move. The imageSrc and imageSize variables can be changed to use a different image or change the size of the image, respectively.