How to Make a Scrolling Marquee in HTML

Using CSS

1. How to Make a Scrolling Marquee in HTML Picture 1
   If you're on a Mac, download the latest version of webkit.^{[1] X Research source} Since the CSS module that can create marquees is a part of the webkit specification, you will need to get webkit installed on your machine.
2. How to Make a Scrolling Marquee in HTML Picture 2
   If you're using Windows, download the developer toolset. Unlike on Mac, there is no self-extracting installer for Windows. Windows users will need to install a number of developer tools to use webkit. All necessary tools and specifications can be downloaded here
3. How to Make a Scrolling Marquee in HTML Picture 3
   Add a CSS reference to your HTML file. Open your HTML file and reference your CSS style sheet with the following code:
   .

   1. You can write the CSS reference before creating the CSS file, but you must be sure that the CSS filename matches the one in your code (in this example, 'mystyle.css").
   2. Your HTML and CSS code will remain separate, but run together when you load your HTML file.^{[2] X Research source}
4. How to Make a Scrolling Marquee in HTML Picture 4
   Create a 'div' line in your HTML file. Your code might look something like:
   .

   Scrolling text goes here.

   1. div is an HTML element that defines the area on the page that will contain components of the code, in this case your scrolling marquee.
5. How to Make a Scrolling Marquee in HTML Picture 5
   Save your HTML file. 'Go to File > Save As…' Append your HTML file with a .html extension.
6. How to Make a Scrolling Marquee in HTML Picture 6
   Open a separate text document for your CSS style sheet. The shorthand syntax for creating a scrolling marquee with CSS is : '-webkit-marquee: [direction] [increment] [repetition] [style] [speed]'. The webkit tag is necessary because the CSS module that contains the marquee class is part of the Webkit CSS specification.^{[3] X Research source}

   1. [direction] will define which direct the marquee scrolls
   2. [increment] measures the pixel distance between each step of the scroll
   3. [repetition] is the number of times the marquee will run
   4. [style] can determine a simple scroll or bouncing text
   5. [speed] is how fast the text moves.
7. How to Make a Scrolling Marquee in HTML Picture 7
   Set values to define the marquee. Set the values in the brackets (remove the brackets, since they are just a placeholder). This will tell your marquee how to act on the page. Your code might look like:
   .-webkit-marquee: auto medium infinite scroll normal;

   1. The 'auto' direction uses the default right-to-left, 'medium' sets a default interval of 6 pixels, 'infinite' sets the marquee to run an unlimited number of times, 'scroll' sets the style to a linear movement, and 'normal' is a default setting for scrolling speed.
8. How to Make a Scrolling Marquee in HTML Picture 8
   Set an 'overflow' on a new line. Add .overflow-x: -webkit-marquee; to a new line in your code. This will make the text scroll continuously along instead of stopping at the edge of the div.^{[4] X Research source}

   1. 'overflow-x' specifies what to do with text that exceeds the limit of the space on the x-axis.
   2. '-webkit-marquee' is directing the overflow command towards the marquee module in webkit.
   3. Your full code might look like:
      .-webkit-marquee: auto medium infinite scroll normal;
      overflow-x: -webkit-marquee;
9. How to Make a Scrolling Marquee in HTML Picture 9
   Save your CSS file. 'Go to File > Save As…' Append your CSS file with a .css extension.
10. How to Make a Scrolling Marquee in HTML Picture 10
    Open your HTML file with your browser. Drag and drop the file to your browser to open. Your scrolling marquee will display on the page.

    1. Use a webkit supported browser, like Chrome or Safari to make sure the marquee displays as expected.