0

I'm trying to use classes and/or id's to style paragraphs and other elements. I've used them successfully before, but on this page the only id that works is for styling an image. However, if I use the tag for a paragraph then the styling works in CSS. I would like the id "#1p" in the CSS to allow me to style the corresponding paragraph. Right now this id acts as if it is not there. Below is my code:

     table {
        position: absolute;top: 50px;
        left: 225px;
        width: 650px;
        border: 10px solid black;
        border-collapse: collapse;
        padding: 5px;              
    }
    th {
    font-family: sans-serif;
    font-size: 24px;
    text-align: left;
    color: #f2f2f2;
    background-color: black;
    }       
    .positionImage {
                position: absolute;
                top: 50px;
                left: 140px;
                border: 10px solid black;
                }
    h2 {
    text-align: center;
    position: absolute;
    top: 160px;
    left: 300px;
    }
    #1p {
    position: absolute;
    top: 200px;
    left: 175px;
    font-size: 18px;
    } 
    
    <img src="Pen_MLA.jpg" class="positionImage">
    <table>
    <th colspan="2">The Writing Center at Bristol Community College</th>
    <tr> 
        <td><b>Building B - Room 117</b></td>
        <td><b><i>E-mail: writing.center@bristolcc.edu</i></b></td>    
    </tr>
    <tr>
        <td><b>508-678- 2811 X2544<b></td>
        <td><b><i>Website: www.bristolcc.edu/writingcenter</i></b></td>
    </tr>
    </table>
    <h2>Quoting and Citing Poetry (MLA)</h2>

    <p id="1p">(Material is drawn from the <u>MLA Handbook for Writers of       
    Research Papers</u>, 6th Edition.)</p>
Hemant
  • 1,900
  • 2
  • 15
  • 26
codehelp
  • 11
  • 2
  • Are ids allowed to start with numbers? Does it work if you change the first character of the ID to a letter? – Carcigenicate Feb 05 '17 at 20:59
  • @JimCote That's incorrect. https://www.w3.org/TR/html5/dom.html#the-id-attribute. See also http://stackoverflow.com/questions/70579/what-are-valid-values-for-the-id-attribute-in-html – j08691 Feb 05 '17 at 21:07
  • You are right, I was quoting a site which seems to be incorrect. – Jim Cote Feb 05 '17 at 21:15
  • Maybe not related to your issue but you shold add the type and rel in you – Louis Loudog Trottier Feb 05 '17 at 21:22
  • Thanks for all of the answers. The problem was that I was pasting text from Word. As soon as I pasted the text into TextEdit (plain text for a Mac) and then pasted it into my code the problem disappeared. Not sure if pasting in plain text will always remove formatting but seems to work. Thanks for the suggestion about adding the type and rel in the – codehelp Feb 06 '17 at 18:53

2 Answers2

1

A CSS ID selector consists of:

a "number sign" (U+0023, #) immediately followed by the ID value, which must be an CSS identifiers.

An identifier:

cannot start with a digit

If you want to represent an ID starting with a digit then you must either:

  • use an escape sequence: #\31p {}
  • use an attribute selector (warning: this changes the specificity): [id="1p"]
  • change the HTML ID
Quentin
  • 800,325
  • 104
  • 1,079
  • 1,205
0

HTML IDs cannot start with numbers. You site is styled fine if you use p1 rather than 1p.

You can read more about this, and a possible workaround (you can use [id='1p'] if you really need to) here.

Toastrackenigma
  • 5,350
  • 3
  • 35
  • 50
  • "HTML IDs cannot start with numbers" — That was true in HTML 4. The [new rules](https://www.w3.org/TR/html5/dom.html#the-id-attribute) say: The value must be unique amongst all the IDs in the element's home subtree and must contain at least one character. The value must not contain any space characters. There are no other restrictions on what form an ID can take; in particular, IDs can consist of just digits, start with a digit, start with an underscore, consist of just punctuation, etc. – Quentin Feb 05 '17 at 21:27
  • Indeed. However in Webkit / Blink (not sure about Gecko / Trident), even with the HTML5 doctype that OP used, the styles **do not** work unless the ID doesn't start with a number. A lot of things in the spec do not make it to browsers, or take a while to be supported, and this appears to be one of them. Hopefully one day this will no longer be an issue.l – Toastrackenigma Feb 05 '17 at 21:33
  • You're confusing the rules for HTML attributes with the rules for CSS selectors. See my answer. – Quentin Feb 05 '17 at 21:39