In this lesson we're going to talk about the basic parts of what makes CSS work. We'll talk about what CSS selectors are, how to use them and introduce you to CSS IDs and classes. We'll discuss the idea of properties and values as well. Then you'll read through a walkthrough that will give you a more detailed look at core CSS concepts and prepare you to begin styling your own markup.

It's all about style here.

The Basics of CSS

CSS has very few moving parts. At it's core level there are three pieces that make up most of the CSS you'll write. These pieces are the:

1. Selector
2. Property
3. Value

Let's take a look at these separately.

Selectors

Selectors are actually quite properly named. They select parts of the HTML document to be styled. This should become readily apparent when you examine a bit of CSS like this:

p {
  background: darkgreen;
  color: white;
}

What is it doing? It is selecting all of the p tags and changing their text color to white and background color to darkgreen. This syntax is how you'll see basically all CSS written (with a certain degree of variance). There is a selector followed by curly braces. Inside the curly braces is where the styles go that are applied to what is being selected.

Element Selectors

Element selectors are CSS selectors that target the actual HTML element via its name. For example a div selector would select all of the div tags on the entire document. The above p selector will select all of the p tags in the entire HTML page.

Selecting all of one type of element may not be the functionality that you're looking for. Luckily CSS provides a few other ways to target HTML elements more specifically and tailored to your own requirements.

Classes

Understanding CSS classes is a lot like understanding a class of some type of object or thing. Much like 1st and 2nd class on an airplane for example, CSS classes are used to refer to a group of something. In the case of CSS, that group is a group of elements.

Say you had a bunch of p tags on the page. Some of these paragraphs you wanted to appear in a bigger font size than others. This describes a group of paragraph tags or a class of paragraph tags that you want styled differently. Let's see how this works.

First we declare our styles. CSS classes are created by using a dot followed by the name of the class. In this case .big.

.big {
  font-size: 24px;
}

Now we can apply this class to any number of p tags (or other tags if we wanted to) and change their font size.

<p>I'm going to display darkgreen and white.</p>
<p class="big">I'm going to display darkgreen and white. I'll have a bigger font size too!</p>

In the above example we applied the .big class to the 2nd paragraph only. This allows the other paragraphs to have their own styles but also allows us to apply styles to a group or class of tags that we specify with the .big class. This works great for multiple elements, but what if we want to target one special element only?

IDs

Identification is something we don't think about much but we all have it. It allows us to be uniquely identified. Our ID cards and passports etc... that we carry around allow the government to uniquely identify us. This is the same concept as a CSS ID.

IDs are used to pin point a single element in your HTML document. It is important that only one element has this ID because that is the entire purpose of giving it an ID. Otherwise, there would be multiple elements with the same ID.

#greeting {
  background: darkred;
}

<p id="greeting">Hello! I'll display darkred and white.</p>
<p>I'm going to display darkgreen and white.</p>
<p class="big">I'm going to display darkgreen and white. I'll have a bigger font size too!</p>

Notice that there is one p tag above that is identified specifically as a greeting. There isn't more than one greeting so it is given an ID of greeting. That means only that p tag will have the styles in the #greeting selector applied to it.

Key Takeaways

1. Selectors select elements
2. Classes are used for multiple elements
3. IDs are used for a single element

Properties and Values

Properties and values in CSS are the meat of your CSS files. They are the code that fills between the curly braces you open after each selector you create. There are tons of properties and values. The basic syntax is easy to remember, property: value;. Generally, CSS uses kebab-case for naming its properties and values. It's good to stick to this convention when naming your classes and IDs as well.

CSS Comments

Comments in CSS are made with the following syntax. Notice one very important thing, both single line comments and multi-line comments are created with the same syntax, /* */.

/* I'm a single line comment */
/*

I'm a multi-line comment

*/

Cascading Styles

CSS stands for "Cascading Style Sheets". The idea is that styles come in layers. These layers can be placed on top of each other. When one style layer is placed on top of another, it cancels any shared styles out by overwriting them. Let's have a look at what cascading styles really means. Let's consider a simple p tag.

<p>I'm a paragraph</p>

Now let's add style to it.

p {
  color: yellow;
  background: blue;
}

Now it will have a text color of yellow and a blue background. But what if we add a subsequent entry in our styles with a different background color what happens?

p {
  color: yellow;
  background: blue;
}
p {
  background: green; 
}

Now the p tag will have a green background. However, notice that the text color stays the same. This is the layering we discussed earlier in action. Now imagine this on a large scale with entire files of CSS! You can quickly begin to see how full layers of styles can be tweaked, altered and manipulated by stacking style sheets on top of each other.

Another important tidbit is that CSS styles are not only overridden through redefining them on the same selector. They are also overridden through specificity. For example, if you assign all p tags a style of color: darkgreen; and then later assign a p tag with an ID of #red-paragraph a style of color: red;, the specificity of the ID takes precedence. This is because IDs in CSS have higher priority than simple element selectors. This topic will be covered in more depth in the walkthrough you're about to read!

Shay Howe: Getting to Know CSS

Now that you have a head start on what CSS is and its basic parts, your task is to read through Shay Howe's walkthrough on Getting to Know CSS.

Code Review

The important bits of code from this lesson

/* CSS Element Selector */
p {
  background: darkgreen;
  color: white;
}

/* CSS Class */
.big {
  font-size: 24px;
}

/* CSS ID */
#greeting {
  background: darkred;
}

/* I'm a single line comment */
/*

I'm a multi-line comment

*/

Wrapping Up

The basics of CSS are fairly easy to get started with. Once you have them down you're fully prepared to start writing your own style sheets. However, the nuances and details of styling HTML elements goes much deeper as we'll see as we move forward into the following lessons.

There are no additional resources for this lesson just yet!

Sorry, comments aren't active just yet!