CSS 101 | Part Three - How to apply CSS

In this instalment of CSS 101, we will be talking about how to apply CSS to your elements. The only time we need modify our HTML in order to target it with CSS is when using the class selector or the ID selector. Styles created with any of the other selectors will take effect automatically.

Using classes

When we create classes, we apply them to our desired elements by using the class attribute, as such:

Example

CSS Code:

        .product {
        	background:red;
        }
        

(X)HTML Code:

		<div class="product">
			My awesome product!
		</div>
        

Multiple Classes

The class attribute can only be used once on an element. If you use it twice, the last instance will be the one that takes effect. But don't use multiple class attributes. It's really not good practice.

How to apply multiple classes

So how do we use multiple classes? Simple. We add our classes into the class attribute, separated by a space.

Here's an example to illustrate the process.

(X)HTML Code:

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

All three of these classes will be applied to the above div.

What order are multiple classes applied in?

Multiple classes are applied based on the order they occur in the stylesheet or embedded styles, with the classes that come last taking precedence.

However, there are instances where this isn't true.

• If you have a CSS declaration using a class and a CSS declaration using an ID, the ID will override the class, even if it is placed above the class.
• If you have a CSS declaration using the type selector and a CSS declaration using the class selector, the class will override the type selector, even if it is placed above the type selector declaration.
• If one or more of your classes are declared in a separate stylesheet, which is placed underneath your original stylesheet.
• If your classes are in an external stylesheet, as well as embedded styles and inline styles. In this instance, the embedded styles override the external styles and the inline styles override the embedded styles and the external styles (we will be talking more about this in part four).

Example of multiple class application

Let's look at an example, using two of the classes above. .product has a color:orange and .basket has a color:blue and .product is underneath .basket in our stylesheet. .product is the first class to be attached to our element and .basket is the second. When the page renders, the text in .product is orange because .product is below .basket in our stylesheet.

CSS Code:

        	.basket {
            	color:blue;
			}
            
            .product {
            	color:orange;
            }
        

(X)HTML Code:

        	<div class="product basket">Whatever.</div>

        

Result:

I know this is a lot to take in, but we will be covering the CSS order of precedence in the next instalment, so you will understand it completely and utterly by the end of Part Four!

Using IDs

Styles created using the ID selector are applied to elements by using the ID attribute.

Example

CSS Code:

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

(X)HTML Code:

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

The ID attribute takes precedence over all the other selectors. If you're styling an element using its ID but then you decide to create a class for it, because you want to use its styles elsewhere, you may find that the styles applied using the class selector will not take effect. We talk about how to circumvent this in Part Four.

Americanisation

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

Naming Conventions

When writing CSS, there are strict rules for how you must start your declaration: declarations cannot begin with numbers or symbols: they must always begin with a lowercase letter. Therefore $myclass is incorrect, as is 22myclass, and _myclass; @myid is incorrect, *myid is incorrect...and you get the picture. Also remember that CSS should always be in lowercase, so item instead of ITEM.

The naming convention you use may vary, however. You have two options to chose from: you can use lower camel case (camel case that starts with a lowecase letter), such as myGreatClass, or you can use all lowercase words, seperated by underscores - my_great_class.

Both the camel case method and the underscore method are valid. It is down to personal preference which you chose to employ...or, of course, you can mix and match!