• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
The Electric Toolbox Blog

The Electric Toolbox Blog

Linux, Apache, Nginx, MySQL, Javascript and PHP articles

  • Applications
  • FCKEditor
  • Apache
  • Windows
  • Contact Us
Home / Multiple CSS classes for a single element

Multiple CSS classes for a single element

A useful CSS technique is to apply multiple CSS classes to a single element; this is something I didn’t know was possible when I first started with CSS several years ago and I often find people do not realise it can actually be done.

The easiest way to explain how this works is with an example. If we defined the following CSS classes:

.underlined {
    text-decoration: underline;
}
.red {
    color: red;
}

Then we could made an underlined paragraph like so:

<p class="underlined">This text is underlined.</p>

and a red paragraph like so:

<p class="red">This text is red.</p>

Finally, we can make a red, underlined paragraph by assigning both CSS classes to the <p> tag by space separating the class names:

<p class="red underlined">This text is underlined and red.</p>

And here’s the above examples in action:

This text is underlined.

This text is red.

This text is underlined and red.

And yes, I know you should never ever call your CSS class names something like "underlined" or "red"; it was just easy to illustrate my examples with those names 😉

Check Out These Related posts:

  1. Styling select, optgroup and options with CSS
  2. Remove directory Linux
  3. Bash For Loop
  4. What Is a VPN?

Filed Under: HTML And CSS

Primary Sidebar

Categories

  • Apache
  • Applications
  • Article
  • Case Studies
  • Email Servers
  • FCKEditor
  • HTML And CSS
  • Javascript
  • Linux/Unix/BSD
  • Microsoft SQL Server
  • Miscellaneous Postings
  • MySql
  • Networking
  • Nginx Web Server
  • Offsite Articles
  • OSX
  • PHP
  • Quick Tips
  • RFC – Request for Comments
  • SilverStripe
  • VMWare
  • VPN
  • Windows
  • WordPress

Recent Posts

  • Vim Show Line Numbers
  • Add User To Group Linux
  • Chmod 777 Tutorial
  • How to Copy Directory Linux
  • Linux create user

Copyright © 2021. ElectricToolBox. All Rights Reserved.

  • Contact Us
  • Copyright Info
  • Privacy Policy
  • Sitemap