Problem with CSS Classes Styling

Having an issue with CSS in Windows Notepad:

<!DOCTYPE html>
    <html>
        <head>
            <title>UniqueScience</title>
            <style>
                #title {
                    display: block;
                    margin: 0px auto;
                }
                .page {
                    text-decoration: none;
                    display: inline;
                    font: "Georgia, serif;
                    font-size: 40px;
                    font-color: rgb(0,0,205);
                    border: 2px 1px 1px 1px solid rgb(255,140,0);
                }
            </style>
        </head>
        <body>
            <img src="title.png" id="title">
            <a href="index.html" class="page">Home</a>
            <a href="weekly.html" class="page">Weekly</a>
            <a href="monthly.html" class="page">Monthly</a>
            <a href="physics.html" class="page">Physics</a>
            <a href="chemistry.html" class="page">Chemistry</a>
            <a href="biology.html" class="page">Biology</a>
            <a href="technology.html" class="page">Technology</a>
        </body>
    </html>

Experiencing a problem where only the text-decoration property works under the .page selector. Seeking assistance!

htmlcssnotepad

Answer №1

If you find yourself stuck with a CSS syntax error that you just can't seem to locate, it's not practical to reach out to Stack Overflow every time.

A smarter approach would be to utilize a proficient editor or Integrated Development Environment (IDE) that is equipped with CSS knowledge and can point out errors directly on the screen. Take a look at this example from VSCode where the color coding indicates an issue:

https://i.sstatic.net/CtJUC.png

Alternatively, consider running your CSS code through a CSS linter or validator like the W3C CSS Validator. This tool would have caught the mistake for you:

https://i.sstatic.net/mln0G.png

Most modern web browsers will also flag CSS errors either as parsing errors or by highlighting unknown property names and invalid values in their developer tools. Familiarize yourself with using these features. It should resemble something like this:

https://i.sstatic.net/i11l6.png

Hovering over the little yellow triangles will reveal more information about the problem, such as "Unknown property name" or "Invalid property value".

Answer №2

For proper styling, make sure to use the following CSS code:

font-family: "Georgia", serif;

Remember to use color instead of font-color for font color properties. Additionally, ensure that border properties are specified individually rather than combined.

Update your page class with the correct syntax:

.page {
    text-decoration: none;
    display: inline;
    font-family: "Georgia", serif;
    font-size: 40px;
    color: rgb(0,0,205);
    border-width: 2px 1px 1px 1px;
    border-style: solid;
    border-color: rgb(255,140,0);
}

Answer №3

Take a look at this code snippet.

CSS

Modifications I implemented:

changing

font: "Georgia, serif;

to

font-family: Georgia, serif;

changing

font-color: rgb(0,0,205);

to

color: #0000cd;

changing

border: 2px 1px 1px 1px solid rgb(255,140,0);

to

border-top-width: 2px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-color:rgb(255,140,0);
border-style: solid;

For additional details:

Fonts

Font colors

Borders

I hope this information proves to be helpful for you.

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

When clicked, the DIV expands to fit the size of the window

Is there a way to use jQuery to expand a div to full screen when clicked, and change the content or layout of the div? I have a small div on my webpage with text or images inside, and I want it to enlarge when clicked so it fills the entire window with m ...

jqueryhtmljquery-uicss

The Div ID is built utilizing attributes inherited from the preceding element

I'm encountering an issue where I've defined rollover buttons and div ids to manipulate my image positions. However, when I create a new div called Text and add content to it, the rollover buttons also seem to activate? It's as if the code f ...

htmlrollover

If the value stored in $_SESSION['uname'] is not "teacher", redirect back to the homepage

I am currently working on a webpage and I want to restrict access to only users with the username "teacher". I came across this code snippet: <?php session_start(); if(!isset($_SESSION['uname'])){ header('location:(main p ...

phphtml

The individual blog pages on my site are not receiving the static files they need to display

I'm facing an issue serving a css file to individual blog posts on my website's blog section. Here's how it's supposed to work: Visit /blog- you'll see the main blog page, which is functioning fine. However, when trying to access ...

cssnode.jsexpresspug

Creating CSS dynamically using PHP

Even after reading numerous blogs and forums, I'm still unable to get this working. My goal is to allow users to personalize their user account style sheet. I made sure to include <?php header("Content-type: text/css"); ?> at the beginning of t ...

phpcss

confirmation box for deleting a row in a grid view

I am looking to enhance the delete confirmation box on my Gridview delete function. Currently, I am using a basic Internet Explorer box for confirmation but I want to display a more stylish confirmation box. Here is the JavaScript code snippet within my gr ...

javascriptcssasp.net

Modify request parameters in real-time using JavaScript

i am seeking assistance with a link request: <a href=index.jsp></> also, i have various divs located elsewhere on the page that contain changing values based on user input or specific conditions: <input id="var1" /> <input id="var2" ...

javascriptjqueryhtmljsprequest

What steps should I take to design a mobile-friendly navigation bar?

I have shared the code for my navigation bar in a previous post Fixing Nav Bar to top of page. Now, I want to create a mobile version of it, but I am new to designing for mobile devices. Based on feedback and some CSS tweaking, I have managed to make it wo ...

htmlcss

Is there a way to rigorously validate my HTML, CSS, and JavaScript files against specific standards?

Can modern browsers suppress errors in HTML, CSS, and JS sources? Is there a method to uncover all mistakes, no matter how small they may be? ...

javascripthtmlcssvalidationbrowser

The CSS is not displaying correctly on Safari and Chrome browsers in Mac OS

I'm having trouble with CSS not loading properly on Apple devices for a website I made. Despite maintaining all media query statements and style sheets separately, the display is not correct in MAC OS safari and chrome. However, everything looks fine ...

javascriptjqueryhtmlcsssafari

Unable to locate the value property of a null object

I'm currently working on creating a Shopping Cart using HTML, CSS, JavaScript, and JQuery. The idea is that when you click "Add to Cart" for the orange item, most of the HTML elements will disappear, leaving only the table displaying the Shopping Cart ...

javascriptjqueryhtmlcss

Simply tap on the image to include it in the HTML5 Canvas drawing

Currently, I am in the process of drawing a circle onto my html5 canvas as shown in the code snippet below: <!DOCTYPE HTML> <html> <head> <style> body { margin: 0px; padding: 0px; } </style> </head> <body> &l ...

javascripthtmldrag-and-drophtml5-canvaskineticjs

Activate text-entry fields after a button has been pressed on polymer 1.0

I am currently developing a project focused on creating a list of doctors using the Polymer 1.0 framework. Within the doctor-list, I have integrated a Vaadin grid called doctors-grid.html to display data sourced from a JSON file. Upon double-clicking on a ...

javascripthtmljsonpolymer

Tips for adding a CSS marker to the Videogular timeline at a designated time

My HTML player application allows users to search for a term and then displays the results along with the time when those words appear. By clicking on a specific sentence, the HTML player will start playing from that location. However, I would like to enha ...

javascripthtmlcssangularjsvideogular

The directory for foundation images cannot be found

Currently, I am in the process of learning Foundation framework and I have encountered some issues with my code. My goal is to display images for different devices such as mobile, tablet, and desktop. However, despite double-checking the path to the images ...

htmlzurb-foundation

Framework designed to be compatible with Internet Explorer 7 for seamless

Is there a CSS framework that provides full support for IE7 without any issues? Specifically, something similar to Twitter Bootstrap but with guaranteed rounded corners and properly functioning tabs. I have experienced problems with the Popover plugin sp ...

cssinternet-explorer-7css-frameworks

Contrast the schedules of two different calendars

Attempting to compare two timetables for a college project in order to identify available time slots in one timetable and concurrently check for events happening in the other. For instance, if a student has an open period from 4-5 on a Tuesday, the code sh ...

pythonhtmlpandasselenium

A guide on restricting overflow in React Spring Parallax 'pages'

Currently, I have integrated React Spring Parallax () into my project found at this link: https://codesandbox.io/s/parallax-sticky-scroll-2zd58?file=/src/App.js Upon clicking the button to navigate to the next section, it is noticeable that the image over ...

cssreactjsparallaxreact-spring

Organizing Pictures in a Gridded Design

My dilemma lies in displaying a set of thumbnail images within a div. The width of the div can vary depending on the screen size. Each image is fixed at 150px * 150px with a padding of 5px. I aim to arrange these thumbnails in a grid layout while ensuring ...

jqueryhtmlcss

What is the best way to apply an animation class to a modal upon clicking a button?

When I click the "x" button on the modal, I want the animation to occur. However, what currently happens is that the modal closes without the animation. Then, upon reopening the modal, the animation occurs without any clicking involved. Below is my curren ...

javascripthtmlcssbootstrap-5