Putting <code> tag in CSS class

Question

I am new to CSS.

Is there any way to put code tag in CSS class?

For displaying code, at first I was using inline style:

<table>
  <tr>
    <td style="border:solid 2px #5882FA">
         <code> 
               some codes 
         </code>
    </td>
  </tr>
</table>

Then I found out about internal style sheet. So I used

<header>
   <style>
      td.bordered{border:solid 2px #5882FA}
   </style>
</header>
 .
 .
 .
<table>
  <tr>
    <td class="bordered">
         <code> 
               some codes 
         </code>
    </td>
  </tr>
</table>

I was wondering whether somehow I can also put the code tag into style sheet, so I don't need to write it every time I want to display codes.

sure, just create a file called something.css and put your style rules in there. for the <code> tag your rule would be code { ...styles go here... }. If you want to use a class instead do it exactly like you did with the <td> tag in your question. Then just make to include your stylesheet with a <link> tag — celeriko
– celeriko, Commented May 21, 2014 at 19:52
I know this is not what you asked but you will soon find yourself using some highlight library to that code ... for that you can use prettify ... if you need to edit a highlighted code you can use codemirror — rafaelcastrocouto
– rafaelcastrocouto, Commented May 21, 2014 at 19:58
@LoMaPh By your question I have the feeling you're very very very new to CSS, and perhaps HTML too. Which is perfectly fine. Everybody were once. Do you already know about external stylesheets? They will blow your mind. =P I highly recommend you take a good look at developer.mozilla.org/en-US/learn/css and developer.mozilla.org/en-US/learn/html. Hope you'll find it all as amazing as I did when I started. Good luck! — slacktracer
– slacktracer, Commented May 21, 2014 at 20:24

Quentin · Accepted Answer · 2014-05-21 20:05:42Z

3

No. You could apply styles to the table data cell that would duplicate a given browser's default styling for a code element, and you can use ::before and ::after to generate pseudo-elements, but there is no way to apply the semantic meaning associated with an HTML element using CSS.

The CSS spec goes so far as to explicitly warn against trying to do that sort of thing:

Note. CSS gives so much power to the "class" attribute, that authors could conceivably design their own "document language" based on elements with almost no associated presentation (such as DIV and SPAN in HTML) and assigning style information through the "class" attribute. Authors should avoid this practice since the structural elements of a document language often have recognized and accepted meanings and author-defined classes may not.

On the subject of semantics, a one-by-one table suggests you are abusing it for its shrink-wrapping layout features. Use display: inline-block instead.

Thus your code should probably look like this:

<style>
    code {
        display: inline-block;
        border: solid 2px #5882FA;
    }
</style>

<code> 
    some codes 
</code>

edited May 21, 2014 at 20:05

answered May 21, 2014 at 19:47

Quentin

949k136 gold badges1.3k silver badges1.4k bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

rafaelcastrocouto Over a year ago

what??? " there is no way to apply the semantic meaning associated with an HTML element using CSS" ... from where did you took this from? plz read this

Quentin Over a year ago

@rafaelcastrocouto — I know CSS quite well, I've been using it for over a decade and a half. Where does that document say that you can apply semantics with CSS? (As for that statement, I wrote it myself, based on my extensive experience)

rafaelcastrocouto Over a year ago

why make things complicated? ... you can simply do tagName {css: code} ... there's nothing about semantics in this.

Quentin Over a year ago

@rafaelcastrocouto — That is not what he said. "I can also put the code tag into style sheet, so I don't need to write [the code tag] every time I want to display codes"

Alexis King Over a year ago

I don't understand the downvotes, this answer is correct—please read the question.

|

Jukka K. Korpela · Accepted Answer · 2014-05-21 21:15:31Z

No. First, there are no “CSS classes”. A class is a markup language (HTML) concept. It may be referred to in CSS, using a class selector, but this is simply a way to refer to elements by their class. Second, tags are markup language concept too, and you cannot create tags or elements in CSS; in CSS, you just refer to elements by their names.

However, if we interpret the question as “can I format some elements in CSS as if they had code elements inside them”, as I think it is, then the answer is “yes, with reservations”.

For the most of it, all that code markup does is that it sets the font face to a browser-dependent monospace font and the font size to a browser-dependent reduced size, though the latter (poorly documented) applies in some contexts and some browsers only. In addition to this, it may e.g. affect automatic translation programs (like Google Translate) so that they do not translate the content, regarding it as being “not in any human language”—this is normally good, but you cannot do that in CSS. And code markup could have other effects too.

Thus, you might use e.g.

td.bordered {
  /* put your settings for the border here */
  font-family: monospace;
  font-size: 90%;
}

But beware that this does not necessarily produce the same effect as the use of code elements. On the other hand, this should not really be an issue: decide on the desired rendering, and implement it in CSS, instead of trying to imitate some assumed default rendering of code.

Lukas S. · Accepted Answer · 2014-05-21 19:54:13Z

1

If your goal is to display a border around the contents of the <code> tag wherever it appears, you could use the following CSS rule:

code {
    border: solid 2px #5882FA;
}

The code selector, without any dots or # characters before it, is called an element selector.

The other selector that you used, td.bordered combines an element selector that matches all <td> tags with a class selector that matches the bordered class.

answered May 21, 2014 at 19:54

Lukas S.

5,7685 gold badges37 silver badges52 bronze badges

2 Comments

bjb568 Over a year ago

This. The table probably isn't necessary.

Jukka K. Korpela Over a year ago

This does not answer the question at all. It describes what could be done if code markup is used, but the question asks how to avoid using it.

Collectives™ on Stack Overflow

Putting <code> tag in CSS class

3 Answers 3

9 Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

9 Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related