Step-by-Step Guide: Using HTML and CSS to Create an Eye-Catching Marquee

Have you ever been to a website where text was scrolling over the screen? This is know as a marquee, and it’s a fantastic method to highlight key details or give your website some visual appeal. We’ll walk you through the process of utilizing HTML and CSS to make a beautiful marquee. This tutorial is for developers who want to add flare to their website or web designers who want to expand their skill set!

We must first construct a simple HTML file before we can begin. The primary framework for our marquee text will be contained in this file.

The document type is declared in the first line of the code. <!DOCTYPE html>. The document is identified as an HTML5 document.

The HTML document’s root element is the <html> element. It encloses every other component of the page. The language of the document is indicated by the lang attribute of the <html> element. It is set to “en” for English in this instance.

The <head> element contains metadata about a document, including the page title and character encoding, such as the <title> “Simple Marquee” and two <meta> elements that specify UTF-8 encoding and set the viewport width to match the device.

The <link> element connects an external resource, like a CSS stylesheet named “styles.css”, to the HTML document. The <body> element contains the visible content, including a <div> with a class “marquee” that styles a <span> containing the text “Let’s explore, experiment, and build something amazing together step by step” and an <h3> heading that prompts “Use this to resize me.” After creating the necessary files, the HTML document should be saved with .html extension for proper viewing in a web browser, and the next step involves styling the marquee text with CSS.

Copy Text

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Simple Marquee</title>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width" />
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <div class="marquee">
      <span>Let’s explore, experiment, and build something amazing together step by step!</span>
    </div>
    <h3>Use this to resize me. ↑</h3>
  </body>
</html>

After setting up the basic HTML structure for the marquee, the next step is to style it using CSS. A new CSS file will be created, starting with the import of the Poppins font family from Google Fonts in various weights. The universal selector applies margin and padding of zero to all elements, while the body selector utilizes flexbox properties to center content both horizontally and vertically, sets the box-sizing to boder-box, and applies the Poppins font along with a background color. The height of the container is set to 100% of the viewport, and overflow is hidden to prevent content from spilling out.

Copy Text

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;700&display=swap');

* {
  margin: 0;
  padding: 0;
}

body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
  /*background: hsl(30, 66%, 89%);*/
  background: rgb(49, 242, 249);
  height: 100vh;
  overflow: hidden;
}

.marquee {
  display: flex;
  overflow: hidden;
  white-space: nowrap;
  width: 250px;
  padding: 2px 4px;
  background-color: #f7fc5d;
  resize: horizontal;
  container-type: inline-size;
  color: rgb(245, 7, 7);
  font-size: 20px;
}

h3{
  color: rgb(11, 81, 246);
  font-size: 20px;
}
.marquee > * {
  animation: marquee 5s linear infinite both alternate;
}

@keyframes marquee {
  to {
    transform: translateX(min(100cqw - 100%, 0px));
  }
}