2

I want to apply some font property to some text inside a span element with a class But in browsers the font properties are not applied. What to do?

I want to apply a font and some font property like size, weight to some text inside a span element which has a class named "2ndtype". But when i open it in chrome the font properties are not applied. What to do?

the html looks like this:

<body>
    <div id="1stdiv">
       <h1>GOBIKES</h1> 
    </div>
    <div id="2nddiv"><img class="bikeimg" src="images/bikemain.jpg"></div>
    <div><span class="2ndtype">AVAILABLE BIKES IN YOUR LOCATION</span></div>
</body>

and the CSS is:

.2ndtype {
    font-family: Candara;
    font-size: 27px;
    font-weight: bold; 
}

but in browsers i only get default html font and size applied to the text "AVAILABLE BIKES IN YOUR LOCATION".

abhis1312
  • 23
  • 3

3 Answers3

0

You cannot start a class name with a number!

Basically, a name must begin with an underscore (_), a hyphen (-), or a letter(a–z), followed by any number of hyphens, underscores, letters, or numbers.

Which characters are valid in CSS class names/selectors?

Bitz
  • 1,128
  • 11
  • 33
  • Thanks it worked. I am a new learner so thanks very much for helping me out. – abhis1312 Nov 07 '19 at 03:31
  • @abhis1312 this isn't true, you can start a class name with a number. You simply need to know how to escape them: https://jsfiddle.net/mk96n413/ ... (PS: you should consider reading *all* the answers in the link your provided, not only the accepted one) – Temani Afif Nov 07 '19 at 07:25
0

CSS will not understand selector start with number. in this case either you have to use attribute selector like 

[class="2ndtype"] {
  font-family: Candara;
   font-size: 27px;
   font-weight: bold;
}

or you will have to change name of class, start with letter or underscore.

jsFiddle: https://jsfiddle.net/tr4gkhsm/

Ankit Patel
  • 1
  • 1
  • I would consider this a hack and an anti-pattern. The standards exist for a reason and shouldn't be circumvented. https://stackoverflow.com/questions/980601/what-is-an-anti-pattern – Bitz Nov 07 '19 at 03:44
0

All CSS syntax is case-insensitive within the ASCII range (i.e., [a-z] and [A-Z] are equivalent), except for parts that are not under the control of CSS. For example, the case-sensitivity of values of the HTML attributes "id" and "class", of font names, and of URIs lies outside the scope of this specification. Note in particular that element names are case-insensitive in HTML, but case-sensitive in XML.

https://www.w3.org/TR/CSS21/syndata.html#characters

Gopinath N
  • 1
  • 1