CSS Classes

Classes

A CSS Class is an identifier of an element which can be used multiple times on a page.

Memory device: Classes in school are periods. Remember to use a . whenever you want to reference a class.

Classes start with . in the selector .anything-you-want-to-name-it
the same class name can be used more than once within the same file
The class keyword refers to the class name that you set in the html page in the specific tag.
In the CSS file, you can identify a class on the whole, or you can identify particluar parts to style (ex: p tags, h3, or li tags)

` tags above. Remember, `class` is an `attribute` that we can use to change the way HTML elements behave. Now we can delve into the `.css` file!
The first thing to identify in the `.css` file is that it's possible to reference generic HTML elements by their tag type.
We've done this by using the `selector` of `body`. This is followed by a `{` which indicates that we're **starting** our ruleset. We then move into the ruleset and choose a `property`. In the case of our `body` tag, we're choosing to change the `background-color:` and then we assign it the `value` of `blue`. If it isn't obvious, this states to the browser that all elements with a `` tag will have a background that's blue. We state that the assignment is completed with a `;` at the end of the line. Finally, the ruleset is closed by a mated `}`. Just like in HTML, every opening `{` needs a closing `}` to let the browser know that we're done giving it instructions for the specific element/class.
Native HTML tags are one thing, but what about custom `.css` classes? Well, we identified `"css-classes"` a moment ago, and in the `.css` file we can see an entry with the same name. The only difference is that custom classes must be targeted using the `.` operator before the class name, as is reflected in the `.css` file above.
The last thing we need to discuss before moving on to the next lesson is descendant selectors. We know how to target a `class` using `.class`, but what if we want to target specific HTML elements in our `class`, but nowhere else? CSS has a neat trick where every element type that is a child can be easily pointed at by appending the element type to the end of our `class`. This is reflected with the syntax `.css-classes h1` in our code above. ## Challenge Try adding a `property` to one of your selectors above. Explore some of the properties that we haven't discussed yet...there are quite a few of them! ## More Reading A great CSS example, if needed, can be found [here](https://developer.mozilla.org/en-US/docs/Web/CSS/Descendant_selectors).

HEY

To Do List

Classes