In the old days of HTML, there was really not much style added to anything at all. Pages were typically bare and just plain ugly to say the least. Before CSS came around, it was common to create an entire page layout with HTML tables. While this can still be done, it should certainly be avoided at all costs. Besides, CSS makes everything so much simpler. You give your HTML elements a Class or an ID, and then you style those elements based on the Class or ID that you’ve given them. Let’s have a look at how CSS works!

STEP ONE:

Understanding the HTML

An HTML page is nothing but a list of elements that will define the structure of your document. It’s a lot like the framework for your page, and determines where in the flow of the document your elements will show up. For our simple demonstration, our HTML page will contain 2 Div elements. Think of a Div as a square. It’s just a container for other elements essentially. Here’s what the basic structure of our demonstration page looks like:

The 2 Divs are essentially placeholders for any other elements we’d like to place inside of them. Now, let’s take a look at how we can style these Divs using CSS selectors and declarations.

STEP TWO:

Understanding the CSS

A selector in CSS is exactly what it sounds like. Its job is to select an element based on its identifier. We can choose to specify only the type of HTML element, such as Div, or you can specify an ID or a Class to be selected from the HTML page. In practice, this is a lot simpler than it sounds. For example, suppose we wanted every Div element on our page to share a standard background color. Well, the CSS would probably look something like this:

The first thing you’ll notice is the word Div is the selector. We’ve told CSS to select every element on our HTML page that is a Div element, and to change the background color to blue. The background-color: #09C, and the height/width part of the code is the declaration. We’ve declared that every Div needs to have a background color of blue. That’s the power of CSS. We can select anything and everything in a page and style it how we’d like to.

If we load the HTML file up in a browser to view the page, you’ll see both of our Div elements.
Div Elements

However, this could pose a problem. Suppose our Div was a special Div that had its own characteristics. What if our Div doesn’t share any properties with other Divs on our page? Well, we’d need to select only that specific Div from the page, and that would require giving our Div an ID. Since any ID can only be used once per page, this will help make our Div more accessible. Add an ID to the first Div element in the page:

Now, the first Div on our page has an ID of “firstDiv”. Let’s go back into our CSS and create a New Selector and declaration for the firstDiv element:

Do you notice a difference between the Div selector and the #firstDiv selector? The difference is the “#” symbol. This is the ID symbol in CSS. Our selector for the firstDiv element says “grab the element with the ID of firstDiv. Now, only that particular Div will be 400 pixels square, and have a background color of red. Load up the page in your browser to see the difference in the two Divs. The lower, blue Div is being styled based on the fact that it’s a Div element. The red Div is being styled based on the fact that it has an ID of firstDiv.
Div being styled

Ok, so that solves our problem of only selecting a particular element on a page, but yet another problem may arise. Suppose we don’t want to select all of the Divs, but we have a special group of Div elements that need to have a special styling. Well, remember that an ID can only be used on a page once, so we can’t give each Div the same ID. What do we do? Well, CSS also gives us Classes that allow us to select groups of elements based on their Class name. Let’s revisit our Divs and give both of them a Class called “roundCorners”

So both of our Divs now have a class called roundCorners. Now, we’ll use a CSS selector to select every element that has a class name of roundCorners. Here’s what the CSS Selector looks like:

Awesome! So now we’ve selected any Divs on the page that are a part of the roundedCorners Class, and added some rounded corners to them. Simple as pie!
Final Result

Selectors and declarations are the foundations of CSS, and knowing when and how to use them is sure to increase your design muscle. Getting used to using them is essential to building better looking, more user internet friendly web pages. Until next time!

Download Source Files