CSS Class Styling Issue

Question

CSS Class Styling Issue

986 views Asked by ScienceFire At 26 December 2016 at 09:49

I have the following issue when using css in Windows Notepad:

<!DOCTYPE html>
    <html>
        <head>
            <title>RYZJMScience</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>

When this is run, the only thing that works under the .page class selector is the text-decoration declaration used to de-underline the links. Please help!

Original Q&A

There are 3 answers

**Robby Cornelissen** · Answer 1 · 2016-12-26 09:51:54

This line:

font: "Georgia, serif;

Should be:

font-family: "Georgia", serif;

Also, the property to set the font color is color instead of font-color, and the border properties need to be split up.

So your page class should look like this:

.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);
}

**Sid Biffi** · Answer 2 · 2016-12-26 10:07:32

Check this fiddle.

CSS

Changes i made:

from

font: "Georgia, serif;

to

font-family: Georgia, serif;

from

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

to

color: #0000cd;

from

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 more infos:

Fonts

Font colors

Borders

Hope that can help you.

**AudioBubble** · Answer 3 · 2016-12-26 10:23:43

Since you really can't post to SO every time you have a syntax error in your CSS that you can't find, you need a better approach.

You can use a competent editor or IDE which knows CSS and can highlight errors for you right on the screen. Here is a screenshot from VSCode. You can tell from the coloring that something is wrong:

Or, you can run your CSS through a CSS linter, or validator, such as the W3C CSS Validator. It would have told you:

Most web browsers would also report your errors, either in the form of parsing errors, or in the form of unknown property names or invalid property values shown in the style inspector. Learn how to use it. Here's what it will look like:

Hovering over the little yellow triangles would show more details of the problem, such as "Unknown property name" or "Invalid property value".

TechQA.

CSS Class Styling Issue

There are 3 answers

Related Questions in HTML

Related Questions in CSS

Related Questions in NOTEPAD

Popular Questions

Popular Tags

Trending Questions