Skip to main content

A Beginner's Guide to CSS | Part Three - How to apply CSS

Submitted by helen on Thursday, April 1, 2010 - 22:00; Modified on Thursday, August 18, 2016 - 11:13

Welcome to Part Three of A Beginner's Guide to CSS - How to apply CSS. In this instalment of the series, we'll look at how to apply CSS to your elements, as well as the recommended naming conventions for CSS rules.

Targeting elements with CSS

In Part Two, I showed you how to target elements for styling with CSS selectors. We will now expand upon this knowledge by writing CSS rules that we'll apply to some elements. I'll use HTML and XHTML examples, to cover both bases.

First, let's look at a basic example of applying a class to an element.

Using classes

When we create classes, we apply them to our elements by using the (X)HTML class attribute on the elements (or element) in question. In the example below, I will create a class called feature, which I will add to a paragraph, denoted by the p element. Don't worry if the p element is completely foreign to you; I will explain more about it in A Beginner's Guide to CSS | Part Seven - CSS and Paragraphs.

Basic class example

CSS Code:


.feature {
  background:red;
}

(X)HTML Code:


<p class="feature">My feature.</p>

Result:

My feature.

This will assign the class feature to our p element, which will give it a red background. To accomplish this, CSS searches the document for a class attribute called feature. To every match it finds, it applies our feature class (remember, elements that match a selector are called subjects of that selector). Nice and simple, right?

Multiple Classes

The class attribute should only be used once on an element. If you want to apply multiple classes to an element, you simply add your classes into the class attribute, separated by a space.

Here's an example to illustrate the process.

Example of the application of multiple classes

CSS Code:


.product {
  background-color:purple;
  border:1px solid black;
  color:white;
}

.basket {
  font-weight:bold;
}

.view {
  text-transform:uppercase;
}

(X)HTML Code:


<p class="product basket view">My awesome product!</p>

Result:

My awesome product!

The above example will apply the three classes we just created to our paragraph. Let's examine more closely what each class does:

  • .product will give the paragraph a purple background, via the background property; a black border, via the border property and will change the colour of the text to white, via the color property.
  • .basket will make the text bold, via the font-weight property.
  • .view will render the text in uppercase, via the text-transform property.

I am aware that I'm introducing several CSS properties here that we haven't covered yet, but don't worry because I will explain all about these properties in future tutorials. Nothing will be missed out.

For simplicity's sake, I have made sure not to use the same property twice for each class, but this can happen when you're working with CSS written by multiple people. We'll look at how to deal with CSS rules that clash in Part Four - The CSS Order of Precedence.

Order of multiple classes

The order in which multiple classes are applied to an element is based on the order in which the classes occur in the stylesheet or, if you're using embedded styles, the order your classes appear between the style tags. Classes that come last take precedence over classes before them. The order in which you add your classes onto the class attribute has no bearing on the order in which your classes are applied.

It's useful to know this as it can save you some grief when you create several CSS rules and some properties appear to not work, when really they're being overridden by statements further down in your stylesheet or in another stylesheet entirely.

Using IDs

Styles created using the ID selector are applied to elements by using the (X)HTML ID attribute.

Example of using IDs

CSS Code:


#container {  
  border:1px solid #333;
}

(X)HTML Code:


<div id="container">
  My content goes here.
</div>

Result:

My content goes here.

The ID attribute takes precedence over all the other selectors. If you're styling an element using its ID and then you give it a class, you will find that the properties applied using the class selector will not take effect. We talk about how to circumvent this in Part Four - Part Four - The CSS Order of Precedence.

Americanisation

CSS is written in US-English, so words like colour and centre, become color and center. If you don't inherently write US-English (like me!), it might feel weird to you at first, but you will get used to it.

Identifiers and Naming Conventions

In a CSS selector, the part of the class name that comes after the dot, or the part of the ID that comes after the hash, or the name of the element used in the type selector are referred to as identifiers. For instance, in .myClass, the "myClass" part is the identifier; in #myID, the "myID" part is the identifier; in p, the "p" is the identifier. CSS properties are also referred to as identifiers. So background is an identifier; color is an identifier; font-weight is an identifier ... and you get the idea.

Identifiers must be alphanumeric: they cannot contain numbers or symbols. Therefore $myclass is incorrect, as is 22myclass and _myclass; #@myid is incorrect, 88myid is incorrect ... and so on and so forth.

CSS itself is case-insensitive but aspects that aren't under the control of CSS are case-sensitive, such as the ID and class attributes assigned to your elements in the (X)HTML, and embedded fonts as well. It's also worth noting that, in XML (and, by extension, XHTML) element names are case sensitive, whereas in HTML, they are not, although, in HTML, it's considered good practice to adhere to case-sensitivity.

Even though CSS is case-insensitive, it's good practice to avoid uppercase identifiers (so use office instead of OFFICE) but the naming convention you use may vary. You have three options to choose from: you can use camel case, such as myGreatClass, or you can use all lowercase words, separated by underscoresmy_great_class; or you can use all lowercase, separated by hyphensmy-great-class. It is down to personal preference which naming convention you choose.