In this step-by-step guide, we will show you how to create a stunning marquee using HTML and CSS. Learn the basics of HTML and CSS, styling the marquee, and advanced techniques for creating a professional-looking design.
Table of Contents
Have you ever visited a website and noticed text scrolling across the screen? That's called a marquee, and it's a great way to draw attention to important information or add some visual interest to your website. In this step-by-step guide, we'll show you how to create a stunning marquee using HTML and CSS. Whether you're a web designer looking to add some new skills to your toolbox or a developer looking to add some flair to your website, this tutorial is for you!
Let's start making a stunning marquee using HTML, and CSS step by step.
Join My Telegram Channel to Download the Project: Click Here
Prerequisites:
Before starting this tutorial, you should have a basic understanding of HTML, and CSS. Additionally, you will need a code editor such as Visual Studio Code or Sublime Text to write and save your code.
Source Code
Step 1 (HTML Code):
To get started, we will first need to create a basic HTML file. In this file, we will include the main structure for our marquee text.
The first line of the code, <!DOCTYPE html>, declares the document type. It specifies that the document is an HTML5 document.
The <html> element is the root element of the HTML document. It encloses all other elements of the page.
The lang attribute of the <html> element indicates the language of the document. In this case, it is set to "en" for English.
The <head> element is used to contain metadata about the document, such as the page title and character encoding. In this example, it includes a <title> element that sets the title of the web page to "CSS Marquee", and two <meta> elements. The first <meta> element specifies the character encoding of the document to be UTF-8, which is a commonly used character encoding for internationalization. The second <meta> element sets the width of the viewport to match the width of the device being used to view the page.
The <link> element is used to link an external resource, such as a CSS stylesheet, to the HTML document. In this example, it links to a stylesheet named "styles.css".
The <body> element contains the visible content of the web page. It encloses two other elements, a <div> element and an <h3> element.
The <div> element has a class attribute of "marquee". This is used to apply specific styles to this element using the CSS stylesheet linked earlier. Inside the <div> element, there is a <span> element that contains the text "Browse beautifully designed front-end components.".
The <h3> element is a heading element that contains the text "Resize me using this ↑". It is used to provide some interactive functionality to the web page.
After creating the files just paste the following below codes into your file. Make sure to save your HTML document with a .html extension, so that it can be properly viewed in a web browser.
This is the basic structure of our marquee text using HTML, and now we can move on to styling it using CSS.
Step 2 (CSS Code):
Once the basic HTML structure of the marquee is in place, the next step is to add styling to the marquee using CSS.
Next, we will create our CSS file. In this file, we will use some basic CSS rules to create our marquee effect.
The first line of the code imports an external font from the Google Fonts service. It imports the Poppins font family in three different weights (400, 500, and 700) and specifies that it should be used when displaying text in the web page.
The * selector applies the following styles to all elements on the page: margin: 0; sets the margin to zero, padding: 0; sets the padding to zero.
The body selector applies the following styles to the body element: display: flex; sets the display property to flex, flex-direction: column; sets the direction of the flex container to be a column, align-items: center; centers the content horizontally within the container, justify-content: center; centers the content vertically within the container, box-sizing: border-box; sets the box-sizing property to border-box, font-family: 'Poppins', sans-serif; sets the font family to Poppins, a sans-serif font, background: hsl(30, 66%, 89%); sets the background color to a light yellowish-green hue, height: 100vh; sets the height of the container to be 100% of the viewport height, overflow: hidden; hides any content that overflows the container.
The .marquee selector applies the following styles to elements with the class marquee: display: flex; sets the display property to flex, overflow: hidden; hides any content that overflows the container, white-space: nowrap; prevents any line breaks within the container, width: 200px; sets the width of the container to be 200 pixels, padding: 2px 4px; adds padding to the container, background-color: #FCF45D; sets the background color to a light yellow hue, resize: horizontal; allows the user to resize the container horizontally, container-type: inline-size; specifies the type of container to be an inline-size container.
The .marquee > * selector applies the following styles to all direct children of elements with the class marquee: animation: marquee 5s linear infinite both alternate; applies an animation named marquee to the element, with a duration of 5 seconds, a linear timing function, infinite repetitions, and alternate direction.
The @keyframes rule defines an animation called marquee. The to selector specifies the final state of the animation, which is to translate the element along the x-axis to a distance of min(100cqw - 100%, 0px) where cqw is a unit of length that represents one quarter of the width of the viewport.
This will give our marquee text an upgraded presentation. Create a CSS file with the name of styles.css and paste the given codes into your CSS file. Remember that you must create a file with the .css extension.
@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%);
height: 100vh;
overflow: hidden;
}
.marquee {
display: flex;
overflow: hidden;
white-space: nowrap;
width: 200px;
padding: 2px 4px;
background-color: #FCF45D;
resize: horizontal;
container-type: inline-size;
}
.marquee > * {
animation: marquee 5s linear infinite both alternate;
}
@keyframes marquee {
to {
transform: translateX(min(100cqw - 100%, 0px));
}
} Final Output:
Conclusion:
Congratulations, you've just learned how to create a stunning marquee using HTML and CSS! By following the steps outlined in this tutorial, you now have the skills to create a scrolling text or image that will make your website stand out. Remember to experiment and customize the code to create your own unique designs. With some creativity and practice, you can create marquee designs that will wow your visitors and add some visual interest to your websites. If you want to learn more about web design, HTML, and CSS, there are many resources available online that can help you continue your learning journey. Thank you for reading, and happy coding!
That’s a wrap!
I hope you enjoyed this post. Now, with these examples, you can create your own amazing page.
Did you like it? Let me know in the comments below 🔥 and you can support me by buying me a coffee.
And don’t forget to sign up to our email newsletter so you can get useful content like this sent right to your inbox!
Thanks!
Faraz 😊
