将<code>tag in CSS class</code>

Question

I am new to CSS.

Is there any way to put 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 tag into style sheet, so I don't need to write it every time I want to display codes.

Answer 1

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>

Answer 2

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 eg 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 eg

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 .

Answer 3

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.