CSS Entities: A Comprehensive List

In CSS (Cascading Style Sheets), entities refer to a set of predefined characters or symbols that are often used in web design and development. These entities help developers include special characters in their web pages without breaking the structure of the code. Unlike HTML entities, which are used in the markup, CSS entities are used directly in stylesheets. These entities are essential when working with content that involves special symbols, typography, and graphical elements in CSS.

This article will provide a complete list of CSS entities, their usage, and practical examples to help you incorporate them into your web designs effectively.

What Are CSS Entities?

CSS entities are special character codes that allow developers to use characters that might otherwise be reserved for CSS syntax or are difficult to type. CSS entities come in handy when you need to include symbols like the copyright symbol (©), trademark symbol (™), or mathematical symbols such as ≤ or ≥ directly within your styles.

These entities can be particularly useful when working with the content property in CSS, which is often used with pseudo-elements such as ::before and ::after. You can use CSS entities to insert symbols or special characters dynamically before or after the content of an HTML element.

Commonly Used CSS Entities

Here is a list of commonly used CSS entities, their codes, and examples of how to use them in stylesheets.

1. Ampersand (&)

• Entity Code: \0026
• Example: &

p::before {
  content: "\0026";
}

This will insert the & symbol before every paragraph.

2. Less-than (<)

• Entity Code: \003C
• Example: <

p::after {
  content: "\003C";
}

This will insert the < symbol after every paragraph.

3. Greater-than (>)

• Entity Code: \003E
• Example: >

p::before {
  content: "\003E";
}

This will insert the > symbol before every paragraph.

4. Copyright Symbol (©)

• Entity Code: \00A9
• Example: ©

footer::before {
  content: "\00A9";
}

This will insert the copyright symbol in front of the footer content.

5. Trademark Symbol (™)

• Entity Code: \2122
• Example: ™

footer::after {
  content: "\2122";
}

This will insert the trademark symbol after the footer content.

6. Registered Trademark Symbol (®)

• Entity Code: \00AE
• Example: ®

footer::before {
  content: "\00AE";
}

This will insert the registered trademark symbol before the footer content.

7. Non-breaking Space ( )

• Entity Code: \00A0
• Example: A space character that prevents line breaks.

h1::before {
  content: "\00A0";
}

This will insert a non-breaking space before every heading.

8. Bullet Point (•)

• Entity Code: \2022
• Example: •

li::before {
  content: "\2022";
  margin-right: 5px;
}

This will insert a bullet point before each list item.

9. En Dash (–)

• Entity Code: \2013
• Example: –

p::after {
  content: "\2013";
}

This will insert an en dash at the end of each paragraph.

10. Em Dash (—)

• Entity Code: \2014
• Example: —

blockquote::before {
  content: "\2014";
}

This will insert an em dash at the beginning of every blockquote.

How to Use CSS Entities

To use these entities in your CSS, you need to leverage the content property, which is most commonly used with pseudo-elements (::before and ::after). These pseudo-elements allow you to insert content dynamically without altering the HTML structure itself.

Here is an example of how to use a CSS entity:

button::before {
  content: "\00AE"; /* Inserts the ® symbol */
  margin-right: 5px;
}

In this example, the ::before pseudo-element adds a registered trademark symbol (®) before the content of a button.

Full List of CSS Entities

Below is a list of CSS entities:

Practical Example

Let’s say you want to insert both a copyright symbol and a non-breaking space before a footer text on your webpage. Here’s how you would do it:

footer::before {
  content: "\00A9 \00A0"; /* Inserts © followed by a non-breaking space */
  font-weight: bold;
}

This CSS rule will display the copyright symbol followed by a space before the content in the footer.

Conclusion

CSS entities are incredibly useful for inserting special characters and symbols directly into your stylesheets. By utilizing CSS entities, you can keep your code cleaner and more efficient while avoiding potential issues with reserved characters. Whether you’re inserting a copyright symbol, bullet point, or mathematical character, CSS entities provide a straightforward way to enhance the content of your web designs.