What is the solution for the error "At-rule or selector required" ?

Can someone help me with my CSS code issues? I'm having trouble on the first and last lines. Total newbie here :)

Error Messages: at-rule or selector expected (ln 1, Col 1) at-rule or selector expected (ln 51, Col 1)

\<style\>
    p {
    font-family: Arial;
    margin-top: 0;
    margin-bottom: 0;
    }

        .video-title {
            font-weight: bold;
            font-size: 18px;
            width: 280px;
            line-height: 24px;
            margin-bottom: 5;
        } 
        
        .video-stats {
            font-size: 14px;
            color: rgb(96, 96, 96);
            margin-bottom: 20px;
        }
        
        .video-author {
            font-size: 14px;
            color: rgb(96, 96, 96);
            margin-bottom: 20;
        
        }
        
        .video-description {
            font-size: 14px;
            color: rgb(96, 96, 96);
            width: 280px;
            line-height: 22px;
            margin-bottom: 100px;
        }
        
        .apple-text {
            margin-bottom: 50px;
            font-size: 14px;
            background-color: rgb(227, 65, 64);
            color: white;
            text-align: center;
            padding: 20px;
        }
        
        .shop-now:hover {
            text-decoration: underline;
            cursor: pointer;
        }

    \</style\>

After looking through my code multiple times, I still can't figure out what's causing the errors on lines 1 and 51. Any ideas?

css

Answer №1

Your <style> elements seem to be causing an issue.

The forward slash in the tags is important for indicating where the tag ends, so it's not meant for enclosing your CSS code.

The opening line should begin with <style> and the closing line should end with </style>

It could also be beneficial to move this code into a separate .css file and link it in the HTML document.

Answer №2

Have you included the CSS within an HTML document or in a separate CSS file?

If it's within an HTML document, make sure to wrap the CSS with <style> and </style> tags. It appears that there are unnecessary backslashes in your code.

If the CSS is in a separate file, then omit the <style> tags.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Show variously colored information for each selection from the dropdown using Angular Material

I am trying to change the color of displayed content based on user selection in an Angular application. Specifically, when a user chooses an option from a dropdown list, I want the displayed text to reflect their choice by changing colors. For example, i ...

cssangulartypescriptangular-material

Maximizing page space with ReactJS and advanced CSS techniques

I'm currently in the process of learning CSS and struggling a bit with it. My main issue right now is trying to make my react components fill the entire height of the browser window. I've been using Display: 'grid' and gridTemplateRows: ...

javascriptcssreactjs

elevate design css/widget/components

I am currently on the lookout for samples of boot strap floating css/widget/parts. Despite googling with keywords like 'floating / fixed', I have only come across sticky footer and header examples, or some simple panel samples. By 'floatin ...

csstwitter-bootstrap

My navigation menu has a nested ul, but on mobile devices, it doesn't display all the items in the list. What could be causing

When I click on "Products" in my main navigation, only the first 6 items are displayed from a nested ul. How can I make all of them display when the user clicks on "Products"? Is this a CSS issue or a problem with the script? Here's a screenshot for r ...

javascriptjqueryhtmlcssnavigationbar

Confusing Vaadin Component Styling Dilemma

I've been struggling to access the individual parts of elements that require navigating through the shadow DOM. I've been following a guide for assistance: https://github.com/vaadin/vaadin-themable-mixin/wiki/1.-Style-Scopes When I add this code ...

javacssvaadinstyling

Utilizing mobile emulators to optimize the viewport for mobile application development

Are mobile emulators like MITE() able to detect viewport settings? <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> Can anyone recommend a mobile emulator that does recognize viewport settin ...

htmlcssmobilemedia-queriesviewport

Can CSS content be used to showcase an .html document or .html fragment?

Referencing the MDN documentation for css content: /* <uri> value */ content: url(http://www.example.com/test.html); Inquiry: Can an image be displayed using the url() value of the content property in a css html element? .content { conte ...

htmlcss

Looking for a way to connect a background image in Vue CLI?

When running the code below, I encounter an issue. The code runs properly but the images are not displaying and instead showing the URL as unknown. How can I fix this problem? The images definitely exist. <template> <div class="slider">< ...

javascripthtmlcssvue.jswebpack

Utilizing JavaScript to assign a CSS class to an <li> list item

I am working on a page that includes a menu feature: https://jsfiddle.net/dva4zo8t/ When a menu button is clicked, the color changes and I need to retain this color even after the page is reloaded: $('[id*="button"]').click(function() { $( ...

javascriptjquerycssmenuhighlight

To replace basic SVG icons upon clicking with the use of HTML, CSS, and jQuery - here's how!

I have a simple question about inline SVG icons and how to handle them in HTML, CSS, and jQuery. Despite reading numerous resources, I still struggle with implementing the functionality where clicking on one icon changes it to another. My objective: To to ...

jqueryhtmlcsssvgicons

Currently, I am compiling a list of tasks that need to be completed, but I am encountering a dilemma that is proving difficult to resolve

Recently delved into the world of Javascript and encountered a roadblock that I can't seem to overcome. Here's the snippet of code causing me trouble: add = document.getElementById("add"); add.addEventListener("click", () => { console.log("Ple ...

javascripthtmlcssarrays

Creating Header Images for Websites, like the way Facebook does

Exploring how to properly configure the header image on my website has been intriguing. The main issue is that when I view it on my laptop, which has a width resolution of around 1280px, the header image's width measures about 2000px. My goal is to h ...

htmlcssimageresolution

Aligning text and lists using Bootstrap on both desktop and mobile devices

I want to format a text with a list similar to the images provided https://i.stack.imgur.com/6giDH.png for desktop and tablet view, but for mobile display I would like it to look like this https://i.stack.imgur.com/7zSXi.png This is my current approach ...

htmlcsstwitter-bootstrap-3

Do remote resource links remain accessible when there is no connection to the internet?

I have incorporated remote resources such as jQuery and icons by linking them like this: <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <script src="https://ajax.googleapis.com/a ...

jquerycsshtml

Incorporate CSS styling from a separate .css file into a material component

Just starting out with material UI. I have a css file that looks like this: .bgItem { font-size: 14px; } My component setup is as follows: <MenuItem key={status.Id} value={status.Value} classes={css.bgItem}> {status.Description} </Men ...

javascriptcssreactjsmaterial-ui

Utilize jQuery to trigger video playback based on the horizontal movement of the mouse

Utilizing this jQuery script to navigate back and forth in a video as the cursor moves along the x-axis. var mouseX; $(document).mousemove( function moveFunc(e) { mouseX = e.clientX; var timV = $("#deko_vid").get(0).duration; var valV = (timV*mouseX/$(do ...

javascriptjqueryhtmlcsshtml5-video

The two items are not situated side by side

Trying to make my page responsive, but when I inspect and look into mobile view, the elements do not align next to each other like they do on desktop. https://i.sstatic.net/8WhxD.png I want the shopping cart icon and button to be positioned next to each o ...

htmlcssbootstrap-5

Displaying content on the <div> element

Looking for recommendations for a jQuery plugin or JavaScript solution that allows me to load a full "view" into a <div> when a user clicks on a link. The challenge I'm facing is that I have 8 pages, with the Homepage consisting of 3 divisions: ...

javascriptjqueryhtmlcssasp.net-mvc

Clicking the button will remove any previously applied CSS style using jQuery

Is there a way to remove the background color that was applied to a previously clicked button when clicking on another button? The current code successfully changes the background color of the clicked button upon hover, but it doesn't reset or remove ...

javascripthtmljquerycss

"Utilizing margins to create space between elements within a Bootstrap

I am currently utilizing bootstrap 4 and have a list of items that I am displaying in the following manner: <div class="container"> <div class="row"> <div class="card col-md-4 col-sm-6 col-12 item-wr" *ngFor="let item of items"> ...

htmlcsstwitter-bootstrapangularbootstrap-4